Just need a simple way to swap content out using javascript real quick? This seems to come up a lot in my life. On a recent job interview I was given a task to do this and the following is what I came up with. I’m positive this has been done many times already in different and superior ways, but, I like this simple implementation, and thought I’d share it for others to use and build upon. Enjoy…

The HTML

For the markup, you just need a list for your navigation, and blocks of content for your content. Each content block needs a unique id to link to from your nav and the class of ‘content’:

<div id="navigation">
	<ul>
		<li><a href="#page1">Page 1</a></li>
		<li><a href="#page2">Page 2</a></li>
		<li><a href="#page3">Page 3</a></li>
		<li><a href="#page4">Page 4</a></li>									
	</ul>
</div>
 
<div id="page1" class="content">
	<h2>Page 1 content</h2>
	<!-- page 1 content -->
</div>
 
<div id="page2" class="content">
	<h2>Page 2 content</h2>
	<!-- Page 2 content -->
</div>
 
<div id="page3" class="content">
	<h2>Page 3</h2>
	<!-- Page 3 content -->
</div>
 
<div id="page4" class="content">
	<h2>Page 4</h2>
	<!-- page 4 content -->
</div>

The jQuery javascript

Concept here is hide every content block except the active one. When a nav item is clicked, show the correct content:

$(function(){
 
    function contentSwitcher(settings){
        var settings = {
           contentClass : '.content',
           navigationId : '#navigation'
        };
 
        //Hide all of the content except the first one on the nav
        $(settings.contentClass).not(':first').hide();
        $(settings.navigationId).find('li:first').addClass('active');
 
        //onClick set the active state, 
        //hide the content panels and show the correct one
        $(settings.navigationId).find('a').click(function(e){
            var contentToShow = $(this).attr('href');
            contentToShow = $(contentToShow);
 
            //dissable normal link behaviour
            e.preventDefault();
 
            //set the proper active class for active state css
            $(settings.navigationId).find('li').removeClass('active');
            $(this).parent('li').addClass('active');
 
            //hide the old content and show the new
            $(settings.contentClass).hide();
            contentToShow.show();
        });
    }
    contentSwitcher();
});

I know this is missing many features (bookmarkableness for one), but a simple starting point. Enjoy…

See example page
Download the plugin
Download sample project files

You can apply the tabSlideOut object to a div that you want to become hidden content that is revealed by a tab.

Type the html

Create a div that will contain the hidden content. You will need a link in there with the class of ‘handle’. This is what will be replaced by your image and be the ‘tab’ or ‘handle’ that will stick out form the side of the screen.

html:

<div class="slide-out-div">
    <a class="handle" href="http://link-for-non-js-users">Content</a>
    <h3>This is extra content</h3>
    <p>Something that wasn't important enough to be in your main body, 
   but that you wanted to hide off the side of your screen for some reason.
    </p>
    <p>Could be a form to submit feedback, or contact info</p>
</div>

Style it however you wish with css

Really doesn’t matter how you style it but it does require a width This is how I styled mine:

css:

.slide-out-div {
    padding: 20px;
    width: 250px;
    background: #ccc;
    border: 1px solid #29216d;
}

Create your ‘tab’ graphic

I used photoshop and made this one:

You can use any graphic you want, although make a note of the height and width of the image because you need to define that in the plugin options.

Set the plugin options

The most important options to set are the first four in the following list. Everything else is just for fun. Comments in the code explain what each option is for.

$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                              //class of the element that will be your tab
    pathToTabImage: 'images/contact_tab.gif',          //path to the image for the tab *required*
    imageHeight: '122px',                               //height of tab image *required*
    imageWidth: '40px',                               //width of tab image *required*    
    tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                                        //speed of animation
    action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
    topPos: '200px',                                   //position from the top
    fixedPosition: false                               //options: true makes it stick(fixed position) on scroll
});

To see all these pieces working together as well as some code to copy/paste see the working example here.

