Keycaster

Keycaster is a jQuery plugin was written to add a keystroke and mouse visualizer to your browser window. It is similar to keycastr for the mac, except this only works inside the browser window.

This plugin is still in the alpha stage because it doesn't show all shifted keys properly and some key symbols do not work in all browsers (written mainly to work in Firefox). Also I plan on making this script work as a bookmarklet so you can just click on a link to activate it.

---

Update: You can now add this script to any page using this bookmarklet - Keycaster - just drag it into your browser bookmarks and click on it whenever you need to visualize your mouse or keyboard actions.

AnythingSlider

I've been working on improving the AnythingSlider jQuery plugin by Chris Coyier of CSS-Tricks.com. The project was moved to github, so you can always get the latest version there... My version is up to 1.4 and you can check out a demo of it here - try starting both YouTube videos, then start the slideshow (doesn't work in Internet Explorer properly).

Features include:

• Panels are HTML Content (can be anything).
• Multiple AnythingSliders allowable per-page.
• Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide).
• Optionally resize each panel (specified per panel in css).
• Optional Next / Previous Panel Arrows.
• Use keyboard navigation or tabs that are built and added dynamically (any number of panels).
• Link to specific slides or go forward or back one slide from static text links
• Each panel has a hashtag (can link directly to specific panels).
• Optional custom function for formatting navigation text.
• Auto-playing slideshow (optional feature, can start playing or stopped)
• Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web).
• If slideshow is active, a playing video will complete before the slideshow continues.
• Pauses slideshow on hover (optional).
• Optionally play the slideshow once through, stopping on the last page.

Chained Video Selection Box

This video box does two things.
(1) Videos are grouped and can be selected from a drop down menu.
(2) You can change the video size on the fly.

Click on the image below to see the demo page, view source for the full code.

Customizing

Setting up Groups

1. To add a new group, you'll need to first add it to the group selector box - it looks like the example below. Add the new group option in whatever order you desire.
   
   

   <!-- Add New Groups below -->
   <!-- ******************** -->
   
   <option value="group1">The Guild</option>
   <option value="group2">Muppets</option>
   <option value="group3">Misc Videos</option>
   
   <!-- Add New Groups Above -->
   <!-- ******************** -->

   Add this for a new group:
   
   

   <option value="group#">GROUP NAME</option>

   Now replace the "group#" with the next number and the text in yellow with the group name.
2. Now you'll need to add the group's box, follow this template:
   
   

   <div id="group#"><!--
   <option value="VIDEO #1 URL or Embed code">VIDEO #1 TITLE</option>
   <option value="VIDEO #2 URL or Embed code">VIDEO #2 TITLE</option>
   --></div>

   • Make sure the group# matches the number in the selector box
   • Replace the URL in orange with the video's URL or Embed code (*Note* read the "Video URL" section below before adding the URL)
   • Replace the text in purple with your Video's title.
3. If you want to change the displayed text from "Select a group", "Select a video" or "<- select". I highlighted the text in teal so you can find it easier. *Note* < is the HTML code for the left bracket "<".

Video URL or Embed Code

• Only certain sites have support for the URL shortcut versus using the entire embed code provided by the site, I could add more but it'll just make the code that much longer:
  
  
  
  • Daily Motion
  • Google Video
  • Vimeo
  • Yahoo
  • You Tube
    
    
• DailyMotion:
  
  

  <option value='http://www.dailymotion.com/video/x1bxhu_tunak-tunak-tun_fun'>Tunak Tunak (DailyMotion 4:3)</option>

• Google Video:
  
  

  <option value='http://video.google.com/videoplay?docid=3034123062262825045'>Final Fantasy X-2 Intro (Google 4:3)</option>

• Vimeo:
  
  

  SD:	<option value='http://www.vimeo.com/5336440'>Blip (Vimeo 4:3)</option>
  HD:	<option value='http://www.vimeo.com/hd#6235286'>The Forest (Vimeo 16:9)</option> <option title='hd' value='http://www.vimeo.com/6235286'>The Forest (Vimeo 16:9)</option> <option title='1.78' value='http://www.vimeo.com/6235286'>The Forest (Vimeo 16:9)</option>

  
  

  All three of the HD examples are equivalent. Note the "hd#" in the URL is specific for HD videos - so you could manually add this, but you may not get the HD version if it doesn't exist)

• Yahoo:
  
  

  <option value='http://video.yahoo.com/watch/5292856/13959401'>Skateboarding Bulldog! (Yahoo 4:3)</option>

• You Tube:
  
  

  SD:	<option value='http://www.youtube.com/watch?v=qNfDzfhRgkU&fmt='>Alizee - I'm Fed Up! (YouTube 4:3)</option>
  HD:	<option title='hd' value='http://www.youtube.com/watch?v=cKg6CVki5hk&fmt='>Wet - Trailer (YouTube 16:9)</option>

• All other Video sites: I'm using Yahoo here, but it applies to any site that provides an embed code... make sure there are no single quotes (apostrophes) in the code... Replace these with a \' (backslash + apostrophe) if you have to.
  
  

  <option value='<div><object width="512" height="322"><param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46" /><param name="allowFullScreen" value="true" /><param name="AllowScriptAccess" VALUE="always" /><param name="bgcolor" value="#000000" /><param name="flashVars" value="id=13959401&vid=5292856&lang=en-us&intl=us&thumbUrl=http%3A//l.yimg.com/a/i/us/sch/cn/video06/5292856_rnd9461b9a5_19.jpg&embed=1&ap=10513021" /><embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46" type="application/x-shockwave-flash" width="512" height="322" allowFullScreen="true" AllowScriptAccess="always" bgcolor="#000000" flashVars="id=13959401&vid=5292856&lang=en-us&intl=us&thumbUrl=http%3A//l.yimg.com/a/i/us/sch/cn/video06/5292856_rnd9461b9a5_19.jpg&embed=1&ap=10513021" ></embed></object>'>Skateboarding Bulldog (using full embed code)</option>