Search
-
Recent Posts
Tags
adwords amazon analytics api apple aws blog chrome chromium cloud Design dropbox ec2 email error facebook firefox google google-apps homebrew ipad javascript jQuery linux lion mac microsoft mysql osx os x paypal php plugin quicksilver raspberry pi scam social spam twitter ubuntu unix video windows woo wordpress
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.
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 beautify, command line, javascript, jsbeautifier
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 } });
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.
Twipsy
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 bootstrap, javascript, plugin, twipsy, twitter
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 browser, browsers, doctype, document type, html, javascript, jQuery
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 chrome, google-chrome, javascript, jQuery, kiosk, screensaver, start, wait, windows
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 google, Graceful Degradation, javascript, Progressive Enhancement
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 apples, google, issac newton, javascript, newton
Leave a comment
Most Popular Programming Languages
Most Popular Languages as of January 2012 PositionJan 2012 PositionJan 2011 Delta in Position Programming Language RatingsJan 2012 Delta Jan 2011 Status 1 1 Java 17.479% -0.29% A 2 2 C 16.976% +1.15% A 3 6 C# 8.781% +2.55% A 4 3 C++ 8.063% -0.72% A 5 8 Objective-C 6.919% +3.91% A 6 4 PHP 5.710% -2.13% A 7 7 (Visual) Basic 4.531% -1.34% A 8 5 Python 3.218% -3.05% A 9 9 Perl 2.773% -0.08% A 10 11 JavaScript 2.322% +0.73% A 11 12 Delphi/Object Pascal 1.576% +0.29% A 12 10 Ruby 1.441% -0.34% A 13 13 Lisp 1.111% +0.00% A 14 14 Pascal 0.798% -0.12% A 15 17 Transact-SQL 0.772% +0.01% A 16 24 PL/SQL 0.709% +0.15% A 17 20 Ada 0.634% -0.05% B 18 39 Logo 0.632% +0.29% B 19 25 R 0.609% +0.07% B 20 21 Lua 0.559% -0.08% B source: tiobe language priority As of December 2009- Java, C, and PHP were the top three languages. Most Popular Languages in 2009 source: tiobe language priority
Posted in Marketing, Tech Opinion, Web Development
Tagged (Visual) Basic, Ada, C, Delphi/Object Pascal, Java, javascript, Lisp, logo, Lua, Objective-C, Pascal, Perl, php, PL/SQL, Python, R, ruby, Transact-SQL
Leave a comment
