Browse: JavaScript

Small, Lightweight and Unobtrusive Scripts, Tools

Developed by Daniel Raftery, Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users, giving you a complete control over style, content, position, and functionality. Apprise is, more or less, for the developers looking for an attractive alert or dialog box without having to download a massive UI framework. The customization is done via CSS (apprise.css) in order to adjust the look and the feel.

Options include:
'confirm' : false, // Ok and Cancel buttons
'verify' : false, // Yes and No buttons
'input' : false, // Text input (can be true or string for default text)
'animate' : false, // Groovy animation (can true or number, default is 400)
'textOk' : 'Ok', // Ok button default text
'textCancel' : 'Cancel', // Cancel button default text
'textYes' : 'Yes', // Yes button default text
'textNo' : 'No' // No button default text

  • Source & Demo:
  • Browsers Compatibility: iPhone/iPad, Chrome 8.0+, Firefox 3.0+, Safari 4.0+, Internet Explorer 9.0, Internet Explorer 7 & 8 work with minor styling mishaps
  • License: Creative Commons Attribution-ShareAlike 2.5 Generic License

I am sure you often need to make quick changes to your CSS and JavaScript files and connecting to the FTP, downloading, editing and re-uploading the files again to the server is a time consuming process.

Live.js is meant to make this process shorter by making sure you are always looking at the latest version of the page you’re working on whether is an HTML, CSS or JavaScript file. You just need to include the script and it will monitor the current page you’re working on by sending consecutive HEAD requests to the server. Changes to CSS will be applied dynamically and HTML or Javascript changes will reload the page.

Live.js works in Firefox, Chrome, Safari, Opera and IE6+ until proven otherwise. Live.js is independent of the development framework or language you use, whether it be Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla or what-have-you.

Live.js was written by Martin Kool as the next step in Handcraft’s design in the browser strategy. But similar to when we open sourced Backfire (which allows you to save CSS changes made with Firebug) it seemed natural to once again share the code.

PS: Make sure you protect the page where you make the changes ;-)

jQuery File Upload is a non-Flash Customizable jQuery Plugin having an implementation based on open standards like HTML5 and JavaScript. Provides an API to set individual options and define callBack methods for various upload events. This plugin works with any server-side application platform: Google App Engine (Python, Java), Ruby on Rails, PHP and any other platform that supports HTTP file uploads.

Features include:

  • Multiple File Upload: Allows to select multiple files at once and upload them simultaneously.
  • Drag & Drop support: Allows to upload files by dragging them from your desktop or filemanager and dropping them on your browser window.
  • Upload progress bar: Shows a progress bar indicating the upload progress for individual files.
  • Graceful fallback for legacy browsers: Uploads files via XMLHttpRequests if supported and uses iframes as fallback for legacy browsers.
  • Cross-site file uploads: Supports uploading files to a different domain with Cross-site XMLHttpRequests.

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

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`

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

Posted on December 27, 2010, Filled under jQuery,  Bookmark it

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

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!

Posted on December 15, 2010, Filled under jQuery, SEO,  Bookmark it 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.

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.