Multiple Pages In One

Occasionally I’m asked to create a page where there is tons of information (passed in through a database) and the information needs to be broken up into manageable page-like junks, but I can’t actually create multiple pages because the programmers require that the page does not refresh. Through some pretty simple css and javascript we can use buttons or tabs (or links of any kind) to switch beteen various data on a page.

Check out Backroads (still in production) and High Country Passage. Both are travel sites designed by the fabulous Davi Grossman over at Deluxe Digital Media, who hires me to code out their Photoshop files.

Backroads screenshot

High Country Passage screenshot

Notice how you can click the various tabs and only the main content changes, and that the url remains the same (i.e. – no page refresh)? Here’s how this is done …

Note: I’m not going to go into all the detail of how I laid out this page as I often do in these tutorials because I just want it to be short and sweet regarding how this specific technique is achieved. Code here may vary from the actual code of the page for the purposes of simplification.

:x:

Pretty straightforward – I’m giving unique IDs to each link and content div, and also calling a Javascript function onclick for the links.

<div id="tabs">
<ul>
<li>Trip Itenerary</li>
<li>Lodging</li>
<li>Route Rating</li>
</ul>
</div>

<div id="itinerary">

</div>

<div id="lodging">

</div>

<div id="rating">

</div>

:c:

Mark up the styles however you want but for the three main content divs give a display of none unless they have a class of “on” applied to them.

#itinerary,
#lodging,
#rating {
display:none;
}
#itinerary.on,
#lodging.on,
#rating.on {
display:block;
}

The Javascript

I create an external file that I call to from the head of my document. Basically each function simply gives a class name of “on” to the tab (for a persistent “on” state) and its corresponding content div, and removes that class from all other tabs and content divs.

if (document.images) {

function itineraryOn() {
document.getElementById('itinerary').className='on';
document.getElementById('tab_itinerary').className='on';
document.getElementById('lodging').className='';
document.getElementById('tab_lodging').className='';
document.getElementById('rating').className='';
document.getElementById('tab_rating').className='';
}

function lodgingOn() {
document.getElementById('itinerary').className='';
document.getElementById('tab_itinerary').className='';
document.getElementById('lodging').className='on';
document.getElementById('tab_lodging').className='on';
document.getElementById('rating').className='';
document.getElementById('tab_rating').className='';
}

function ratingOn() {
document.getElementById('itinerary').className='';
document.getElementById('tab_itinerary').className='';
document.getElementById('lodging').className='';
document.getElementById('tab_lodging').className='';
document.getElementById('rating').className='on';
document.getElementById('tab_rating').className='on';
}

}

That’s A Wrap

Once again, you can view the results for Backroads and High Country Passage.

Now – I am the first one to admit that I am no Javascript expert by ANY stretch of the imagination. This script, as simple as it is, is about the extent of what I can write from scratch without the aid of a book. That being said, I’m pretty sure there is a better, less obtrusive way to accomplish this – one that removes the onclick stuff from the links would be especially sweet. So – if anyone out there can tell us all how to do it better then please do!

12 Responses to “Multiple Pages In One”

  • Andrew Says:

    Cool stuff. How do you deal with bookmarking if someone wants to bookmark one of the tabbed states? Is there a way to do that with Javacript if you appended something to the URL?

  • Sheriar Designs Says:

    Andrew – I think you would be able to figure that out better than I! If anyone has a “bookmarking” tip it would be great to hear about it.

    David emailed me to say, “As Andrew notes in the comments, these “pages” cannot be bookmarked. With JS turned off or unavailable the pages are totally inaccessible. Sorry.”

    No apologies needed, David! I know the problems with this sort of thing, but sometimes we have to do what our clients ask of us. I didn’t design either of these pages but was charged with executing the design and I tried to do so with semantic code and minimal markup and scripting. Javascript is running all over both of these suckers and I’m afraid it is necessary in order to utilize much of the site – not just to access these “pages.”

    On the plus side, viewing this site with styles disabled you still get all the content, as you can get a sense of in the High Country Passage page if you view the “Printer Friendly” version of the page (link near the top rght).

  • David Hucklesby Says:

    I concede that the solution from Bobby van der Sluis I sent you is complex.

    I wonder if this will work? :


  • Sheriar Designs Says:

    Interesting thought, David … I will have to try that and report back!

  • Brian Says:

    Re: Accessibility

    Use anchor links to make sure users with JavaScript being disabled can still use your tab navigation to jump down to the content.

    Modern browsers appear to be able to use the “id” property of any element (not just anchor tags) as jump points. But for backwards compatibility I have added the standard page anchors.

  • Brian Says:

    Re: Bookmarking

    After applying my above technique for making the content accessible for JavaScript-impared users – insert the following JavaScript code block at the bottom of the page.

    // After the content has loaded, check for an anchor "hash" value in the URL.
    if (document.location.hash) {
    // Display the "bookmarked" content.
    if (document.location.hash=='#itinerary') {
    itineraryOn();
    } else if (document.location.hash=='#lodging') {
    lodgingOn();
    } else if (document.location.hash=='#rating') {
    ratingOn();
    }
    }

  • Brian Says:

    Re: Accessibility

    I just realized my above solution does not work with JavaScript disabled if CSS is enabled! To correct this, simply wrap the style block in your example in JavaScript.

    This way all of the content blocks will be visible for someone who has JavaScript disabled, and will be accessible via the Jump Links in your tabbed navigation! :)

    document.write(”);
    document.write(‘#itinerary, #lodging, #rating {display:none;}’);
    document.write(‘#itinerary.on, #lodging.on, #rating.on {display:block;}’);
    document.write(”);

  • Sheriar Designs Says:

    Wow, Brian … thanks for making the effort and taking the time to share this with us!

    I will have to take a bit of time to wrap my head around it and check it out. ;o)

  • Andy Says:

    “Modern browsers appear to be able to use the “id” property of any element (not just anchor tags) as jump points. But for backwards compatibility I have added the standard page anchors.”

    I have some fairly recent experience with this. You have to be very careful if you add an ID tag to something other than an anchor tag. In Firefox 1.x, doing this for any content block that also included an anchor tag would link to the nearest anchor tag below the ID. Example:

    <div id="chicken">bla bla bla <a href="#">Top</a></div>

    In FF 1.x, a link to the “chicken” ID would instead take you to the <a href="#">Top</a>, which is seriously annoying!

    Maybe they have repaired this issue in 1.5, but I cannot say, as I fixed my issues before it was released.

  • Andy Says:

    Gaaah! That comment is ruined! I’m clearly missing something in my coding method on this one. I would attempt to illustrate without the tags, but that would just make it more confusing. Ah well, sorry about that.

  • Rupesh Says:

    friend

    i am new in coding just learning C#.net but i have made a website. I am facing one problem, in my website i am puting a lot of datas to every post. But when i open my website the the whole page gets open and it takes a lot of time.
    So the page becomes slow. What i want on the page load only the selected post will open and the other pages will open only by clicking the link.
    For this what should i do please suggest me.

    regards
    rupesh

  • Sheriar Designs Says:

    Rupesh: I have been doing a lot of work developing processes for just this kind of thing. I would start by taking a look at this post.

    Good luck!