A designer friend of mine was working on his portfolio and was searching for a way to animate his horizontal navigation bar so that the sub-navs would drop down smoothly. In helping him implement a couple of scripts he found online, I decided to write a simple one myself. Turned out to not be quite as ’simple’ as I had hoped, but I like how this one is coming along. Again using the powerful magic known as jQuery, I was able to animate a nested list and make it all work nice. I decided to go ahead and make it a plugin. I also had the help of the hoverIntent plugin to make it all smooth. Check it out…

If you are looking for a regular vertical drop down menu for jQuery use superFish.

See example page
Download plugin
Download sample project

You simply apply this plugin to a nested list, and style it up and you have a nice animated sub-nav.

The basic concept:

Hide the nested ul using a negative margin-top, and have them slide down when its parent li feels a mouseover event.
We start with regular markup of a nested list.

<ul> <!-- Parent ul -->
    <li>Item
        <ul> <!--Nested ul-->
            <li>Sub-item 1</li>
            <li>Sub-item 2</li>
        </ul>
    </li>
</ul>

I thought I would be able to hide the nested ul, under the parent ul using a negative margin, but this just doesn’t work, its always on top (Even with position:absolute and a negative top value, and playing with z-index all day). What does work is to hide the sub-item li’s under their own ul’s.

So I set overflow hidden on the nested ul, and then apply a negative margin-top to the sub-nav li’s to hide them.
Check out this video screencast that shows how im just messing with the margin-top property.

Then simply animate the margin-top property using jQuery’s animate.

The html:

Just a normal nested list, the ‘right’ way to have a navigation list with sub-items.

<ul class="horizontal-dropdown">
    <li><a href="#">About</a>
       <ul>
           <li><a href="sub1">Something</a></li>
           <li><a href="sub2">Something else</a></li>
           <li><a href="sub2">What you wanna know</a></li>
 
        </ul>
    </li>
    <li><a href="#">Projects</a>
        <ul>
            <li><a href="sub2-1">jQuery Plugins</a></li>
            <li><a href="sub2-2">Websites</a></li>
            <li><a href="sub2-3">Music</a></li>
            <li><a href="sub2-3">Art</a></li>
        </ul>    
    </li>
    <li><a href="#">Bikes</a>
        <ul>
            <li><a href="sub2-1">FSR Enduro</a></li>
            <li><a href="sub2-2">20in BMX</a></li>
            <li><a href="sub2-2">Beach Cruiser</a></li>                               
        </ul>            
    </li>
 
    <li><a href="#">Guitars</a>
        <ul>
            <li><a href="sub2-1">Charvel</a></li>
            <li><a href="sub2-2">Paul Reed Smith</a></li>
            <li><a href="sub2-3">Banjo</a></li>
            <li><a href="sub2-3">Mandolin</a></li>
        </ul>
    </li>
    <li class="last"><a href="#">Contact</a></li>
</ul>

The css:

Basically floating everything to the left, to make it horizontal. The overflow hidden and position relative/absolute values are the main things to pay attention to here. Everything else is a just for looks.

ul.horizontal-dropdown {
    position: relative;
    float: left;
}
 
ul.horizontal-dropdown a {
    display: block;
    padding: 10px 40px;
    text-decoration: none;
    color: #fff;
    background: url(../images/border.gif) no-repeat right top;
}
 
ul.horizontal-dropdown li.last a {
    background: none;
}
 
ul.horizontal-dropdown li {
    float: left;
    padding: 0;
    background: url(../images/top-bg.gif) repeat-x;
}
 
ul.horizontal-dropdown li.hover {
    background-position: bottom;
}
 
/*sub nav*/
ul.horizontal-dropdown ul {
    position: absolute;
    left: 0;
    background: #3fb306;
    overflow: hidden;
}
 
ul.horizontal-dropdown ul li {
    background: transparent;
    padding: 0 0 0 0;
    float: left;
}
 
ul.horizontal-dropdown ul li a {
    position: relative;
    top: 0;
    left: 0;
    background: #3fb306;
    padding: 0;
    display: block;
    float: left;
    padding: 10px 20px;
}
 
ul.horizontal-dropdown ul li a:hover {
    color: #0609b3;
}

