PDA

View Full Version : Column Browser JavaScript?




earthsick
06-07-2005, 01: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, 03: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, 06: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, 07: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.