Div swap on click - Part 2!

[chalkywhiteface]

Hi there,

I am quite new to jscript so any help would be great.

Was reading through the topic 'Div swap on click (http://www.dynamicdrive.com/forums/showthread.php?t=34902)' and it has been really useful but i was wondering if you could highlight the active trigger when it has been clicked. So if detail number 3 was displaying, the trigger that activated it would be highlighted.

Would/could this be done using a '.selected' class maybe?

Thanks in advance.

Ben
Reply With Quote

[rangana]

Try to add highlighted:


<div onclick="reveal('first');setHighlight(this)">
1st Trigger
</div>
<div onclick="reveal('second');setHighlight(this)">
2nd Trigger
</div>
<div onclick="reveal('third');setHighlight(this)">
3rd Trigger
</div>


....and add this script in the JS:


function setHighlight(e)
{
resetDivs();
e.style.background='#9f0';
// You could also use this one to assign a new className, but ensure you have it declared in your CSS (.select)
//this.className='select';
}
function resetDivs(){
for(var i=0,divs=document.getElementById('triggers').getElementsByTagName('div');i<divs.length;i++) divs[i].style.background='none';
}


Hope that helps.

[chalkywhiteface]

Thanks for the quick reply.

I could not get it to reference a class in my css for some reason but the main thing is it removes my background images in my stylesheet once 1 'trigger' is active. I tried altering the jscript but had no luck.

Any help would be great.

Thanks.

[rangana]

Please provide a link to your page.

[chalkywhiteface]

http://www.iconnet.co.uk/triangletemp/projectpanel.html

Thanks in advance.

[jscheuer1]

Replace the added code with:


function setHighlight(el){
for (var divs=document.getElementById('triggers').getElementsByTagName('div'), i = divs.length - 1; i > -1; --i)
divs[i].className = divs[i].className.replace(/ select/, '');
el.className += ' select';
}

Then in your stylesheet, use:


.select {
background-position:0px 0px!important;
}

[peeaitchpee]

sorry to resurrect this dead and buried thread. but how can I modify this to have the "1st trigger" tab be highlighted until another is slected?

Thanks in advance.