...

View Full Version : display first div when page loads



marisa1981
05-14-2009, 09:55 AM
Hi,

I have some code which toggles the content on the page. This works fine but I need the first div to be showing when the page loads and its tab to have a selected state. Can anyone help me out? Thanks



<html>
<head>
<title></title>
<style type="text/css">

img {border:none;}

#tab-nav {
padding: 0px 0 0px 110px;
height:41px;
width:600px;
float: left;
list-style-type: none;
background-image:url(line.gif);
background-repeat:no-repeat;
background-position:bottom;

}
#tab-nav li {
float: left;
}
#tab-nav li a {
display: block;
height: 32px;
text-indent: -9999px;
padding-right:2px;
}

#tab-nav li.facebook a {
width:80px;
height:36px;
background:url(facebook-tab.gif);
background-repeat:no-repeat;
}

#tab-nav li.facebook a.selected {
width:80px;
height:36px;
background:url(facebook-tab-red.gif);
background-repeat:no-repeat;
}

#tab-nav li.twitter a {
width: 75px;
height:36px;
background:url(twitter-tab.gif);
background-repeat:no-repeat;
}

#tab-nav li.twitter a.selected {
width: 75px;
height:36px;
background:url(twitter-tab-red.gif);
background-repeat:no-repeat;
}
#tab-nav li.picasa a {
width: 65px;
height:36px;
background:url(picasa-tab.gif);
background-repeat:no-repeat;
}

#tab-nav li.picasa a.selected {
width: 65px;
height:36px;
background:url(picasa-tab-red.gif);
background-repeat:no-repeat;
}

#tab-nav li.bookmarking a {
width: 101px;
height:36px;
background:url(bookmarking-tab.gif);
background-repeat:no-repeat;
}

#tab-nav li.bookmarking a.selected {
width: 101px;
height:36px;
background:url(bookmarking-tab-red.gif);
background-repeat:no-repeat;
}

#tab-nav li.youtube a {
width: 76px;
height:36px;
background:url(youtube-tab.gif);
background-repeat:no-repeat;
}

#tab-nav li.youtube a.selected {
width: 76px;
height:36px;
background:url(youtube-tab-red.gif);
background-repeat:no-repeat;
}

#tab-nav li.blogs a {
width: 56px;
height:36px;
background:url(blogs-tab.gif);
background-repeat:no-repeat;
}

#tab-nav li.blogs a.selected {
width: 56px;
height:36px;
background:url(blogs-tab-red.gif);
background-repeat:no-repeat;
}

#facebook {display:none;
position:relative;
top:40px;
left:-475px;}
#twitter {display:none;
position:relative;
top:40px;
left:-475px;}
#picasa {display:none;
position:relative;
top:40px;
left:-475px;}
#bookmarking {display:none;
position:relative;
top:40px;
left:-475px;}
#youtube {display:none;
position:relative;
top:40px;
left:-475px;}
#blogs {display:none;
position:relative;
top:40px;
left:-475px;}

</style>


<script type="text/javascript">
var current = 0;

function Toggle(toTog) {
obj = document.getElementById(toTog);
if( obj ) { if( current ) current.style.display = "none"; obj.style.display = "block"; current = obj; }
else
if( obj ) { if( current ) current.style.display = "block"; obj.style.display = "none"; current = obj; }
}

function applySelectedTo(link) {
var ul = document.getElementsByTagName("ul")[0];
var allLinks = ul.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
allLinks[i].className = "";
}
link.className = "selected";
}
</script>


<ul id="tab-nav">
<li class="facebook"><a href="#" onclick="Toggle('facebook'); applySelectedTo(this);return false;"></a></li>
<li class="twitter"><a href="#" onclick="Toggle('twitter'); applySelectedTo(this);return false;"></a></li>
<li class="picasa"><a href="#" onclick="Toggle('picasa'); applySelectedTo(this);return false;"></a></li>
<li class="bookmarking"><a href="#" onclick="Toggle('bookmarking'); applySelectedTo(this);return false;"></a></li>
<li class="youtube"><a href="#" onclick="Toggle('youtube'); applySelectedTo(this);return false;"></a></li>
<li class="blogs"><a href="#" onclick="Toggle('blogs'); applySelectedTo(this);return false;"></a></li>
</ul>

