This simple jQuery navigation example makes use of two of my favorite functions that play oh-so-nice together, index() and each(). With these, there is no need to specify anything. Simply add buttons and corresponding content in the HTML and the iterators match content by comparing indexes. Let me explain...
Step 1: Create HTML Page
The first step is creating the structure of your content. Order is everything in this example. Below I have recreated a common navigational metaphor: button represents content to be displayed.
1 <html>
2 <head>
3 <title>Simple jQuery Navigation</title>
4 </head>
5 <body>
6 <div id="container">
7 <div id="button-group">
8 <div class="button selected">
9 <div class="button-num selected">1</div>
10 </div>
11 <div class="button">
12 <div class="button-num">2</div>
13 </div>
14 <div class="button">
15 <div class="button-num">3</div>
16 </div>
17 <div class="button">
18 <div class="button-num">4</div>
19 </div>
20 <div class="button last">
21 <div class="button-num">5</div>
22 </div>
23 </div>
24 <div id="content">
25 <div class="page"><div class="page-num">1</div><p>Lorem ipsum dolor ...</p></div>
26 <div class="page"><div class="page-num">2</div><p>Sed interdum pharetra ... </p></div>
27 <div class="page"><div class="page-num">3</div><p>Cras dui elit...</p></div>
28 <div class="page"><div class="page-num">4</div><p>Duis nec dui augue...</p></div>
29 <div class="page"><div class="page-num">5</div><p>Cras rhoncus...</p></div>
30 </div>
31 </div>
32 </div>
33 </body>
34 </html>
But what is the point of a button if all the content is shown anyway?
Step 2: Add jQuery
Now we can add code to show and hide the appropriate content, while giving addition visual cues to enhance usability. First, the jQuery library must be included in some manner.
1 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Create a document ready function so to execute our functions on page load.
1 <script type="text/javascript">
2 $(document).ready(function(){
3
4 });
5 </script>
Start by hiding all the 'page' divs, and then slideDown() the 1st child.
1 $(document).ready(function(){
2
3 $("div.page").hide();
4 $("div.page").eq(0).slideDown();
5
6 });
Now add a click() event to all the "button" divs. This will control the rest of the behavior in this concept.
1 $("div.button").click(function() {
2
3 $('div.button').each(function() {
4 $(this).removeClass("selected").children().removeClass("selected");
5
6 });
7 $('div.page').each(function() {
8 $(this).hide();
9
10 });
11 });
— Katie O'Connor
xhtml/css, jquery
A quick update on this lovely application I’ve been procuring. I will write more about this a little later!
— Katie O'Connor
the heights, jquery
I am currently developing a jQuery controlled fieldset that alters the height and width of a graphical CSS frame. Labels identify a set of dimensions that correspond with a radio button. When the gray button is clicked the selected radio button's height/width is fed into the CSS. The height and width of the frame can be altered by changing only one CSS element ".frame-container". Wire frames coming soon.
Originally I wanted the height and width to pull from a user submitted text field. Alas, I could not find any resources about using variables to change CSS in jQuery. Should look into ajax, I think. I hope I don't need server stuff.
In the future I want to insert user uploaded images into the frames! Fun. I hope I can design a few more ornate frames. This is a fun project. Eventually I will build out the completed "The Heights" homepage. Maybe I will actually supply some interesting literary articles! So much progress...
— Katie O'Connor
the heights, jquery
After many revisions and lots of debugging, the final touches on the Pinwheel design and development processes have been rounded off.
expanding boxes
My favorite feature of the Pinwheel site is the jQuery interactive expanding box menu. The selected box expands when the 'Read More' link is clicked, and the other boxes are neatly collapsed. Using jQuery to traverse the DOM tree, the app uses only one function to achieve this effect. Below is an image of the expanding boxes in its default state.
Here it is after 'Read more...' is click on the left box.
Necessary Libraries and Plugins
- jQuery
- jQuery UI - I wanted to use jQuery UI's 'switchClass' function because it combines jQuery's 'addClass' and 'animate' into one function. It is easier to manage and prevents visual rendering errors.
- jQuery Timers - I am using the timer plugin to help prevent multiple clicking errors. If you are feeling mischievous it is still possible to break this example by clicking the anchor rapidly.
Other Plugins
- Superfish jQuery Menu - not required for expanding boxes but the drop-down menu at the top of the page. Very useful plugin.
- hoverIntent - this is included with the Superfish package, but I thought I would point in out. Prevents mouse hovering errors.
Download Source Files
html
In fig. 1 below I have illustrated the underlying structure of the expanding boxes' default state. Within box-row are 3 instances of box-container, each exactly the same except for the content paragraphs inside.
default div structure
html of box-container
Within each box-container there are 3 divs floating left of each other. The first div left-left has the left rounded corner of the box as a background image. The middle div mid-mid holds the content paragraphs. The rightmost div left-right has the right rounded corner of the box as a background image.
<div class="box-container">
<div class="left-left"> </div>
<div class="mid-mid">
<p class="left-para">
<img src="graphics/educational.jpg" height="49" width="225" alt="*Educational">
<img src="images/student1.jpg" class="box-img">Suspendisse vestibulum, mi ut aliquam sollicitudin, nunc
sem euismod sem, ut posuere quam erat eget magna. Fusce
sed in sapien.
<a href="" class="anchor1">Read more...</a>
<span class="timeMessage"></span></p>
<p class="right-para">Suspendisse vestibulum, mi ut aliquam sollicitudin, nunc sem euismod sem, ut posuere quam erat eget magna. Fusce
sed in sapien.</p>
</div>
<div class="left-right"></div>
</div>
Inside Mid-mid
Mid-mid contains two paragraphs that are floated left of each other, called left-para and right-para, respectively. By default box-container and mid-mid have fixed height/width and overflow:hidden. Because box-container and mid-mid by default have smaller widths than left-para and right-para together, right-para is hidden beyond the bounds of box-container and mid-mid.
The anchor at the bottom of left-para has class anchor1, and on click initiates the jQuery function that changes the width of box-container and mid-mid. When classes box-container and mid-mid are switched with classes with greater or small widths, it appears that they are expanding/collapsing.
css
.box-row{
margin: auto;
width: 955px;
height: 323px;
overflow: hidden;
}
.box-container,.box-container2,.box-container3{
float: left;
background-image: url('../graphics/box1-fade-v.jpg');
background-repeat: repeat-x;
overflow: hidden;
height: 100%;
}
/*default */
.box-container { width: 282px; }
.mid-mid { width: 266px; }
/* collapsed */
.box-container2 { width: 141px; }
.mid-mid2 { width: 125px; }
/* expanded */
.box-container3 { width: 554px; }
.mid-mid3 { width: 538px; }
.mid-mid P.left-para,.mid-mid2 P.left-para,.mid-mid3 P.left-para{
padding: 25px 0 0 15px;
position: relative;
width: 239px;
margin: 0px 0px 15px 0;
top: -15px;
}
.mid-mid P.right-para,.mid-mid2 P.right-para,.mid-mid3 P.right-para{
padding: 10px 0px 0 35px;
width: 232px;
margin: 0px;
float: left;
}
The jQuery "switches" classes mid-mid and box-container to either mid-mid2 and box-container2 (collapsed) or mid-mid3 and box-container3 (expanded). Fig. 1 illustrated the box-containers in the default state. Fig. 2 below illustrates them in the expanded state.
expanded div structure
jQuery
To bring this all together, we will take a look at the jQuery code section by section. We will start with a basic document.ready function that prevents the page from reloading when the anchor with class anchor1 is clicked.
$(document).ready(function() {
function myClick(){
return false;
};
$("a.anchor1").click(myClick);
})
To prevent the user from clicking anchor1 a second time before the animation is complete, we add some code to manipulate the text.
$(document).ready(function() {
function myClick(){
$(this).hide();
$(this).next().text('One moment please...');
$(this).next().show();
return false;
};
$("a.anchor1").click(myClick);
})
In the box-container HTML you may have noticed an empty span right next to anchor1 with the class timeMessage. In the code above, the text within anchor1 is hidden, and timeMessage is filled with text 'One moment please...' and revealed.
We want anchor1 to come back after a moment so the user can collapse the box again when they are finished reading the content. This is where the jQuery Timers comes to use.
$(document).ready(function() {
function myClick(){
$(this).hide();
$(this).next().text('One moment please...');
$(this).next().show();
$(this).oneTime(1250, function() {
$(this).show('slow');
$(this).next().hide();
})
return false;
};
$("a.anchor1").click(myClick);
})
The function oneTime comes with jQuery Timers. It simply executes the code inside the brackets one time after the amount of time specified. I have specified 1250, which is 1.25 seconds. The function causes anchor1 to slowly reappear and timeMessage to disappear again.
To summarize what the code does so far, it hides anchor1 to prevent the user from over clicking before the animations are complete. It adds a message "One moment please..." to span timeMessage. After 1.25 seconds anchor1 fades back in as timeMessage is hidden.
So how do the boxes grow and shrink? It is all about traversing the DOM tree! Take a look:
$(document).ready(function() {
function myClick(){
$(this).hide();
$(this).next().text('One moment please...');
$(this).next().show();
if ($(this).parent().parent().is('.mid-mid')) {
$(this).html('Close');
}
else{
$(this).html("Read more...");
}
$(this).oneTime(1250, function() {
$(this).show('slow');
$(this).next().hide();
})
return false;
};
$("a.anchor1").click(myClick);
})
The user is clicking the same anchor to expand and collapse the boxes. We will need a way to tell if the box is expanded or collapsed to know how to handle a click. The if...else statement is used to check if the parent of the parent div is called 'mid-mid'.
$(document).ready(function() {
function myClick(){
$(this).hide();
$(this).next().text('One moment please...');
$(this).next().show();
if ($(this).parent().parent().is('.mid-mid')) {
$(this).parent().parent().parent().siblings().children().children().fadeOut('slow');
$(this).html('Close');
}
else {
$(this).parent().parent().parent().siblings().children().children().fadeIn('slow');
$(this).html("Read more...");
}
$(this).oneTime(1250, function() {
$(this).show('slow');
$(this).next().hide();
})
return false;
};
$("a.anchor1").click(myClick);
})
In the code above, if the parent of the parent is mid-mid, it will then traverse back through the DOM tree to fade out mid-mid. The next time the user clicks the link, it will no long have mid-mid as a parent of a parent, so it will do the else section of the statement.
This functionality is necessary for 2 purposes. First, one anchor and one function do all the work. Second, the content in mid-mid needs to be hidden or else in the collapsed state images and text would overflow unpredictably!
Below I am adding the final 8 lines of code. It may seem like a lot, but each line does virtually the same thing. Each line use jQuery UI switchClass function, which "Switches from the class defined in the first argument to the class defined as second argument, using an optional transition".
$(document).ready(function() {
function myClick(){
$(this).hide();
$(this).next().text('One moment please...');
$(this).next().show();
if ($(this).parent().parent().is('.mid-mid')){
$(this).parent().parent().parent().siblings().children().children().fadeOut('slow');
$(this).parent().parent().parent().switchClass('box-container','box-container3',650,'easeOutSine',function(){});
$(this).parent().parent().switchClass('mid-mid','mid-mid3',650,'easeOutSine',function(){});
$(this).parent().parent().parent().siblings('.box-container').switchClass('box-container','box-container2',650,'easeOutSine',function(){});
$(this).parent().parent().parent().siblings().children('.mid-mid').switchClass('mid-mid','mid-mid2',650,'easeOutSine',function(){});
$(this).html('Close');
}
else {
$(this).parent().parent().parent().siblings('.box-container2').switchClass('box-container2','box-container',650,'easeOutSine',function(){});
$(this).parent().parent().parent().siblings().children('.mid-mid2').switchClass('mid-mid2','mid-mid',650,'easeOutSine',function(){});
$(this).parent().parent().parent().switchClass('box-container3','box-container',650,'easeOutSine',function(){});
$(this).parent().parent().switchClass('mid-mid3','mid-mid',650,'easeOutSine',function(){});
$(this).parent().parent().parent().siblings().children().children().fadeIn('slow');
$(this).html("Read more...");
}
$(this).oneTime(1250, function() {
$(this).show('slow');
$(this).next().hide();
})
return false;
};
$("a.anchor1").click(myClick);
})
If mid-mid is present, the default class of the selected mid-mid and box-container will switch to expanded class. The specified tween is 'easeOutSine' and with the speed '650'. At the same time, the sibling box-container and their mid-mid classes will switch from default to collapsed. Else mid-mid is not present, the code assumes that all the boxes need to be returned to their default classes.
— Katie O'Connor
pinwheel, jquery
Dec 15, 01:23 PM
Wow. That's a mouth. I found part of my solution on Heather Solomon's amazing Sharepoint Blog, mainly the article about Rounded Corners in the Web Part Title Bar. Her solution works great, and I'm glad she used her talent to traverse the ghastly mess of nested tables. Unfortunately, does not work in IE6, and she did not, nor anyone else, provide a solution to the issue. So I did!
Here are the easy steps for cross-browser rounded corner headers in Sharepoint WSS:
- Download jQuery and link it to your site.
- Add this jQuery code to the head your page:
<script type=“text/javascript”>
$(document).ready(function() {
$(‘tr.ms-WPHeader TD span:first-child’)
.addClass(‘firstChild’);
$(’.ms-WPHeader > TD ‘)
.addClass(‘headerBg’);
})
</script>
- Add this CSS to your stylesheet:
.ms-WPHeader TD span.firstChild{
background: url('cnoleft.gif') no-repeat left top;
padding: 6px 0 3px 25px;
height: 14px;
position: relative;
z-index: 20;
}
.ms-WPHeader td.headerBg{
background: url('cnobg.gif') repeat-x;
margin: 0;
padding: 0;
height: 14px;
}
… and that is all you need to do! Likely you will have to tweak the CSS for your images to look correct, but that should be a breeze.
— Katie O'Connor
jquery, sharepoint
Aug 31, 07:47 PM
My newest ‘client’:
Pro bono job for my good friend, Matt, who has traditional drawing and painting ability oozing out of from his bespectacled skull. His work is so obviously unique and powerful that it needs a home on the web. Since he is the visual genius, I wanted him to design the presentation as much as possible. He drew some boxes on a napkin and created the layout you see above. He also indicated that he loved purple and leopard print. I thought Helvetica was ulitarian and attractive, but I recall him prefering Old English styles. Maybe I should font-replace it up!
Soon I need to meet with the artist again so we can work on structuring the navigation. Throughout his career, Matt has traversed different movements and styles, and need to be organized accordingly. I am very pumped about this project!
— Katie O'Connor
geer, web design
Jun 27, 02:03 PM
This simple jQuery navigation example makes use of two of my favorite functions that play oh-so-nice together, index() and each(). With these, there is no need to specify anything. Simply add buttons and corresponding content in the HTML and the iterators match content by comparing indexes. Let me explain...
Step 1: Create HTML Page
The first step is creating the structure of your content. Order is everything in this example. Below I have recreated a common navigational metaphor: button represents content to be displayed.
1 <html>
2 <head>
3 <title>Simple jQuery Navigation</title>
4 </head>
5 <body>
6 <div id="container">
7 <div id="button-group">
8 <div class="button selected">
9 <div class="button-num selected">1</div>
10 </div>
11 <div class="button">
12 <div class="button-num">2</div>
13 </div>
14 <div class="button">
15 <div class="button-num">3</div>
16 </div>
17 <div class="button">
18 <div class="button-num">4</div>
19 </div>
20 <div class="button last">
21 <div class="button-num">5</div>
22 </div>
23 </div>
24 <div id="content">
25 <div class="page"><div class="page-num">1</div><p>Lorem ipsum dolor ...</p></div>
26 <div class="page"><div class="page-num">2</div><p>Sed interdum pharetra ... </p></div>
27 <div class="page"><div class="page-num">3</div><p>Cras dui elit...</p></div>
28 <div class="page"><div class="page-num">4</div><p>Duis nec dui augue...</p></div>
29 <div class="page"><div class="page-num">5</div><p>Cras rhoncus...</p></div>
30 </div>
31 </div>
32 </div>
33 </body>
34 </html>
But what is the point of a button if all the content is shown anyway?
Step 2: Add jQuery
Now we can add code to show and hide the appropriate content, while giving addition visual cues to enhance usability. First, the jQuery library must be included in some manner.
1 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Create a document ready function so to execute our functions on page load.
1 <script type="text/javascript">
2 $(document).ready(function(){
3
4 });
5 </script>
Start by hiding all the 'page' divs, and then slideDown() the 1st child.
1 $(document).ready(function(){
2
3 $("div.page").hide();
4 $("div.page").eq(0).slideDown();
5
6 });
Now add a click() event to all the "button" divs. This will control the rest of the behavior in this concept.
1 $("div.button").click(function() {
2
3 $('div.button').each(function() {
4 $(this).removeClass("selected").children().removeClass("selected");
5
6 });
7 $('div.page').each(function() {
8 $(this).hide();
9
10 });
11 });
— Katie O'Connor
xhtml/css, jquery
Jun 7, 11:11 PM
Sad, but true, I feel that I have graduated from the limitations of Txp. Maybe if I was a more creative developer I could do better with it. Results and inspirations have dwindle. Don't worry articles, I just might port some of you worthy ones over.
I must say with my recent experiences with WordPress I am loving a lot of things, especially templates. I search keywords like 'minimal' and browse, I utilize templates that suit my needs and than modify them accordingly. Fun!
My most recent Wordpress project is
Wardrobe Database. This should be really cool and enjoyable for me. I just need to continue to photograph my clothes.
I am very interested in adding more custom fields to my items and using Php to get data from them, like lists of items by a specific brand. The categories are strictly for defining purpose of article, like top or bottom, than branching into broad physical description, like cropped or jeans. At Ann Taylor I experience first hand the system of organizing stock by IDs and codes, generalities and then specifics. It all makes sense to me. You just wait.
(This design is wicked ugly. What was I thinking?)
— Katie O'Connor
web sites, wordpress
May 8, 01:46 PM
After I pulled my previous template, this blog's visits sunk to a rock bottom. It was simply because I eliminated many of the SEO enhancements from the site. Today I attempted to boost visits by re-establishing those elements.
I re-added the tiered category list to the left, increasing the weight of commonly used keywords and tags. To the right, I added something new - a list of all entries. This will further strengthen my search engine visibility by repeating pertinent keywords and phrases.
Just before I disposed of my previous template, I was averaging about 25 unique viewers a day. Since then it's been about 1 per day.
One thing that contributed greatly to the spike in visitors was my "image replacement technique", which sounds a lot more sophisticated than it really is. I, to this day, cannot get sifr (or lightbox for that matter) to work in Txp. I had a static image that read 'Katie O'Connor:design'. To get the impact of the <h1>, without one, I created one and hid it -9999px to the left. I would call that 'ghetto' mark-up. Not only did it say 'Katie O'Connor:design', it said 'Katie O'Connor Web Designer and Developer. Chicago, Illinois.' The next week or so after I added that, I got outrageous hits.
Another 'ghetto' thing that contributed to my massive amount of traffic was that every page on this site had an extra blog article list (every complete article I've published) appended to the bottom of it. That is dozens more instances of every piece of content I've created. That upped the weight astronomically. It looked stupid, like I didn't know how to program, but the attention was exciting.
Good programming can lead to more opportunities and dignity, leading to something more gratifying than attention or capitalism. I am proud of the cleaness and perfection that I have going on right now. It is the Zen of the web, although boring (and somewhat ugly, no offense Txp).
— Katie O'Connor
web design, textpattern
May 3, 11:19 PM
Heh, looks like I nuked my presentation. Over the months I’ve learned a lot about interface design and layout. I am going to create something new and exciting from my template. I will incorporate the previous design’s fonts, colors, and floral imagery into the new design. In that way, it is a realign. I’m not changing everything, just the HTML. The focus on the structural redesign is to create a more readable, larger, and engaging experience, like this template based project.
I have a sweet template. I lost control of the previous. It was a decent template, looked good, but structurally mystifying.
— Katie O'Connor
xhtml/css, web design
Apr 18, 07:40 PM
My first real client! I am so excited. This project is little more than half complete to date. I left all the complex page layouts for last. I’m so grateful for this flexible and basic project to kick start my freelance career. It is a super awesome learning experience.
To Do:
- Fay
- favicon
- finish the empty pages
- sifr copperplate
- more font formatting on about page
- This Site
- try to fix duplicate article display issues
- open external links in new window
— Katie O'Connor
fay, web design
Apr 6, 09:47 PM
Check out my killer Fruit website!
Who needs 24 boxes when you are working on a site with a small amount of content? KISS? My CSS is very simple, direct, and intuitive. My HTML is nearly flawless, IMO. I am still working it out, but in the end, my goal is to make the selector names intuitive yet not explicit in describing the style.
In the future, I am going to experiment with style.css, which contains only font and color elements, and make a bunch of fun templates. I want to build an interface and connect it with jQuery. If I could figure out the server side stuff (php? mySql?), maybe I could build a CMS. If it works, and I can make it secure, maybe I could sell it. Dreams, dreams of when we had just started things. Dreams, of me and you. It seems, it seems, that I can't fight these memories. I wonder if you have the same dreams, too.
I apologize for those who have been visiting my abandoned AI9 blog in hopes of an update. I still love the show, I am lazy and had my share of Idol gab over the holiday weekend, and didn't feel an entry was merited. I really just started it because of Katelyn. Siobhan did REALLY good tonight, thought.
It takes so long to write those entries, too. I want to be so perfect and concise with it, but it ends up taking a couple hours. I would never make it in the journalism industry.
— Katie O'Connor
web design, xhtml/css
Mar 17, 10:23 PM
I am going to shamelessly hype my new entertainment blog – Katie’s American Idol Blog.
In terms of development, it took me much more time to write the entry than it did to deploy and skin the blog. It shows that I am a speedy blog maker, with Textpattern that is. I am also extremely opinionated when it comes to American Idol, and those opinions need to go somewhere. Check it out!
— Katie O'Connor
web design, xhtml/css
Feb 13, 12:17 PM
A quick update on this lovely application I’ve been procuring. I will write more about this a little later!
— Katie O'Connor
the heights, jquery
Jan 31, 01:11 AM
I am currently developing a jQuery controlled fieldset that alters the height and width of a graphical CSS frame. Labels identify a set of dimensions that correspond with a radio button. When the gray button is clicked the selected radio button's height/width is fed into the CSS. The height and width of the frame can be altered by changing only one CSS element ".frame-container". Wire frames coming soon.
Originally I wanted the height and width to pull from a user submitted text field. Alas, I could not find any resources about using variables to change CSS in jQuery. Should look into ajax, I think. I hope I don't need server stuff.
In the future I want to insert user uploaded images into the frames! Fun. I hope I can design a few more ornate frames. This is a fun project. Eventually I will build out the completed "The Heights" homepage. Maybe I will actually supply some interesting literary articles! So much progress...
— Katie O'Connor
the heights, jquery
