Beutelevision

by Thomas Beutel

Category: jQuery

March 23, 2011

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 used this jQuery snippet:
<script>
$(document).ready(function(){
$(’#promovid’).click( function(){
$(’#video’).get(0).play(); [...]

View Comments
March 20, 2010

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{
[...]

View Comments
September 15, 2009

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 was named “submit”.
<input type=”submit” [...]

View Comments
August 28, 2009

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() {
[...]

View Comments
July 25, 2008

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 jQuery code:
$(document).ready(function() {
  if($.browser.version == ‘6.0′){
  [...]

View Comments