JavaScript Garden: Documentation about the most quirky parts of JS

JavaScript Garden, a growing collection of documentation about the most quirky parts of JavaScript gives advice to avoid common mistakes, subtle bugs, as well as performance issues and bad practices that non-expert JavaScript programmers may encounter on their endeavors into the depths of the language.

In order to understand the topics covered in this guide you should have former knowledge of the language. In order to learn the basics of JavaScript, please head over to the excellent guide on the Mozilla Developer Network.

Some of the quirky parts that are covered include:

  • Objects: Object Usage and Properties, The Prototype, hasOwnProperty, The for in Loop
  • Functions: Function Declarations and Expressions, How this Works, Closures and References, The arguments Object, Constructors, Scopes and Namespaces
  • Arrays: Array Iteration and Properties, The Array Constructor
  • Types: Equality and comparisons, The typeof, operator, The instanceof operator, Type casting
  • Core: Why not to use eval, undefined and null, Automatic semicolon insertion

Lightweight & Easy to Use JavaScript Modal Windows: TinyBox2

TinyBox2 is a lightweight (under 5 kb) modal box script that supports iframes and images natively. You can POST using AJAX as welll as callback functions can be passed for load and close events. Clicking ESC will close the modal window. The default styling can be overridden by setting CSS IDs. The script is executed by passing an object due to the large number of options. There is nothing to initialize. You just have to call the function on whatever mouse or browser event you like.

Sample Call{url:'advanced.html',width:300,height:150}).

Features include:

  • Support for HTML, IFRAME, URL, or image parameters
  • Easily expand and contract a popup on the fly
  • Fixed Width/Height, Light Mask, Custom Vertical Split
  • Custom Position
  • Enable/disable mask/animation/close button
  • Modal Box closes when pressing `ESC`

Target specific browsers by custom classes: .css{user:agent;}

cssUserAgent is a tiny script (has 1.9kb minified) that applies special CSS classes to your pages allowing you to use valid CSS to work around browser-specific quirks. cssUserAgent’s feature applies User-Agent specific CSS classes to the tag to allow browser-specific CSS variation without resorting to CSS hacks. Since these are performed once at startup, CSS may be statically defined without the need to mix browser-specific logic into the presentation. The script creates multiple classes for each user agent allowing the web developer to target browsers classes on different labels of granularity.

<!-- the CSS classes currently applied to this page tag are: --> <html class="ua-gecko ua-gecko-1 ua-gecko-1-9 ua-gecko-1-9-2 ua-gecko-1-9-2-13 ua-firefox ua-firefox-3 ua-firefox-3-6 ua-firefox-3-6-13"> <head>%u2026</head>
<body>%u2026</body> </html> 

For instance, you can use transparent GIFs for IE6 (since PNG transparency is not support by Internet Explorer 6):

/* CssUserAgent lets you target specific browsers without CSS hacks */ .logo-area { background-image: url(logo.png);
background-repeat: no-repeat;
background-position: left top; }

/* target IE 5.0, 5.5, 6.0 */
.ua-ie-5 .logo-area,
.ua-ie-6 .logo-area
{ /* IE versions < 7.0 don't fully support transparent 24-bit PNGs */
background-image: url(logo.gif); }

Website Walkthrough with AutoPlay | Powered by jQuery

Codrop is sharing a script that allows you to setup a tour on a website with jQuery. This is very useful if you want to explain to your visitors the functionality of a web application in an interactive way. The user is guided through tooltips to each of the marked sections of the application. A navigation box is used to go back and forth, start the tour and restart it. A cool feature is the “Autoplay” which automatically goes through each marked element, allowing the user to sit back and watch every step without having to click on the next button.

The steps are configured in a JSON object. The following parameters are used:

  • name: the class given to the element where you want the tooltip to appear
  • bgcolor: the background color of the tooltip
  • color: the color of the tooltip text
  • text: the text inside of the tooltip
  • time: if automatic tour, then this is the time in ms for this step
  • position: the position of the tip

Build Applications for Mobile and Touch Devices: DHTMLX Touch

DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. This JavaScript framework allows you to create eye-catching, cross-platform web applications for mobile and touch-screen devices. It’s compatible with the major browsers for mobile platforms. Applications built with DHTMLX Touch will run smoothly on iPad, iPhone, Android-based smartphones, and other popular devices. In order to display and work correctly, DHTMLX Touch require a mobile device. You can also run the samples on usual computers in FireFox 3.6 and above and WebKit browsers (Safari, Chrome, etc.), but there still can be some issues since the library is oriented mostly for mobile devices.

Upcoming features and release plans:

  • Full-featured visual designer
  • Server-side integration
  • Global data-store
  • Carousel component
  • Additional animation
  • Extended support for mobile & touch devices
  • Detailed documentation
  • Support for client storage