Set the plugin options:

Download the horizontalNav and hoverIntent and bring them into your project.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.hoverIntent.js"></script>
    <script src="js/jquery.horizontalnav.js"></script>

You should use the ‘hoverIntent’ plug in along with this to make it all smooth. If you do not want to use hoverIntent plugin with this, set useHoverIntent: false

Then configure the plugin, to the list of your choice. Mine has the class of ‘horizontal-dropdown’.

    <script type="text/javascript" charset="utf-8">
    $(function(){
        $('.horizontal-dropdown').animatedHorizontalNav({
            speed: 250,
            useHoverIntent: true
        });
    });
 
    </script>

Any suggestions on how to improve this code is greatly appreciated.

Enjoy!

Today I cleaned up a huge category list on the sidebar of Navigenics’ blog. Since the main problem we were trying to solve was to free up some side bar real estate, I was asked ‘is it hard to put those into a drop down thing?’ We decided on having main category headers and then nesting sub-categories within them. I gave it a shot using the power of jQuery and I am happy with the results.

We use the default “categories” module in Expression Engine, which does not give you much flexibility in terms of how the markup is output without mucking with the php or extending it with a plugin. This solution allows you to keep using the default category manager and simply use a bit of javascript to bend it to your will. From the admin interface of EE, in the category manager, set up your sub categories.

Set up sub-categories in Expression Engine

Example:

This will create html markup that looks like this:

<ul class="nav_categories" id="nav_categories">
    <li>
        <a href="/category/conditions_we_test/">Conditions we test</a>
        <ul>
            <li><a href="/category/crohns_disease/">Crohn's disease</a></li>
            <li><a href="/category/breast_cancer/">Breast cancer</a></li>
        </ul>
    </li>
    <li><a href="/category/diabetes/">Diabetes</a></li>
    <li><a href="/category/exercise/">Exercise</a></li>
    <li><a href="/category/for_physicians/">For physicians</a></li>
</ul>

To get the drop-down functionality I need, I want to add classes to the parent category’s <li> and <a> tags so that I have hooks for my css and javascript:

<ul class="nav_categories" id="nav_categories">
    <li class="sub-cat-heading">
        <a class="cat-expander" href="/category/conditions_we_test/">Conditions we test</a>
        <ul>
            <li><a href="/category/crohns_disease/">Crohn's disease</a></li>
            <li><a href="/category/breast_cancer/">Breast cancer</a></li>
        </ul>
    </li>
    <li><a href="/category/diabetes/">Diabetes</a></li>
    <li><a href="/category/exercise/">Exercise</a></li>
    <li><a href="/category/for_physicians/">For physicians</a></li>
</ul>

Since we can’t control the markup enough with the default category module in EE, we do some jQuery dom traversing and add the classes with javascript:

Add classes using jQuery

$('.nav_categories li')
    .children() //get all the children 
    .find('li') //find only the ones that are li's
    .parent('ul').hide() //of the li's you found hide that ones that have ul's for parents (means they are sub-navs)
    .parent('li') //The proud parent of the nested ul(which is a li) example--><li><ul>
    .addClass('sub-cat-heading') //give the li a name in the form of a class
    .find('a:first') //get the link that is now becoming a heading
    .addClass('cat-expander'); //give that link a name so we can target it specifically it later

This will give us the proper markup we wanted, now we add the little arrows, and the magic for the functionality.

Add some css

If you are trying to copy this exactly you will need the drop down arrow gif, or make your own.

.nav_categories li.sub-cat-heading {
    background:none;
}
 
.nav_categories li.sub-cat-heading a.cat-expander{
    background: url(/assets/images/drop_arrows.gif) no-repeat right -8px;
    padding-right:14px;
}
 
.nav_categories li.sub-cat-heading a.open{
    background-position: right 5px;
}

