Results 1 to 7 of 7

Thread: Div swap on click - Part 2!

  1. #1
    Join Date
    Sep 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Div swap on click - Part 2!

    Hi there,

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

    Was reading through the topic 'Div swap on click' 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

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Try to add highlighted:
    Code:
    <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:
    Code:
    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Sep 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Please provide a link to your page.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. #5
    Join Date
    Sep 2008
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Replace the added code with:

    Code:
    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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following 2 Users Say Thank You to jscheuer1 For This Useful Post:

    chalkywhiteface (09-11-2008),witchyweb (09-17-2008)

  8. #7
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •