Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Chico, CA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question onClick change style for several (not all) spans in a list

    Hello;
    I've spent the day at this but come up short. I'm sure it's trivial for many of you!

    I have two lists. Each item in List 1 corresponds to a few items in List 2. I'd like an 'onClick' of an item in List 1 to result in a CSS style change to its corresponding items in List 2. Then, when you click on a different item in List 1, the style for the first List 2 group reverts and the style change is applied to the second List 2 group. Put another way, I'm highlighting which List 2 items "belong" to each List 1 item.

    Beginner jscript'er as I am, I've managed making a style change to a single List 2 item. I'm assuming I have to set up several arrays, one for each of the List 1 items, then have the onClick apply the style change to all span id's in it. It's first step would be to return all the arrays to the original style, though.

    Am I on the right track? Can some kind soul show me what the function() and array{ } elements ought to look like?

    Thanks in advance
    satchinchico (Karl)

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It would be a simple matter to write the code for you if you provided the HTML which included the two selects... However, you can check if the value or text of the first select matches the value/text of the second... Oh, and you would want to use onchange of the select, not onclick which option's do not support....

    .....Willy

  • #3
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Chico, CA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    Willy -

    Thanks very much for responding! Here's the lists involved, with my guesses for the strategy.

    <!-- list A - projects. loads iframe with a project description page-->
    <ul>
    <li><a href="project1.htm" target="iframe" onChange="highlightme(a_p1,___)">project 1</a></li>
    <li><a href="project2.htm" target="iframe" onChange="highlightme(a_p2,___)">project 2</a></li>
    <li><a href="project3.htm" target="iframe" onChange="highlightme(a_p3,___)">project 3</a></li>
    <li><a href="project4.htm" target="iframe" onChange="highlightme(a_p4,___)">project 4</a></li>
    <li><a href="project5.htm" target="iframe" onChange="highlightme(a_p5,___)">project 5</a></li>
    <li><a href="project6.htm" target="iframe" onChange="highlightme(a_p6,___)">project 6</a></li>
    </ul>

    <!-- list B - skills -->
    <ul>
    <li><span id="ui">user interface</span></li>
    <li><span id="ia">information<br />architecture</span></li>
    <li><span id="fl">flash</a></span></li>
    <li><span id="da">database design</a></span></li>
    <li><span id="gr">graphic design</a></span></li>
    <li><span id="wr">writing</a></span></li>
    <li><span id="vi">video production</a></span></li>
    <li><span id="au">audio production</a></span></li>
    </ul>

    for example:
    project 1 illustrates skills 'ui', 'da', 'gr'
    project 2 illustrates skills 'ui', 'fl', 'au'
    and so on...

    What I'm trying for:
    - When a user clicks project 1, content is loaded into an iframe and the 3 skills involved are highlighted in list B
    - All ul, li and a appearances are set with CSS rules. The highlighting is simply changing the style.background-color='white';

    I'm guessing I need arrays for each project, e.g.
    a_p1 = new array ('ui', 'da', 'gr')
    a_p2 = new array ('ui', 'fl', 'vi','au')

    Then a function highlightme(arrayname) :
    reset all array elements to no background-color, then
    for each id in (passed array name) {
    style.background-color='white'
    }

    Am I close? Wish I could put javascript in the skills list. I read it okay, much harder to write it ;^)

    Again, I appreciate any assist here.

    Karl
    Last edited by satchinchico; 12-27-2004 at 04:58 AM. Reason: left out a 'reset' line in the pseudocode for my function

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For some reason I was thinking select/option menus not list based menus...
    Anyways, try this (give your listB UL tag an id so you can target it)....

    Code:
    <script type="text/javascript">
     <!--//
      function highlight(){
        for(var i=0; i<document.getElementById('listB').getElementsByTagName('span').length; i++){
         var span = document.getElementById('listB').getElementsByTagName('span')[i];
          if(span.id.match('^'+arguments[0]+'|'+arguments[1]+'|'+arguments[2]+'\$','i')){ 
             span.style.backgroundColor = 'red';
          }  else span.style.backgroundColor = '';
        }
      }
     //-->
    </script>
    </head>
    
    <body>
    <!-- list A - projects. loads iframe with a project description page-->
    <ul>
    <li><a href="project1.htm" target="iframe" onclick="highlight('ui','da','gr')">project 1</a></li>
    <li><a href="project2.htm" target="iframe" onclick="highlight('ui','fl','au')">project 2</a></li> 
    </ul>
    
    <!-- list B - skills -->
    <ul id="listB">
    <li><span id="ui">user interface</span></li>
    <li><span id="ia">information<br />architecture</span></li>
    <li><span id="fl">flash</span></li> 
    <li><span id="da">database design</span></li>
    <li><span id="gr">graphic design</span></li> 
    <li><span id="wr">writing</span></li>
    <li><span id="vi">video production</span></li>
    <li><span id="au">audio production</span></li>
    </ul>
    
    <iframe name="iframe" id="iframe" src="http://google.com"></iframe>
    .....Willy

    BTW: Change span.style.backgroundColor = 'red'; to whatever color you want...
    I did not feel like styling anymore elements than I had to in order to test the codes...
    Last edited by Willy Duitt; 12-27-2004 at 08:07 AM.

  • #5
    New to the CF scene
    Join Date
    Aug 2002
    Location
    Chico, CA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Willy -

    Thanks very much, that was just what I needed.

    I'm trying to take myself from a "dreamweaver developer" to a level up, with standards-compliant and accessible dhtml. The tips and boosts from folks like yourself are a terrific help.

    here's a url to the early work-in-progress. Only the 1st couple of links in lists are live.



    Karl


  •  

    Posting Permissions

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