One user asked the other day on the jQuery Tabs tutorial how to highlight the particular tab we selected. In this tutorial we will see some way to select different elements using jQuery, from a basic multiple selection, a multiple selection revealing content and a excluding selection revealing content. See the three examples and read on.
Let’s begin the week with this round up of wood type, DIY type, jQuery based type, concrete type, a collection of css frameworks, a review of Google Chrome’s extension support and some extensions that are already very interesting, and a IS.GD bookmarklet to easily shorten those longs urls.
In this tutorial we will be learning how to create a collapsible panel or sidebar and an expandable content area. jQuery will be assisting us to create this smooth and sleek behaviour. Once our panel is hidden, we will display a small button to reveal it again.
First, you might want to see the Collapsible Panel demo. Then proceed to the tutorial. Read more
The other day I needed to create a block (or widget) with tabs, so I started checking different jQuery based tab solutions but they were all very large for what I needed. Most of the jQuery based tabs I found had a lot of functionalities to fulfill everything you need, but they end up being quite large, bloated and complex. I wrote this small jQuery dependant code to create my own tabs widget and thought you could find it useful. Read more
It’s been more than a week since my last post. Last March 17 was my birthday, I received some presents so I want to give you a present now, a new WordPress plugin. You can use this plugin to beautify your post by creating thumbnails using the jQuery.Thumbs plugin and adding Thickbox.
A while ago I wrote a post about creating a folding menu for WordPress built in Pages widget using only jQuery without adding or modifying any markup or PHP. A reader, Kretschmar, reported some bugs and asked if it could work for more than one level.
After modifying the jQuery for it to work on multi level depth I created a simple plugin for WordPress. See the demo of ILC Folding, go and click on Page 2.
Here’s the jQuery code:
jQuery(document).ready(function(){
jQuery(".page_item ul").hide();
jQuery(".current_page_item ul:first").slideDown();
jQuery(".current_page_item").parents("ul, li")
.map(function () {
jQuery(this).slideDown();
});
});
So, after sliding down the first parent and getting all parents of current_page_item, we slide down each parent level by level until the list is empty.
I packed everything and created a WordPress plugin so you can download the folding plugin for WordPress and start collapsing those Pages.
Let’s talk about a simple technique to create folding or collapsible menus for the WordPress Pages widget. A while ago I was doing some coding for a IT Solutions site and they had a large ‘Services’ page with an introduction and 6 sections. They needed a parent page for the intro and 6 child pages and they didn’t wanted to show all the pages and subpages at once. I thought this would be an excellent job for jQuery and a collapsible or folding menu.
We’ll be creating here a folding menu using only jQuery, no CSS no special markup, and enqueueing the script with the recommended technique for WordPress. Keep reading to see the solution…
Read more
This new plugin was created not only from a necesity but as a medium of learning as well. I wanted to play video using ThickBox, and just the other day someone asked on the WordPress support forums about playing FLV using Lightbox. I already had something done so it was a fine oportunity to finish it. So here it is.
Read more
Time for another jQuery round! Following the previous sliding menu with jQuery and rollovers and tooltips with jQuery, this time I want to respond to a commenter, who asked for icon rollover through fading instead of the common “swap!”. We can achieve this icon fading with jQuery and in this article we will learn to do so. I will also explain how to set up your page to work with jQuery, given that I’ve received some messages asking how to enable jQuery for a page.
Now, as usual, here’s the finished example of icon fading using jQuery, but you can also take a look at my RSS button at the top. Roll your mouse over it and you will see it change.
Let’s begin now by jQuerifying our page!
Time for round #2! This time we’ll be building a sleek menu using jquery and some styles. What’s beautiful about jquery is how you can change a few bits and you get an entirely new effect. Last time we built some rollovers and tooltips using jquery and this time we’ll be building our slide menu on top of the same code. This tutorial assumes that you have a basic knowledge of jquery. Before we start, you might want to go ahead and try our example of sliding menus using jquery.
