14 Helpful jQuery Tricks, Notes, and Best Practices. If there is one bad thing about jQuery, it's that the entry level is so amazingly low, that it tends to attract those who haven't an ounce of JavaScript knowledge. Now, on one hand, this is fantastic. However, on the flip side, it also results in a smattering of, quite frankly, disgustingly bad code (some of which I wrote myself!).
But that's okay; frighteningly poor code that would even make your grandmother gasp is a rite of passage. The key is to climb over the hill, and that's what we'll discuss in today's tutorial. 1. It's important to remember that most methods will return the jQuery object. Knowing that the jQuery object is always returned, we can use this to remove superfluous code at times.
The reason why we "cache" the location of the someDiv element is to limit the number of times that we have to traverse the DOM for this element to once. The code above is perfectly fine; however, you could just as easily combine the two lines into one, while achieving the same outcome. 2. Proof. Enterprise jQuery. Simple JQuery Image Slide Show with Semi-Transparent Caption.
Introduction Update 17 Dec 2009: I have created a new version of this image slide show. It's more efficient, clean and simple. Please visit: jQuery Photo Slide Show with Slick Caption Tutorial Revisited I will no longer provide support for this old tutorial Image Slide Show is one of the famous components in web design and development. Before we start, check out this industry-leading, unrivaled email security and anti-spam appliance hardware - Anti spam for Exchange.
So, here we go again, I separated my codes into 3 sections: html, css and javascript and I will explain how it works in each section. Advertisement My ultimate objective is - to keep the html as simple as possible. Have a look at the html code: <div id="gallery"><a href="#" class="show"><img src="images/flowing-rock.jpg" alt="Flowing Rock" alt="" title="" width="580" height="360" rel="<h3>Flowing Rock</h3>You can put html element inside the REL attribute. " 3. Finally, the Javascript code. Conclusion Update. Use jQuery to "turn off the lights" while watching videos. Some videos on YouTube have a cool feature called “Turn the lights down”. Basically, when you turn lights down, the entire page darkens and let you watch video as if you are in the cinema. This tutorial will show you how to implement this simple effect.
View live demo The problem Our example is simple – it consists of header, the video, “turn off the lights” link and sidebar with some information about the video. At the code below you can se the “command” div that contains lightSwitcher link, “movie” div that contains the video and “description” div that acts as a sidebar: CSS for this is simple: Let there be… dark When link “Turn off the lights” is clicked, we need to darken the entire page. Let’s add a div to the end of our markup: Now let’s style it: Important thing here is z-index. Let’s involve jQuery $(document).ready(function(){ $("#shadow").css("height", $(document).height()).hide(); }); Aaaaand…. This code set the height of shadow div to the same value as document height and hides it. How to build a scrolling list with jQuery : Five Minute Argument.
Sunday 7th February his tutorial explains, step-by-step, how to use CSS and jQuery animations to build a simple ‘auto-scrolling’ vertical list. Let’s be clear, here: the widget I’m about to put together isn’t exactly a stunning new advance in user interface design. But it does produce a nice final result, and you’ll probably learn a little about CSS and jQuery animations along the way. Requirements To make things more interesting, we’ll give ourselves some pretty strict requirements about behaviour and display.
Each time a new item needs to be displayed, it should scroll into view from the top. These requirements should make for an interesting enough challenge, whilst offering a reasonable use case from which to study CSS and jQuery. Setup First, let’s get to the markup, which should be as straightforward as possible: <ul id="scroller"><li>Item one</li><li>Item two</li></ul> And here’s how the basic list is displayed: Item one Item two Adding the new item A new item Item one Item two. Improve your jQuery - 25 excellent tips. 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects.
Feb 18 2010 By Angel Wardriver jQuery can empower a developer with the tools required to create a rich user experience. The way in which we display images, text, charts and graphs can enhance functionality for the wide range of users. Let’s take a look at 35 powerful and effective jQuery plugins and techniques for slideshows, graphs and text effects. Also consider our previous articles: 50 Useful JavaScript Tools which lists excellent tools to help you achieve various tasks involved in authoring JavaScript code.Data Visualization and Infographics Resources which lists more than 25 useful resources for infographics and data visualization.The Mystery Of CSS Sprites: Techniques, Tools And Tutorials which explains CSS sprites technique with jQuery. jQuery Galleries and Slideshows GalleryView jQuery PluginGalleryView jQuery Plugin is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. Charts and Graphs with jQuery jQuery Text Effect Plugins.
20 Helpful jQuery Methods you Should be Using. So you've been playing with jQuery for a while now, you're starting to get the hang of it, and you're really liking it! Are you ready to take your jQuery knowledge to level two? Today, I'll demonstrate twenty functions and features you probably haven't seen before! 1 after() / before() Sometimes you want to insert something into the DOM, but you don't have any good hooks to do it with; append() or prepend() aren't going to cut it and you don't want to add an extra element or id. These two functions might be what you need. They allow you to insert elements into the DOM just before or after another element, so the new element is a sibling of the older one. You can also do this if you're working primarily with the element you want to insert; just use the insertAfter() or insertBefore functions. 2 change() The change() method is an event handler, just like click() or hover(). 3 Context Context is both a parameter and a property in jQuery.
So where would this be useful? 4 data() / removeData() Useful jQuery Plugin for UI Developers. jQuery is a popular JavaScript Framewoks has produced many very useful plugin for UI developers in developing the project website. With a variety of plugins can be made more attractive appearance, more intraktif, lighter for the visitors This article will share information to the UI Developers, about jQuery plugin that can help you achieve great display for your future projects. Grid Accordion Grid accordion is an advanced accordion navigation that is built with jQuery .
There was enough columns that each individual column and Some of these cells contained several paragraphs of text . Only one cell is open at a time and handy for displaying detailed information about the items inside a grid. jCoverflip jCoverflip is a jQuery plugin to be able to display images with an attractive interface. Like It? “Like it? jConfirmAction jConfirmAction is a jQuery plugin that aims to help you to create a confirmation box bubbles flying upside your link.
Micro Image Gallery jQuery plugin jsPlumb Spritely.