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. 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. 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()