PDA

View Full Version : Column Browser JavaScript?



earthsick
06-07-2005, 12:45 AM
Hello,
Is there any column browser script I can use similiar to the one at http://www.apple.com/downloads/dashboard/
Thanks,
Harold

jscheuer1
06-07-2005, 02:01 AM
First off, the example you give doesn't work too well in IE6. Secondly, why not just set up three iframes side by side by side on your page, each with a unique id. Then the content on the page loaded into each iframe can select that of the next using a very simple onclick event in an anchor tag, ex:


<a href="#" onclick="parent.getElementById('frameId').src='dumbcars.htm';return false">Dumb Cars (22)</a>

earthsick
06-07-2005, 05:41 AM
Thanks for your advice, I'll start working on that.
How do I script it so that the image (or link color) also change when its clicked?
Thanks-

jscheuer1
06-07-2005, 06:44 AM
So, you want to duplicate what you saw on that page. Well, here is a thought:


<a href="#" onclick="this.className='clicked';ar1.src='whitearrow.gif';parent.document.getElementById('frameId').src='dumbcars.htm';return false">Dumb Cars (22) <img name="ar1" src="bluearrow.gif"></a>

Then you could define a class in a style sheet with the color and background of your choosing:

<style>
.clicked {
color:white;
background:blue;
}

.oldClicked {
color:black;
background:gray;
}
</style>

Then I suppose when you click on the next iframe's link you want the previous iframe's link to go to a grey background. This would require a script on the first iframe's page:

<script>
function greyOut(){
var links=document.getElementsByTagName('a');
for (var i =0; i<links.length ; i++){
if (links[i].className=='clicked')
links[i].className='oldClicked'
break
}
}
</script>

Then in its body tag:

<body onBlur="greyOut()">

Just a general idea, may require some refinement.