Click poster frame to start HTML5 video using jQuery

I needed to have an HTML5 video with a clickable poster frame. The first issue was that Safari would preload the movie, removing the poster frame after a few seconds. I fixed that by setting preload=”none”: <div id=”promovid”> <video id=”video” controls=”controls” poster=”video-poster.jpg” preload=”none” width=”640″ height=”480″> … </div> Them to make the poster frame clickable, I […]

Detecting a click in a checkbox with jQuery

A simple script to detect when a checkbox is clicked. What you do with once you’ve detected the click is up to you. <html> <head> <script src=”http://www.google.com/jsapi”></script> <script> google.load(“jquery”, “1.3.2″); google.setOnLoadCallback(function() { $(‘#agree’).click( function() { if($(this).attr(‘checked’)){ alert(‘checked’); } else{ alert(‘unchecked’); } }); }); </script> </head> <body> <p> <input id=”agree” type=”checkbox” /> I agree </p> </body></html>

Result of expression ‘document.forms[0].submit’ [[object HTMLInputElement]] is not a function.

I was trying to add a small delay into my form submission like so: <form … onsubmit=”setTimeout(‘document.forms[0].submit()’,2000);return false;”> but everytime I tried it, I got the following error: Result of expression ‘document.forms[0].submit’ [[object HTMLInputElement]] is not a function. This one had me stumped, until I realized what it was telling me… that my submit button […]

Using jQuery and Prototype together while avoiding the dreaded element.dispatchEvent error

Here is what I do to avoid the dreaded “element.dispatchEvent is not a function” error. I load jQuery first, Prototype second, and then I use jQuery( ) instead of $( ) for all my jQuery calls. <!– Set up jQuery and prototype together –> <script src=”http://www.google.com/jsapi”></script> <script> google.load(“jquery”, “1.3.2″); google.load(“prototype”, “1.6.0.3″); google.setOnLoadCallback(function() { jQuery(‘#helphide’).hide(); jQuery(‘#helpbutton’).click( […]

Fix Margins in IE6 with jQuery

IE6′s well known margin problems can be solved many ways, such as using CSS that only IE6 will read. I like to use CSS and jQuery as follows: CSS: #wrapper  {   margin: 0 auto;   width: 800px;   …  }  .wrapperie6  {   width: 810px !important; /* compensate for IE6 */  } and the […]