Beutelevision

by Thomas Beutel

Category: jQuery

WordPress Visual Composer, EventsPlus plugin and a.poplight[href^=#] syntax err

Today I came across a weird bug on a client’s wordpress site that broke Visual Composer. The Javascript console was reporting a a.poplight[href^=#] syntax err which seemed to indicate that popups were not working. Indeed, there was a section of the page with tabs that showed no content under the tabs. After a bit of googling, […]

Datatables in a Colorbox iframe with Selected Row Returned to Parent Window

I recently created a form where one of the questions was asking for a specific code (specifically, a NAICS code). The problem was that there are almost 20,000 codes to choose from, so it was not practical to use a pulldown. I hit upon the idea of using the wonderful Datatables table plugin for jQuery. […]

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 […]