A few weeks ago I wrote about two ways we can achieve the “accordion menu” effect, and I promised to describe a third option. Well, this is it, Option 3. But first, here is a list of my other show-hide-toggle entries, as well as Jörn Zaefferer’s accordion menu plug-in:
Sometimes it’s nice to be able to give users visual feedback when they hover their mouse over an element on the page. It’s easy to do, of course, with a little CSS:
#hover-demo1 p:hover { background: #ff0; }
That little style rule changes the background of any paragraph that is a descendant of an element with id="hover-demo" to a nice bright yellow — but only when you hover your mouse over it. So, if that’s all there is to it, what does this have to do with jQuery?
We’ve received a number of comments recently from people looking for variations on the showing and hiding theme. For the basics, you can take a look at two earlier entries, Basic Show and Hide and Slicker Show and Hide.
For a full-blown plugin solution with lots of options, look no further than Jörn Zaefferer’s Accordion Menu. But if you want to try some showing and hiding on your own, read on.
Here is a quick trick for getting an effect to delay without using setTimeout.
Let’s say, for example, that I want to show an alert message on the page every time a user clicks on a certain button. But I don’t want it to stay there forever; I want it to go away a few seconds later. You know, like the way they do in all of those crazy Web 2.0 sites.
The topic of optimization has come up a number of times in the jQuery mailing list. jQuery’s DOM traversal is powerful and easy, but it can sometimes be slow as well. As with any JavaScript library or framework, the helper methods will be slower than the plain old JavaScript (p.o.j) methods. Nevertheless, if we keep in mind the jQuery’s speed hierarchy, the speed difference between jQuery and p.o.j. will often be negligible.
Read the rest of this entry »
After I wrote a couple entries (Fancy Drop Cap, Part 1 and Part 2) on creating a drop cap for the first paragraph in a DIV, a couple people asked how one would go about making the drop cap apply to every paragraph in a DIV.
I’ve written a Fancy Letter Plugin that does all the hard work for you. You write a line of jQuery like $('div.content p').fancyletter(). The plugin wraps the first letter of the selected elements in a <span> with class names that you can then style to your needs.
Most of the code can remain the way we left it in Fancy Drop Cap – Part 2. We created a swap_letter() function to:
We also gave the image a class name of “fancy-letter” so that we could style it a bit:
© Copyright 2006–2010 Learning jQuery and participating authors. Written content on this site is under a Creative Commons License.
Development by Karl Swedberg. Design by Rex Rainey. Published with WordPress.
