Tag Archives: javascript

What is Twipsy?

Do you wonder what Twipsy is? Twipsy is mostly a plugin for jQuery 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. The 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 , , , , , , , , | 3 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 , , , | Leave a 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

thickbox alternatives

While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives. colorbox jQueryUI Dialog fancybox DOM window shadowbox.js

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

greasemonkey – google images relinker (v 2.0)

I really like the google image relinker script for greasemonkey, but sometimes when there’s a hotlink protection or something else funky, you just want the original google images link. i updated this greasemonkey image re-linker script so that it relinks the images, but also provides links to open the original link (both in a new tab, and in a new window) Download the script: google_image_relinker_v2_00.user.js.txt (rename to just .js) google_image_relinker_v2_00.user.js (right click and save as) Greasemonkey scripts can be used with chrome or firefox

Posted in 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

Using json_encode() and json_decode() in PHP4

I use json_encode() a lot for AJAX calls. Teamed with jQuery’s $.getJSON(), it’s too convenient not to use. Unfortunately, json_encode() doesn’t come standard until PHP 5.2. To add insult to injury, many current *nix distros don’t include PHP 5.2 in their official repositories yet. So, if you’re using PHP4 download JSON’s json_encode and json_decode for PHP4 (which automatically degrade for PHP5, thus not breaking your app during an upgrade) here: http://mike.teczno.com/JSON/JSON.phps json_encode() example 1 <?php include("JSON.php"); $a = json_encode( array( ‘a’=>1, ’2′=>2, ‘c’=>’I <3 JSON’ ) ); echo $a; // Outputs: {"a":1,"b":2,"c":"I <3 JSON"} $b = json_decode( $a ); echo "$b->a, $b->b, $b->c"; // Outputs: 1, 2, I <3 JSON json_encode() / json_decode() example 2 In Javascript, consuming input in JSON format is as easy as: eval(“var decoded_data = ” + encoded_data); With JSON-PHP, it can be almost as easy on the server-side, too: // create a new instance of Services_JSON require_once(‘JSON.php’); $json = new Services_JSON(); // convert a complex value to JSON notation $value = array(1, 2, ‘foo’); $output = $json->encode($value); print($output); // accept incoming POST data $input = $GLOBALS['HTTP_RAW_POST_DATA']; $value = $json->decode($input); Using json_encode() and json_decode() in PHP4 with Arrays You can use json_encode() with arrays or multi-dimensional arrays. When you are ready to output it as json, just call echo json_encode($yourArray); You can also use this method with jQuery’s $.ajax call, and specify the data type as JSON, although jQuery will automatically try and detect the data type, so that may not even be necessary. source: mike.teczno

Posted in Web Development | Tagged , , | 6 Comments