<div id="facebook" style="display: none;">
<h3>Facebook</h3>
<p><strong>What is Facebook?</strong><br />
some facebook content</p>
</div>
<div id="twitter" style="display: none;">

<h3>Twitter</h3>
<p><strong>What is Twitter?</strong><br />
some twitter content</p>
</div>

<div id="picasa" style="display: none;">
<h3>Picasa</h3>
<p><strong>What is Picasa?</strong><br />
some picasa content</p>
</div>

<div id="bookmarking" style="display: none;">
<p><strong>What is bookmarking?</strong><br />
some bookmarking content</p>
</div>

<div id="youtube" style="display: none;">
<h3>YouTube</h3>
<p><strong>What is YouTube?</strong><br />
some YouTube content</p>
</div>


</body>
</html>

abduraooft
05-14-2009, 10:27 AM
Have a try by adding
window.onload=function(){
document.getElementById('facebook').style.display='block';
var tab=document.getElementById('tab-nav').getElementsByTagName('a')[0];
tab.style.backgroundImage='url(facebook-tab-red.gif);'
} into your script.

btw, I'd recommend you to adopt some progressive enhancement (http://en.wikipedia.org/wiki/Progressive_enhancement) techniques, otherwise nothing will be displayed for people who have no javascript support in their browser.

adios
05-14-2009, 10:55 AM
Add this to your script block:


function init()
{
var firstlist = document.getElementsByTagName('ul')[0];
var firstitem = firstlist.getElementsByTagName('li')[0]; //index determines tab
var trigger = firstitem.getElementsByTagName('a')[0];
trigger.onclick();
}

function addListener(obj, evt, handler)
{
if (obj.addEventListener)
{
obj.addEventListener(evt, handler, false);
}
else if (obj.attachEvent)
{
obj.attachEvent('on' + evt, handler);
}
}

addListener(window, 'load', init);

marisa1981
05-14-2009, 11:12 AM
Thanks, but this doesn't seem to work as I intended. It keeps the tab selected an div showing when you click on the other tabs! Is there a way to unselect and hide the div when the others are clicked?

adios
05-14-2009, 11:28 AM
Not sure if you're talking to me or abduraooft - but, anyway - could you post the exact page you're using? There are a number of problems with the code you posted that make it difficult to test with (like empty links). Need to see exactly what you're seeing ...

marisa1981
05-14-2009, 11:49 AM
My page isn't hosted live yet. I'm building it locally

adios
05-14-2009, 12:46 PM
Well ... it sounds as if clicking the links is reloading the page, causing the windows onload handler to run each time, resetting the tab choice back to square one. The 'return false' on those links should stop that. Again, it's really hard to debug something when you don't have it in front of you. A sample page, (or a live demo) could settle the issue in seconds.

abduraooft
05-14-2009, 01:06 PM
Thanks, but this doesn't seem to work as I intended. It keeps the tab selected an div showing when you click on the other tabs! Is there a way to unselect and hide the div when the others are clicked?

Have a try by adding

window.onload=function(){
var tab=document.getElementById('tab-nav').getElementsByTagName('a')[0];
Toggle('facebook');
applySelectedTo(tab);
} instead of my first code.

adios
05-14-2009, 06:13 PM
This:


function init()
{
var firstlist = document.getElementsByTagName('ul')[0];
var firstitem = firstlist.getElementsByTagName('li')[0]; //index determines tab
var trigger = firstitem.getElementsByTagName('a')[0];
trigger.onclick();
}

... does the same thing as


window.onload=function(){
var tab=document.getElementById('tab-nav').getElementsByTagName('a')[0];
Toggle('facebook');
applySelectedTo(tab);
}

... only more elegantly. You've already got the code to activate the first tab: it's in the onclick handler of - the first tab!

You can change it to


function init()
{
var firstlist = document.getElementsByTagName('ul')[0];
var firstlink = firstlist.getElementsByTagName('a')[0];
firstlink.onclick();
}

... if you like, I wanted to make it more modular ...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum