Tag Archives: jQuery

How to Select a jQuery UI tab with Javascript

The documentation for jQueryUI tabs is a bit cryptic. It was not immediately clear how to Select a jQuery UI tab with Javascript, but I got it working with this little bit of code: $( “#tabs” ).tabs( ‘select’, “#profile” ); #profile is the id of the tab you would like to select, and #tabs is the element you set up the tabs on by calling $( “#tabs” ) You may also have to use jQuery instead of $ if you have noConflict mode enabled, the tabs need to be initialized first (as previously mentioned), and it is possible you will need to put all this info inside the ‘jQuery document ready’ wrapper: jQuery(function($){ $( “#tabs” ).tabs( ‘select’, “#profile” ); });

Posted in Tech Tips, Web Development | Tagged , , | Leave a comment


jQuery has a nice jQuery.getScript function that allows you to easily add <script> tags to a webpage. How can you do the same thing for CSS files? jQuery doesn’t have a built-in jQuery.getCSS / getCSS function, but you can use jQuery(‘head’).append instead. Here’s an example of how to dynamically insert remote CSS and JavaScript for (free) the HTML5 VideoJS player. jQuery(‘head’).append(‘<link rel=”stylesheet” rel=”nofollow” href=”http://vjs.zencdn.net/c/video-js.css” type=”text/css” />’); jQuery.getScript(‘http://vjs.zencdn.net/c/video.js’,function() { // you can also set callback items here // var myPlayer = _V_(“myvideo”); }); It would be nice if there was this sort of function, but there isn’t :\ jQuery.getCSS(‘http://vjs.zencdn.net/c/video-js.css’);

Posted in Tech Tips, Web Development | Tagged , , | Leave a comment

Google is Down (June 2012)

All of Google Services happen to be running extremely slow today, or are not running at all. It is almost as if Google’s servers are overloaded. Why is this? One possibility is that today is also the date WordPress 3.4 was released. WordPress is the fastest growing CMS platform in the world. It is widely adopted, and in this point release they have switched all of their javascript libraries and resources over to using resources that are google hosted, for example jQuery: http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js Other libraries include similar scripts and frameworks such as jQuery UI and the corresponding css. It is notable that google provides both HTTP and HTTPS / SSL versions of these resources. Google also recently released an updated algorithm to enhance search results, and they are also going to be phasing out Google Product Search in favor of a marketplace where they will make commission and rank products higher based on bids (using the Adwords admin interface). Perhaps those things are also slowing down this giant. Do you have another idea about why google is going so slow today? Leave a comment below!

Posted in Tech Opinion, Tech Tips, Web Development | Tagged , , , , , , | 3 Comments

Instabir: Unexpected token (

Are you using Instabir’s a/b testing and getting the javascript error: Unexpected token ( when your page loads? This is most likely because you are using either of these files: jquery.ab.js jquery-ab-hosted.js Unfortunately the un-minimized versions of Instabir’s a/b testing files will yield an Unexpected token error. You can either switch to using the minimized versions of the jQuery a/b testing plugin or you can fix the start and end of the file: The start of the file needs to be changed from this: // jQuery AB Testing // Website: www.instabir.com function($){ To this: // jQuery AB Testing // Website: www.instabir.com (function($){ Notice the ( before the function keyword. Other (paid) A/B testing tools include GWO, Omniture, Sitespect, and Visual Website Optimizer.

Posted in Marketing, Web Development | Tagged , , | Leave a comment

jQuery: Change Doctype

There are a few things you might want to know if you’re looking to change the document type (doctype) using jQuery or Javascript. First, doctype is listed as a property in the W3C documentation, and is defined as read-only: interface Document : Node { readonly attribute DocumentType doctype; readonly attribute DOMImplementation implementation; readonly attribute Element documentElement; Element createElement(in DOMString tagName) raises(DOMException); DocumentFragment createDocumentFragment(); While it may be possible to insert a doctype with javascript / jquery above the HTML tag, it is not advisable to do so. Sample code which would do this might look like: <!– no doctype, loads in Quirks Mode (BackCompat) –> <html> <!– rest of the document, then at the end: –> <script> alert(‘now in compatMode ‘+document.compatMode); if (document.compatMode===’BackCompat’) { setTimeout(function() { var markup= document.documentElement.innerHTML; markup= ‘< !DOCTYPE html><html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>’+markup+'</html>’; document.open(); document.write(markup); document.close(); }, 0); } </script> </html> via

Posted in Tech Tips, Web Development | Tagged , , , , , , | Leave a comment

Use Google Chrome as a Screensaver

You can use Google Chrome‘s –kiosk mode to create a full-screen screensaver of sorts. This might be good if you have a webpage or intranet page you’d like to display. Here’s how I did it for a windows computer: Create a file such as c:\screensaver.bat and add the following code. Replace with your location of chrome.exe @echo off taskkill /im chrome.exe start /wait “” “C:\Documents and Settings\Google\Chrome\Application\chrome.exe” –kiosk http://www.mysite.com rem ## run any command here you’d like after the “screensaver” finishes ## Next, set that to run as a scheduled task after the computer has been idle for 5 minutes (or however long you choose). You can then listen with jQuery / javascript to close the page when the mouse moves. Here is code that closes the page when the mouse moves more than 20 pixels. You could also bind it to a keyboard event. <html> <head> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script> </head> <body> <h1>hello</h1> <div id=”log”></div> <script type=”text/javascript”> var startx = ”; var starty = ”; jQuery(‘html’).bind(‘mousemove’,function(event){ if(startx == ”){ startx = event.pageX; starty = event.pageY; }else { deltax = Math.abs(event.pageX – startx); deltay = Math.abs(event.pageY – starty); var msg = ”; msg += “distance x “; msg += deltax; msg += “distance y “; msg += deltay; $(“#log”).html(“<div>” + msg + “</div>”); if(deltax > 20 || deltay > 20){ closeWindow(); } } }); function closeWindow(){ setTimeout(function(){ window.open(”, ‘_self’, ”); window.close(); },1000); } </script> </body> </html>

Posted in Software, Tech Tips, Web Development | Tagged , , , , , , , , | 4 Comments

WordPress: How to wp_enqueue_script jquery-ui / autocomplete

If you are trying to enqueue jquery’s autocomplete in wordpress, I’d suggest just using the remote version through google’s CDN / API site. You can deregister the jquery-ui with the first line of code, re-register it with the second line of code, and then activate it with the third line of code: wp_deregister_script(‘jquery-ui’); wp_register_script(‘jquery-ui’,’http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js’,array(‘jquery’)); wp_enqueue_script(‘jquery-ui’); You may also want to enqueue the styles using something like: wp_enqueue_style(‘jquery-style’, ‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css’); And more recently I found this project on GitHub which has some nice examples and code that may be more updated than the version included with wordpress: https://github.com/dyve/jquery-autocomplete

Posted in Web Development | Tagged , , , | 4 Comments

googleapis latest jQuery

From JQuery: http://code.jquery.com/jquery-latest.min.js From Google, currently the latest of the 1.x family (1.4) http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Posted in Web Development | Tagged | 1 Comment

jQueryUI Position – A nice job on visual documentation

I love the documentation provided for jQueryUI’s position

Posted in Design, Web Development | Tagged , | Leave a comment

Fancy Thumbnail Hover Effect w/ jQuery

clipped from www.sohtanaka.com Recently I was checking out some nice flash galleries and came across an effect that I really liked. I had a sudden urge to duplicate that similar effect but using my bread and butter (CSS and jQuery). I thought I’d share this and maybe some of you can find it useful. View Demo

Posted in Design, Web Development | Tagged , | Leave a comment