?
Solved

Website design and navigation question

Posted on 2005-03-12
8
Medium Priority
?
211 Views
Last Modified: 2010-05-18
I'm just wondering how they achieved the navigation style used at firstgov.gov

What I mean, is there is a part in the middle of the webpage that has tabs, which can be clicked and once they are they show different content.  However, it does this without ever reloading the WHOLE webpage.

I'm just wondering how they made this tabbed navigation system right in the middle of the webpage, and were able to use it to switch to change the content without reloading the whole webpage.

What's behind it and can someone show/explain to me how to do it...or are there any tutorials on the web that show how to do this?

Thanks in advance
0
Comment
Question by:since1983
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 2
8 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13526448
Actually they are reloading the page; or rather they are loading new pages using the same includes.  The server is very fast, and the cahing is optimized, but infact they load a new page as can be seen in the code, and if you use IE you get the telltale blink of a page load.  If firefox it is much more diffecult to detect, because it renders more quickly and does a better job of cache managment.

Cd&
0
 

Author Comment

by:since1983
ID: 13526456
oh ok....well in that case.  Is there a way to do it without reloading the whole page(..and without using inline frames..or the javascript write function)...or am I just thinking of something that's not possible?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13526495
I can be done using XMLHTTP to do a server request in background and then populate a lyer with the response text.  However in IE that requires activex which most of us now consider to much of a security risk to allow it acroos the Internet.

The other way is to include the aditional layers in the orginal pages styled with a display:none property, and just swap the inner HTML of the elment holding the content.  The downside of doing it that way is that it make the page heavier so th eoriginal load takes longer.

I can post code for either or both methods if they are what you are looking for.

Cd&
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13526498
BTW, they both require Javascript.  There is no way to do it without some kind of scripting.

Cd&
0
 

Author Comment

by:since1983
ID: 13526512
so basically...I'm just going to have to do the different pages separately..and I'm just going to need link tabs, that will change/transition when I click on them...using javascript?

Alright..yeah, I think I'd like to see how the javascript is going to look
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13526540
Be back shortly with some code.

Cd&

0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 13526794
Okay, let's start with the HTML for the tabs"

<a href="#" onclick="setContent(0);return false;">
   <img name="tab0" src="tab0.gif" /></a>
<a href="#" onclick="setContent(1);return false;">
   <img name="tab1" src="tab1.gif" /></a>
<a href="#" onclick="setContent(2);return false;">
   <img name="tab2" src="tab2.gif" /></a>
<a href="#" onclick="setContent(3);return false;">
   <img name="tab3" src="tab2.gif" /></a>

Then the layers of content:

<div id="lyr0" class="private">
  LAYER 0:
   Any and all content goes here any legal content is acceptable.
   but be careful that the width does not get pushed or it will
   re-display funny.
</div>
<div id="lyr1" class="private">
  LAYER 1:
   Any and all content goes here any legal content is acceptable.
   but be careful that the width does not get pushed or it will
   re-display funny.
</div>
<div id="lyr2" class="private">
  LAYER 2:
   Any and all content goes here any legal content is acceptable.
   but be careful that the width does not get pushed or it will
   re-display funny.
</div>
<div id="lyr3" class="private">
  LAYER 3:
   Any and all content goes here any legal content is acceptable.
   but be careful that the width does not get pushed or it will
   re-display funny.
</div>

The display area of the page would be something like:
<div class="public" id="content">
&nbsp;
</div>

This is the style entry required in the head of the page:

<style type="text/CSS">
.private {position:absolute;top:0px;left:0px;display:none; }
.public {width:500px;}
// the width is critical to a smooth display, all layers must be able to fit within
// the specified.  You can add whatever additional styling you want for the content
// layer; except do not add a height property the layer must be able to expand downward
// on the page to keep the page from breaking.
</style>

Finally the script that also ges in the head:

<script type="text/javascript">
var lastpntr=false;
var lasttab=false;
var savedsrc;
function init() { setContent(0); }
function setContent(pntr)
{
   if (lastpntr && lastpntr==pntr) return;
   if (lasttab) lasttab.src=savedsrc;
   str='lyr'+pntr;
   lasttab ='tab'+pntr;
   savedsrc=document.images[lasttab].src;
   document.images[lasttab].src=lasttab+'clicked.gif';
   document.getElementById('content').innerHTML=document.getElementById(str).innerHTML;
}
onload=init;
</script>