Free SEO Report: Optimize your website in 3 Steps! is a tool that generates a SEO report for your website, based on a specific keyword. Unlike many Search Engine Optimization Services out there that offer such reports for ridiculous prices, this free tool can analyze your keywords against your competitors quickly and explains why they are beating you in your ranking. You just need to submit your URL, keyword and e-mail address to receive the report.

The tool offers detailed reports about the document title, headings (h1, h2, h3), body text, url, sitemap and robots.txt, meta description, links, html code and page load time, images, and meta keywords.

For your information, here are some suggestions offered by for the document title:

  • Make sure that your title tag includes your keyword (a greater weighting is given to key phrases at the left of the title tag)
  • A compelling call-to-action might help you get a better click-through rate in Google search engine results pages.
  • Make title tag unique on each page (Google Webmaster Tools can help you detect problems with the title tags)
  • Avoid keyword stuffing in your page title.
UPDATE: Their terms and condition changed. You can still sign up and get free reports for your website.

By referring this tool to your friends you can earn more credits that will allow you to generate more reports. If you are running an online business and need to generate a lot of reports you can upgrade the service for $19.95/month that will allow you to get unlimited number of FULL reports plus you can customize the PDFs with your own logo and footer text.

Slides: Customizable and Stylish Slideshow Plugin for jQuery

Slides is a simple jQuery slideshow that is easy to implement, customize and style. It includes features like looping, auto play, fade or slide transition effects, crossfading, image preloading, auto generated pagination. Slides is compatible with all modern web browsers including; Internet Explorer 7/8/9, Firefox 3+, Chrome, Safari and Mobile Safari. It even works in the old IE6.

My favorite feature of Slides and main reason for its development is you never see multiple slides fly by. You get to the end and it loops. You click from slide 1 to 5 and slide 5 just slides in from the right. Awesome.

jQuery 1.4.3 Offline Learning Kit: Tweak your skills offline

Addy Osmani, a passionate Web Developer, shares a jQuery offline learning pack,for anyone interested in tweaking his skills offline. The kit include printable reference sheets, so you can easy access the right material whether you are wondering what event, selector or method might be the best to you. All the documentation comes in an easy browseable offline format with all the API examples included. For those who started working with jQuery Mobile, the pack also includes a demo application: one for PHP developers and another for Rails developer.

The whole package include:

  • My 1.4.3 Selectors Printable that explains what each selector does and how it should be used (PDF)
  • The FutureColours 1.4.3 Cheatsheet showing all the different methods supported by 1.4.3 (PDF)
  • The jQAPI 1.4.3 Offline Documentation pack that lets you browse the documentation and API examples on your desktop (thanks to the guys at yayQuery and the awesome Ben Alman)
  • A Complete Developer’s jQuery 1.4.3 Mobile Demo Application (PHP courtesy of DevGrow, Rails courtesy Fuel)
  • Rebecca Murphy’s excellent jQuery Fundamentals book and exercises (PDF)
  • 1.4.3 and our 1.4.4 Release Candidate Preview

PS: Take also a look at jQuery 1.4.2 Visual Cheat Sheet from 😉

Catch404: Modal Plugin for Handling Broken Links: jQuery | CSS

Catch404 is a jQuery and CSS3 Modal Plugin for showing broken links and 404 errors without users even having to leave the page after they click the actual link. The plugin uses the power of AJAX to check the target clicked link in the background. If the URL is not broken nor generates a 404 error, then the page will load for the user. Otherwise, the visitor would be prompted through an Inline jQuery Modal Window that he is trying to access a non-workable URL address.

Let’s pretend that this is a broken link. Can you imagine that when your users click this link, instead of them being redirected to a 404 error on your site, a friendly modal message pops up on your current page saying that it’s not available?. In that same message box you can then give them a sense of direction so that they’re not lost – you could ask them to click on a contact link to report the link’s broken, offer an alternative mirror, recommend they do a site search for the file or just say that you’re experiencing hosting issues and the file will be back up soon.

Simple Lightboxing | The Programmer’s Lightbox Tool | Lightbox_me

Lightbox_me aims to be a simple solution to lightbox a DOM element without having all the fanciness of all the lightbox-related plug-ins out there. It’s an essential tool for the jQuery developer’s toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.

Features include:

  • Handles overlay resize when the window is resized
  • Handles overlay size in cases where the document is smaller than the window
  • Handles position: fixed in all browsers
  • Position: fixed automatically swaps to position: absolute when the window size is smaller than the modal, so the user can scroll to see the contents
  • Tiny footprint (just over 1000 bytes gzipped & compressed)
  • Small DOM overhead (adds 1 DOM element for the overlay)
  • Dynamic iFrame shim is created and destroyed for the IE 6 select box peek issue (tested and working on HTTPS pages)