-
Jan 12, 2010
How to use keyboard navigation to control a carousel and/or slider.
Filed under: Carousel, DOM Manipulation, Slideshow
-
Dec 01, 2009
In this tutorial we are going to create a pure jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.
Filed under: Ajax, Animation and Effects, DOM Manipulation
-
Nov 27, 2009
Making an Interactive Picture with jQuery
In this tutorial I will be showing you how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. This can be useful for showing off a particular aspect of a photo (ie items or people).
Filed under: Animation and Effects, DOM Manipulation, Media, Tooltip
-
Nov 17, 2009
Retweetradar has nice little effect in the footer – links in top lists fade, emphasizing the most popular links with strongest color intensity. This tutorial will explain how to fade a color in array of elements using jQuery.
This tute uses two way to fade the content, the first being opacity and the second, using RGB values.
Filed under: Aesthetics, DOM Manipulation
-
Nov 11, 2009
Smart Columns with CSS & jQuery
A very smart solution to create a evenly spaced columns using CSS and jQuery by Soh Tanaka
Check it, you won’t regret it.
Filed under: Aesthetics, DOM Manipulation, UI
-
Nov 02, 2009
Perfect sign in dropdown box likes Twitter
Twitter’s running a new homepage with clean and easy design. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery. It’s really easy, it’ll help you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. This entry will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tooltips.
Filed under: Animation and Effects, DOM Manipulation, Forms, Navigation
-
Oct 29, 2009
Disappearing "Scroll to top" link with jQuery and CSS
Seen in many forms, such as “Back to top”, “Top of page” or “Scroll to top”, these links provide a way for users to jump to the top of the page, back to navigation and other handy stuff.
This tutorial will help you build a scroll to top link, or whatever you call it, that appears when the user scrolls down, and disappears when users reach the top of the page using a combination of CSS and jQuery
Filed under: Animation and Effects, DOM Manipulation, Navigation, Utilities
-
Oct 20, 2009
Easy Display Switch with CSS and jQuery
Today’s web users expect web pages to be increasingly more interactive. To this end, the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.
Filed under: Aesthetics, DOM Manipulation
-
Sep 17, 2009
Portfolio Layout Idea Using jQuery
Build a portfolio with a similar effect to Thunderfuel’s website
Filed under: Animation and Effects, DOM Manipulation, Navigation, Slider, UI
-
Resizing Images Based On Browser Window Size
In fluid layouts it is easy to format the text to adjust nicely when the window is resized, but the images are not as fluid-friendly. This Quick Tip shows you how to swap between two image sizes based on the current size of the browser, div, or whatever you decide to make the deciding factor. For those looking for a real life example, Last.fm “uses this technique”:http://www.last.fm/music/Jack+Peñate on their artist pages.
Filed under: DOM Manipulation, Utilities
-
Sep 14, 2009
Create an amazing music player using mouse gestures & hotkeys in jQuery
We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.
Filed under: Animation and Effects, DOM Manipulation, Media
-
Sep 12, 2009
Thumbnail with Zooming Image and Fading Caption
In this great tute from Queness you will learn how to make ordinary thumbnail to something more.
Filed under: Animation and Effects, DOM Manipulation, Navigation
-
Sep 10, 2009
Create a Digg-style post sharing tool with jQuery
We are going to make a digg-style post sharing toolbox. It’s all pretty straight forward and need a little bit of planning. The way it works is different with digg’s. If you view the html source code of Digg’s, it has the sharebox html code in every single post. But, in this tutorial we have only one sharebox, and all the links are sharing the same template.
Filed under: DOM Manipulation, Tooltip, Widgets
-
Sep 03, 2009
Vertical Scroll Menu with jQuery
A great tute from Kevin at Queness to create an awesome, Flash-like, vertical srcolling menu using jQuery.
You have to check this out because the effect is brilliant!
Filed under: Animation and Effects, DOM Manipulation, Navigation
-
Aug 28, 2009
Making a Content Slider with jQuery UI
In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.
Filed under: DOM Manipulation, UI
-
Aug 27, 2009
Creating a Virtual jQuery Keyboard
Very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.
Filed under: DOM Manipulation, UI, Utilities
-
Aug 09, 2009
Definition List Block Clickable
A while ago I read a tutorial over at Web Designer Wall about making an entire <li> block clickable. On my personal website, I have a definition list with some links to other pages on the site. I wanted these definition lists to be block clickable and set about creating the same effect for them.
Suppose you have a <dl> with an id=“defList” and you want to make the nested <dt> followed by a <dd> entirely clickable (as if they’re one element). You can assign a click function to <dd> and the <dt> together and when they’re is clicked, the function will find the <a> element that resides in the <dt> and redirect the browser location to its href attribute value.
There is a specific format for this to work; you need to have the main link in the <dt> and the rest of your content in the <dd>.
Here’s the HTML:
<dl id=“defList”> <dt><a href=“http://martineau.tv/portfolio/” title=“Zander’s Portfolio”>Zander’s Portfolio</a></dt> <dd>Design and development for the iPhone and other smartphones to video based websites.</dd> <dt><a href=“http://jquerystyle.com” title=“jQuery Style”>jQuery Style</a></dt> <dd>jQuery Style is a personal project aimed at web designers and developers. It is a showcase of websites that use jQuery in interesting ways.</dd> <dt><a href=“http://txpcoder.com” title=”<txp:coder/>”><txp:coder/></a></dt> <dd><txp:coder/> converts your designs or existing website into a fully functioning, content managed, Textpattern site.</dd> </dl>Here’s the jQuery code:
$(”#defList dd”).click(function(){ window.location=$(this).prev().find(“a”).attr(“href”); return false; });Add the hover effect:
To add a hover effect so that when you hover over either the <dt> or the following <dd>, add this:
/* Add .hover class to the next <dd> when dt is hovered over */ $(’#defList dt’).hover(function() { $(this).next().addClass(‘hover’).css({‘cursor’ : ‘pointer’}); }, function() { $(this).next().removeClass(‘hover’); }); /* Add .hover class to previous <dt> when dd is hovered over */ $(’#defList dd’).hover(function() { $(this).prev().addClass(‘hover’).css({‘cursor’ : ‘pointer’}); }, function() { $(this).prev().removeClass(‘hover’); });You may also have noticed that there is also some added css that’s applied to the hover effect, this is to change the cursor to a pointer to appear as if its a actual link.
This is only a little tute and created out of necessity for myself, if anyone thinks it’s useful, likes it or thinks there may be a more efficient way to do this, then please leave a comment.
Filed under: DOM Manipulation
-
Aug 04, 2009
jQuery Sliding Boxes with custom captions
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
Filed under: Animation and Effects, DOM Manipulation, Media, Navigation, Transitions, UI
-
Jul 08, 2009
jQuery Fold Effect Concept And Explanation
Making a fold effect in jQuery. Such effect can be apply to different context such as image gallery or even just add on effect for your design work.
Filed under: DOM Manipulation, Slideshow
-
Jul 03, 2009
Animate Image Filling Up Using jQuery
Filed under: DOM Manipulation, Media
DOM Manipulation:
You should follow us on Twitter
You should subscribe to the feed
Categories
- Accordian (2)
- Aesthetics (6)
- Ajax (16)
- Animation and Effects (17)
- Background (2)
- Browser Tweaks (1)
- Carousel (4)
- Data (4)
- DOM Manipulation (49)
- Drag 'n' Drop (1)
- Forms (3)
- jQuery Extensions (1)
- Lightbox/Modal (7)
- Media (9)
- Preload (3)
- Shopping Cart ()
- Tabs (4)
- Text Replacement (1)
- Tips (6)
- Tooltip (6)
- Transitions (9)
- UI (8)
- Utilities (5)
- Validation (2)
Use these products, we do
Mac OS X Version 10.5.6 Snow Leopard
Windows 7 Ultimate
Moleskine Large Squared Notebook
Learning JQuery 1.3 
JQuery UI 1.6: The User Interface Library for JQuery 
JQuery Reference Guide 
jQuery in Action 
Pro JavaScript Techniques 
JavaScript: The Definitive Guide 
DOM Scripting: Web Design with JavaScript and the Document Object Model 
Bulletproof Ajax 
Bulletproof Web Design 
CSS Artistry: A Web Design Master Class 
Designing with Web Standards 
CSS Mastery: Advanced Web Standards Solutions 
HTML & XHTML: The Definitive Guide 
Follow jQuery Style on Twitter