The final jQuery js with the drop down action

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 
var subCatDropdownEE = {
 
    init:function(){
 
        $('.nav_categories li')
            .children() 
            .find('li') 
            .parent('ul').hide() 
            .parent('li')
            .addClass('sub-cat-heading')
            .find('a:first')
            .addClass('cat-expander')
            .click(function(event){ //click action on the link that has now become a clickable drop-down heading
                $(this)
                .toggleClass('open') //toggle adding a 'open' class to know which way to point the arrow
                .parents('li:first')
                .find('ul') //find the ul that we hid up above
                .slideToggle(); //slide it open if its closed, closed if its open
 
                event.preventDefault(); //prevents the link from being a link, since its now just a trigger for our drop-down
            });
    }
}
 
subCatDropdownEE.init();
 
});
 
</script>

I hope some ExpressionEngine peeps find this useful. Peas out.

I saw this little widget being used on a couple of sites lately, and decided to try building one myself. Turned out to be pretty simple using jQuery and some css foo.

Check out the demo of the effect or you can skip the bs and go right to the js.

Basic concept

The basic concept is to have a div hidden off the side of the page using position:absolute and a negative left value,

.feedback-panel {
    position:absolute;
    top:200px;
    left:-291px;
}

and then ‘animate’ the css left value back to zero using jQuery.

$('.feedback-panel').animate({left:'0'},  300)

That is the basic idea, now I will walk through how it all works…

Step one, add this html above your closing body tag:

<div class="feedback-panel">
    <a class="feedback-tab" href="http://www.static-formpage.com">Feedback</a>
 
    <h3>Send Us Feedback</h3>
    <div id="form-wrap">
 
    <form method="post" action="sendmail.php">
      Email: <input id="email" name="email" type="text" /><br />
      Message:<br />
      <textarea id="message" name="message" rows="10" col="30"></textarea><br />
      <input type="submit" class="button" />
    </form>
 
    </div>    
</div>

Step two, style the box:

This is pretty straight forward. Style a box, position it way to the left off the screen. The a.feedback-tab uses a small graphic to use as the ‘tab’ so that I could have the vertical text. This link is positioned to the outside of the box using position:relative and float:right.

.feedback-panel {
    padding:20px;
    width: 250px;
    background: #bab6d8;
    border: #29216d 1px solid;
    position:absolute;
    top:200px;
    left:-291px;
}
 
.feedback-panel a.feedback-tab {
    background:transparent url(feedbacktab.gif) no-repeat scroll 0 0;
    border-width: 1px 1px 1px 0;
    display:block;
    height:99px;
    left:51px;
    bottom:21px;
    position:relative;
    float:right;
    text-indent:-9999px;
    width:30px;
    outline:none;
}
 
textarea {
    width:90%;
    padding:5px;
}
 
#response-message {
    background: #ccc;
    border: 1px solid #999;
    padding:50px;
}

Step Three, the jQuery Javascript.

Here is the script that performs the basic animation:

var feedbackTab = {
 
    speed:300,
    containerWidth:$('.feedback-panel').outerWidth(),
    containerHeight:$('.feedback-panel').outerHeight(),
    tabWidth:$('.feedback-tab').outerWidth(),
 
 
    init:function(){
        $('.feedback-panel').css('height',feedbackTab.containerHeight + 'px');
 
        $('a.feedback-tab').click(function(event){
            if ($('.feedback-panel').hasClass('open')) {
                $('.feedback-panel')
                .animate({left:'-' + feedbackTab.containerWidth}, feedbackTab.speed)
                .removeClass('open');
            } else {
                $('.feedback-panel')
                .animate({left:'0'},  feedbackTab.speed)
                .addClass('open');
            }
            event.preventDefault();
        });
    }
};
 
feedbackTab.init();

All this does is unhide and hide the box when you click the tab. I am getting the widths of the element using jQuery so that you can change the size of the box using css without having to worry about changing values in the js. I set the height of the box so that the box doesn’t jump to get smaller after you submit the form.

After the email is submitted the box will automatically close, and the tab will disappear off the screen as well. (since you have already submitted your feedback that option is removed)