One final thing is the naming of the tab images the main tabimages in this example are named
tab0.gif, tab1.gif, tab2.gif, tab3.gif
and the clicked version fo the tab images are named:
tab0clicked.gif, tab1clicked.gif, tab2clicked.gif, tab3clicked.gif

Using that kind of naming convention simplifies the code:

Here is a complete page with it set, you will just need to supply it with some images of your own, and work it into your layout.

<html>
<head>
<style type="text/CSS">
.private {position:absolute;top:0px;left:0px;display:none; }
.public {width:500px;}
// the width is critical to a smooth display, all layers must be able to fit within
// the specified.  You can add whatever additional styling you want for the content
// layer; except do not add a height property the layer must be able to expand downward
// on the page to keep the page from breaking.
</style>
<script type="text/javascript">
var lastpntr=false;
var lasttab=false;
var savedsrc;
function init() { setContent(0); }
function setContent(pntr)
{
   if (lastpntr && lastpntr==pntr) return;
   if (lasttab) lasttab.src=savedsrc;
   str='lyr'+pntr;
   lasttab ='tab'+pntr;
   savedsrc=document.images[lasttab].src;
   document.images[lasttab].src=lasttab+'clicked.gif';
   document.getElementById('content').innerHTML=document.getElementById(str).innerHTML;
}
onload=init;
</script>
</head>
<body>
<a href="#" onclick="setContent(0);return false;">
   <img name="tab0" src="tab0.gif" /></a>
<a href="#" onclick="setContent(1);return false;">
   <img name="tab1" src="tab1.gif" /></a>
<a href="#" onclick="setContent(2);return false;">
   <img name="tab2" src="tab2.gif" /></a>
<a href="#" onclick="setContent(3);return false;">
   <img name="tab3" src="tab2.gif" /></a>
<div id="lyr0" class="private">
  LAYER 0:
   Any and all content goes here any legal content is acceptable.
   but be careful that the width does not get pushed or it will
   re-display funny.
</div>
<div id="lyr1" class="private">
  LAYER 1:
   Any and all content goes here any legal content is acceptable.
   but be careful that the width does not get pushed or it will
   re-display funny.
</div>
<div id="lyr2" class="private">
  LAYER 2:
   Lorem ipsum dolor sit amet, lacus nonummy tempus, dui nascetur. Sociosqu luctus habitasse. Tempus dictumst curabitur sit id malesuada ipsum, at facilisi dignissim. Hendrerit potenti. Convallis nam. Cursus inceptos risus pretium nec aliquam nascetur. Ultricies vivamus eros congue conubia bibendum magnis nullam malesuada nam ultrices placerat iaculis.
Blandit eu nunc egestas sociosqu cubilia sagittis a mollis nascetur. Nisl euismod curae vivamus. Eleifend fermentum erat. Tempus semper hymenaeos scelerisque massa, purus cursus mus sociis libero. Eu fermentum sodales. Integer ac vestibulum wisi facilisis consequat, vitae mattis enim donec. Molestie orci.
A dictumst sollicitudin quam habitasse integer netus scelerisque neque orci. Luctus hendrerit quam tempus iaculis praesent tempor per, sociosqu sollicitudin dictum bibendum. Nisl neque ornare viverra ultricies parturient cursus rhoncus inceptos mauris cursus vivamus faucibus. In orci class quis. Conubia condimentum sollicitudin scelerisque varius platea vivamus adipiscing, purus viverra. Nullam nisl elit est quis. Et, diam orci neque ultrices erat.
</div>
<div id="lyr3" class="private">
  LAYER 3:
   Any and all content goes here any legal content is acceptable.
   but be careful that the width does not get pushed or it will
   re-display funny.
</div>

<div class="public" id="content" style="border:3px solid blue">
&nbsp;
</div>
</body>
</html>

Cd&


0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13527263
Glad I could help. Thanks for the A. :^)

Cd&
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question