Tag Archives: javascript

ShareThis Asynchronous Javascript Loading

Unfortunately the ShareThis service has a lot of known issues, like loading a lot of data from their tracking site, b.scorecardresearch.com and other types of bloat when initializing their icons. Because calling stLight.options depends on having the buttons.js script already loaded, it is not really feasible to initialize the code like this: <script type=”text/javascript” src=”http://w.sharethis.com/button/buttons.js”></script> <script type=”text/javascript”>stLight.options({publisher: “6beba854-ee6d-4ae1-a4f3-b69815c8ef63”});</script> However, you could use an onload function to do the stLight.options, and then wrap the entire thing inside of a function that won’t interfere with the global namespace, like this: <script> // ShareThis Asynchronous Javascript Loading // from https://techblog.willshouse.com/?p=5265 (function(){ // window.switchTo5x=false; // (optional) var e=document.createElement(“script”); e.type=”text/javascript”; e.async=true; e.onload=function(){ try{ stLight.options({publisher: “6beba854-ee6d-4ae1-a4f3-b69815c8ef63”, doNotHash: true, doNotCopy: true, hashAddressBar: false}); }catch(e){ /* optionally do something to handle errors here */ } } e.src=(‘https:’ == document.location.protocol ? ‘https://ws’ : ‘http://w’) + ‘.sharethis.com/button/buttons.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(e, s); })(); </script> Make sure to update your publisher ID in the code above if you copy / paste it.

Posted in Social Media, Tech Tips | Tagged | 2 Comments

Use JSBeautifier from the command line on Mac OS X

Recently I read a post about how to use JSBeautify in Textmate via the filter selection command. It was also nice in that it gave an example of how to install JSBeautify on your system – I think it will work for any linux machine, but I was using OS X. The jsbeautifier.org has a nice interface, good results, and lots of options: To install on Mac OSX, to install JSBeautify, you can use the following commands: cd /tmp git clone https://github.com/einars/js-beautify.git cd js-beautify/python python setup.py install Then you can simply use js-beautify /path/to/filename.js to have it run. All the power of jsbeautifier.org right at your fingertips as a command-line tool!

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

Fancybox 2: Remove caption / title

I was testing out Fancybox 2 from Fancyapps and although they have some good documentation on their website I was unable to hide the title / caption when showing an image: After playing around with the code for a bit I got it working using this. It is a little hackish but it did the trick: jQuery(function($){ var fancyBoxOptions = { closeBtn : true ,arrows : false ,nextClick : true ,afterClose : function() { jQuery(‘#wpadminbar’).show(); } } jQuery(‘.fancybox’).fancybox(fancyBoxOptions); }); They have this code listed on their website but it did not work for me: //Disable title helper $(“.fancybox”).fancybox({ helpers: { title: null } }); //Disable overlay helper $(“.fancybox”).fancybox({ helpers: { overlay : null } });

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

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


Twipsy is going to be one of two things – it can either be a Bootstrap plugin, or a character / animated / mascot. Twipsy the Mascot Twipsy was the official Mascot of the EXPO 2000 World’s Fair held in Hannover. Twipsy for Bootstrap Do you wonder what Twipsy is? Twipsy is mostly a plugin for jQuery/javascript/moo-tools having to do with creating tool tips, it is based on “Tipsy”, but the important thing about the Twipsy jQuery plugin for creating tooltips is that it is part of the Twitter Bootstrap kit – that is Twipsy is a plugin that works with the Boostrap framework. Twipsy’s tooltips can be custom styled via CSS and their behavior can be controlled via JS parameters. This includes position, animation type, offset, title, trigger, content templates, etc.. It was “ported” from tipsy. A demo is included with the download package, which can be found at http://twitter.github.com/bootstrap/javascript.html#tooltips To quote them Twipsy is A new take on the jQuery Tipsy plugin, Tooltips don’t rely on images—they use CSS3 for animations and data-attributes for local title storage.

Posted in Tech Tips, 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

Google Fails Graceful Degradation

I’m a big fan of Graceful Degradation, Progressive Enhancement, and accessibility in web design. And I think that normally it is also important to Google as well, after all they have hundreds of millions of visitors each day and surely they stretch across the spectrum in terms of devices, browsers, and bandwidth. This is why I was very surprised to visit the Google homepage today without javascript and not see the Google Logo! I know that most people do have javascript enabled, but is it that hard to set up your page so that your branding doesn’t go missing when it is turned off? I feel like Google should have checked that. I mean, they do allow their search to work just fine without Javascript, so why not the logo too? I feel like this must have been an “oops” as they were probably working on the technology for the eclipse last minute or something. That was pretty cool technology that they used today, by the way. after

Posted in Web Development | Tagged , , , | 1 Comment

Google gets crazy with Newton’s Apples

Google is celebrating Newton’s Birthday today with a poppy javasript falling apple. Google recently added javascript to their homepage with the fade in /  fade out of the text around the edges. Google usually adds cool graphics for holiday’s like Issac Newton’s Birthday but they have decided “what the heck,” we are already using javascript on the homepage, let’s add something else. I think it’s kind of delightfully tacky.

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