LavaLamp for jQuery lovers! | Ganesh Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight. Just so you know, it weighs just 700 bytes(minified)! Often I have noticed, that the credits are usually granted towards the end. As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. I hope you agree that a typical HTML widget consists of 3 distinct components. A semantically correct HTML markupA CSS to skin the markupAn unobstrusive javascript that gives it a purpose Now lets follow the above steps and implement the LavaLamp menu for your site. Step 1: The HTML Since most UI developers believe that an unordered list(ul) represents the correct semantic structure for a Menu/Navbar, we will start by writing just that. Bonus
labelify: a jQuery plugin to add labels to your textboxes ignore A fairly common design pattern in web forms is to have some explanatory help text for a textfield appear inside the text field, and then remove it when the user clicks into that field. It has the benefit of putting the help precisely where the user's looking. Lots of people have done this, and I've done it too. jquery.labelify.js is a jQuery plugin to add labels to your input fields. How to use the plugin What if I don't want to use the title attribute as the text source? The plugin is customisable. The value "label" for text will fetch the input's "tooltip" from that input's associated label: Note that this does not remove the text from the label itself; if you want that to happen then you can hide it in CSS. If "label" isn't what you want either, then you can pass a function as text. How can I make the label look different? You'll note that in the examples on this page, user-entered text in the boxes is black but the label that's added is a light grey. Why might I not want to use it?
Key Principles of Maintainable JavaScript JavaScript is a curious language. It's easy to write, but difficult to master. By the end of this article, hopefully, you'll transform your spaghetti code into a five-course meal, full of readable, maintainable yumminess! Why is it So Tough? The thing to remember, above all else when writing JS code, is that it's a dynamic language. The "hardness" of JavaScript is clearly evident when considering the following image: The teeny tiny book on the left is Douglas Crockford's MUST READ book, JavaScript: The Good Parts. While both of these books are excellent reads, The Good Parts illustrates that, although JavaScript has a LOT of stuff in it, the good parts can be summed up in a considerably shorter read. This, naturally, led to a lot of sleepless nights for web developers. You can read an article on the history of JavaScript here, but the gist of it is that Brandon Eich, in 1995, was hired by Netscape to design a language. It's time to fix that! Making it Better Namespaces Observer Pattern
jQuery Easing Plugin Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom
15 Great jQuery Plugins For Better Table Manipulation Table is the most difficult object to be styled, due to its browser compatibility and markup. Most of the designers and developers will use div to replace table because it is much more easier to style div than table. But, we still need table in our daily applications, one of the best example is comparison table. This article will share 15 useful jQuery table plugins for you to display, sort, filter and manipulate your data in table. 1. DataTables DataTables is very powerful jQuery plugin which offer a lot of features. 2. uiTableFilter uiTableFilter is a jQuery plugin for filtering table rows. 3. Scrollable HTML Table plugin for jQuery able to convert a table into scrollable. 4. Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. 5. Flexigrid is a lightweight Web 2.0 Javascript Grid for jQuery. 6. HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element.
Understanding Design Patterns in JavaScript Today, we're going to put on our computer science hats as we learn about some common design patterns. Design patterns offer developers ways to solve technical problems in a reusable and elegant way. Interested in becoming a better JavaScript developer? Then read on. Republished Tutorial Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. Solid design patterns are the basic building block for maintainable software applications. A design pattern is a reusable software solution Simply put, a design pattern is a reusable software solution to a specific type of problem that occurs frequently when developing software. patterns are proven solutions to software development problems patterns are scalable as they usually are structured and have rules that you should follow patterns are reusable for similar problems We'll get into some examples of design patterns further in to the tutorial. Take a look at the three examples above.
Building an Animated Cartoon Robot with jQuery Why? Aside from being a fun exercise, what purpose does something like this have? None that's plainly obvious. View Demo Overview This project was created by layering several empty divs over each other with transparent PNGs as background images. The backgrounds were animated at different speeds using a jQuery plug-in by Alexander Farkas. The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces. The Markup <div id="wrapper"><div id="cloud-01"><div id="cloud-02"><div id="mountains-03"><div id="ground"><div id="full-robot"><div id="branding"><h1>Robot Head. The structure of the divs closely resembles our diagram. The Style The CSS for this project is just as simple as the markup. Absolute positioning is used to pull any header or paragraph text 9999px to the left of the screen. The jQuery JavaScript Disclaimer: The original script to animate the robot was horrid. Note from Chris Share On
40 Tooltips Scripts With AJAX, JavaScript & CSS - Smashing Magazine Advertisement Web users love informative clues. Whatever questions and misunderstandings might occur – delivering precise answers immediately is the primary task a responsive user interface should be able to cope with. To do that, developers have to consider subtle and well-thought tooltips – used correctly, they can greatly improve user experience and help users to get things done. In Web such “responsive” hints can be provided by tooltips. Most of solutions are JavaScript- and AJAX-based, however we’ve also managed to find some lightweight CSS-based solutions. We’d like to thank Jurgen Koller for compiling an extensive list of tooltip scripts we’ve stumbled upon during our search. Let’s take a look at 43 handy tooltips scripts for intuitive and well-designed visual clues. Tooltips: AJAX & JavaScript Solutions Nice Titles Revised An improved Nice Titles Tooltip Script with Accesskeys support. CSS-Based Solutions Further Solutions Tooltips: WordPress-Plugins Selected Scripts: Quick Overview
JS: The Right Way Making a 3D Engine in jQuery In the previous post “3D tag cloud” I received quite a few requests for different shapes besides the ring. The problem is how the tag cloud was created it doesn’t lend itself to different shapes very well. So this post will show how to create a 3D engine in jQuery / JavaScript for those more exciting shapes. What We’re Building We’re going to create a 3D engine that will allow us to create shapes simply by creating an array of points. Display Object The Display Object is more or less a way to give each object a set of properties and methods. Here is the JavaScript Class: If this seems a little foreign to you, you might want to check out the post Object Oriented Programming with JavaScript. Make 3d/2d Points These functions basically create objects, one meant for 3d (x,y,z) and one meant for 2d(x,y,depth). Initialization The init function assigns a variable to the container passed in. Camera I’m guessing from the name you can probably figure out what this class does. Here is the Camera Class:
clueTip Plugin Demo clueTip Plugin Demo Below are quite a few examples of how you can add a clueTip to your page, using a wide range of options. Keep in mind that there is nothing magical about the HTML markup. You can use any jQuery selector you want to attach your clueTips. For example, if you want to attach clueTips to all links with a class of "peanuts," you would simply write in your jQuery code: $('a.peanuts').cluetip();. Default Style jTip Theme Rounded Corners Theme this is the local content to load when the 'local' parameter is set to true.
Overview Background In Square’s new engineer onboarding program, which we call NEO, we offer short courses and lectures on a variety of tools that we use at Square. We started to collect notes from our course on D3.js and found the notes were well-suited for a tutorial — and worth sharing. Introduction The tutorial provides a quick intro to D3.js, a Javascript library for creating data visualizations in the browser. D3 makes web-based visualizations easier by “automating the hard bits you already understand,” as opposed to “hiding the hard bits” (hat tip @andy_matuschak). Again, the tutorial is not a deep dive — we want you to learn how to learn D3 and gain a high-level understanding of this useful tool. Let’s get started! jquery parallax Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
DotNetNuke Tips for Skinning, CSS, and Design - The Announcements Module and jQuery as an Accordion