A feedback form like this needs to be ajax so that you don’t have a page refresh, so I ended up combining this idea with a tutorial I found at NetTuts:submit a form without page refresh
I did not include any of the form validation stuff in this post because my main focus is on the animation idea, not the form itself
Also, to be nice to people not using javascript (all .2% of you), The link will take you to another page that can have a static feedback form if javascript is not present.
Here is the whole script, including the ajax form stuff I stole from the NetTut article.

    var feedbackTab = {
 
        speed:300,
        containerWidth:$('.feedback-panel').outerWidth(),
        containerHeight:$('.feedback-panel').outerHeight(),
        tabWidth:$('.feedback-tab').outerWidth(),
 
        init:function(){
            $('.feedback-panel').css('height',feedbackTab.containerHeight + 'px');
 
            $('a.feedback-tab').click(function(event){
 
                if ($('.feedback-panel').hasClass('open')) {
                    $('.feedback-panel').animate({left:'-' + feedbackTab.containerWidth}, feedbackTab.speed)
                    .removeClass('open');
                } else {
                    $('.feedback-panel').animate({left:'0'},  feedbackTab.speed)
                    .addClass('open');
                }
                event.preventDefault();
            });
        }
    };
 
    feedbackTab.init();
 
    $(".button").click(function() {  
        var email = $("input#email").val();
        var message = $("textarea#message").val();
        var response_message = "Thank you for your comment, see ya!"
 
        var dataString = 'email=' + email + '&message=' + message;
 
        $.ajax({
          type: "POST",
          url: "sendmail.php",
          data: dataString,
          success: function() {
            $('#form-wrap').html("<div id='response-message'></div>");
            $('#response-message').html("<p>" + response_message +"</p>")
            .hide()
            .fadeIn(500)
            .animate({opacity: 1.0}, 1000)
            .fadeIn(0, function(){
                $('.feedback-panel')
                .animate({left:'-' + (feedbackTab.containerWidth + feedbackTab.tabWidth)}, 
                (feedbackTab.speed))
                .removeClass('open');
            })
          }
        });
        return false;
    });

I hope someone has fun with this. Enjoy.

My work badge,
with mini map of Waterdog Lake

For people that live/work in the San Francisco bay area, specifically the peninsula between San Carlos and San Mateo, the options for mountain biking/dirt jumping are really damn good considering the proximity of the various spots within this small area. I am able to access each of these 3 amazingly awesome spots within 5-10 mins of where I sit and for this I am very grateful. There are actually several more than these, but I am focusing on the ones I can literally ride to on a lunch break.

Spot one: Shells

This place has been around forever and is a long standing part of the Foster City community. It lives on private property with mysterious owners that don’t seem to mind that kids of all ages are building an alien landscape out of the shoreline for their thrills and desires.

Photo Credit: Gideon K.

It used to be easy and fun, good for any kid with a BMX bike, but over the years its progressed along with the sport of dirt jumping, and now the place is pretty damn extreme. I would say 90% of the jumps there now have serious consequences upon failure and are for experts only. That said, the other 10% that remains is still fun and worth going out there for. I have taken my 5 and 8 year old kids out there and they are able to keep themselves entertained for hours rolling through the berms and hitting the smaller rollers. I go there just about everyday since its a 5 min ride from where I sit. The fresh air and the shell beach alone is a great reason to check out this spot.

Spot two: DMC aka Carlmont

Another classic spot, 20 min ride from where I sit, Carlmont, like shells had humble beginnings and now has grown with the sport to become a gnarley jumping/downhill spot. This is also private property that has been manipulated by the hard work of mtn bikers over the years. Rumors about the actual owners and how they let this go on are plentiful and varied.

Photo Credit: J. Brantley

Also like shells there are about 2 or 3 out of the dozens of jumps available that I will even attempt. BMXers wont touch this place. You will see big suspension bikes doing ridiculous shit that seems impossible until you see some fool fly over a 30 foot gap with ease. There is an awesome jump here that is so much fun even for mortals like me and keeps me coming back again and again. You drop down a steep trail that is about 20 feet and then you immediately are shot up a steep kicker of a jump. The great thing about it is that there is no gap to clear, meaning no major consequences if you mess up. Another great spot even if just for the nature, which brings me to the 3rd spot I want to talk about that is just right up over the next canyon from Carlmont, Waterdog lake.

Spot three: Waterdog Lake

Waterdog is actually trail system in a nature preserve maintained by the city of Belmont. There are miles of cross country single track and it’s amazingly fun and vast for a park seemingly tucked in the middle of suburbia.

Photo Credit: my palm centro

A group of mountain bikers got together years ago and got permission from the city to improve and build trails in this park, so when you come across hikers and joggers I notice a different level of respect instead of the ’slow down’ or looks of disdain you get at other parks. I am proud of the fact that I am able to park my car, jam to the top, and fly down getting in a good amount of fun fast downhill in about 30 mins. Makes it a perfect before or after work destination.

If you are ever in the mood for a lunch time ride, let me know.

While one of your co-workers is in the middle of an annoying IE6 bug, say “zoom one” to them and chances are they will laugh (or maybe cry). The proprietary IE css ‘zoom‘ property has its roots in accessibility and well intentioned functionality however now it is mostly used as a IE6 hack to give an element the ‘has-layout‘ property.
It’s usually used in a moment of complete desperation at the last minute when nothing else is working; “dude…try {zoom:1}…. holy shit that worked!”.

Is this what zoom is actually good for?

Recently in my travels along creating a print style sheet for our entire site, I think I may have found another more legit and helpful use of zoom. I found that my pages were printing fine by default in firefox and safari, then in IE everything was big, fugly and going outside the margins of the page. Here is something for your toolbox if you ever need it. In either your head tag, (or external print.css style sheet) try:

<style type="text/css" media="print">
body {
zoom:75%; /*or whatever percentage you need, play around with this number*/
}
</style>

Only IE understands zoom, and all other browsers ignore it so, when you goto print from IE the page will actually be reduced nicely to fit by 75%.

(The main reason I actually wanted to keep this technique wasn’t because of purity as much as the fact that I was using a transparent png which is MUCH easier to deal as a bg image with when making it work in IE6)

Usually we start with html that looks like this:

<div id="logo-wrap">
	<a href="/index.html">Website Name</a>
</div>

With the background image attached to the #logo-wrap div and the text-indent set to like -99999px.

So, I decided to just add the img to this html, and call in the exact same image, then hide it with the screen css and show it in the print css.

The img added to the html:

<div id="logo-wrap">
	<a href="/index.html">Website Name
             <img src="images/logo.gif" alt="Website Name" />
        </a>
</div>

css for the screen:

<style type="text/css" media="screen">
	        #logo-wrap {
	            background: url(images/logo.gif) no-repeat 0 0;
	            width: 300px;
	            height: 250px;
	            text-indent: -99999px;
	        }
 
	        #logo-wrap img {
	                display:none;               
	        }   
</style>

css for the print:

<style type="text/css" media="print">
	        #logo-wrap {
	            background: none;
	        }
 
	        #logo-wrap img {
	                display:block;               
	        }   
</style>

Very simple but it worked. So, why load an image if it never gets used except for those rare times when some tree hater from the 90s has to print the website? I agree, pretty stupid. But people are happy now when they print. JIRA Closed. I have a job. I am a sell out. I make shit work, shuddup.

• XHTML Strict or Transitional or HTML4 (to get ready for 5).
• Is W3C validation really THAT critical?
• CSS layout floats?
• jquery Vrs mootools (cool article)
• Flash, flex, JavaFX
• Expression Engine or WordPress or Drupal?
• SifR or the latest annoying text header replacement technique?
• Open external links in new window?
• Graceful degradation and progressive enhancement or screw no-js people?
• Browser detection, object detection or feature detection?

Do I care…really? Do I have opinions about these topics? Yup, but I usually won’t admit it. There are obviously enough places out there to discuss these matters, so if nothing else this blog is here to show the world that William Paoli truly is passionate about UI design, with expert knowledge of css/html/javascript, BA in computer science (or equivalent experience), basic Photoshop skills, and a team player with the desire to learn new things…Thanks for reading.