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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing CSS class in TD's on mouse events

    I want to change the background of the TD when you move your mouse over, and then back to its orginal color on mouseout, which I do (and have to do) by switching the class of the TD.

    This works fine, but the trouble comes when I want to have the class switch onclick. I tried setting a variable refelcting the ID name when clicked, and setting the css class to the TD clicked. Fine...but I also need to set the previously clicked TD back to its original class and that's my problem - it doesn't go back to its original class until you mouseover it again.

    I may going about this the wrong way, but what I need to do is:

    1. Switch the class name of the TD on mouseover
    2. Switch the class name back to the name of the TD on mouseout
    3. Set a class to the TD onclick, and set it back to its original class when another TD is clicked.

    My code:
    <script language="javascript">
    var blah='';
    function movein(which){
    which.className='resultrowActive';
    document.body.style.cursor='hand';
    }

    function moveout(which){
    if(blah=='')
    which.className=which.name;
    else{
    which.className=which.name;
    document.all.item(blah).className='resultrowActive';
    }
    document.body.style.cursor='auto';
    }

    function activate(which){
    blah=which.id;
    document.all.item(blah).className='resultrowActive';
    document.body.style.cursor='hand';
    }
    </script>

    ..the HTML

    ........
    <tr>
    <td class="resultrow01" name="resultrow01" id="1" onmouseover="movein(this)" onmouseout="moveout(this)" onclick="activate(this)">
    01. <a class="nav" href="#">This is a task which needs attention today!</a></td>
    </tr>
    <tr>
    <td class="resultrow02" name="resultrow02" id="2" onmouseover="movein(this)" onmouseout="moveout(this)" onclick="activate(this)">
    02. <a class="nav" href="#">Oh yeah, and this here needs to be done also, or else you want be able to jump to #3</a></td>
    </tr>
    <tr>
    <td class="resultrow01" name="resultrow01" id="3" onmouseover="movein(this)" onmouseout="moveout(this)" onclick="activate(this)">
    03. <a class="nav" href="#">Task number 4...or something</a></td>
    </tr>
    ...etc

    Thanks,
    Matz

  • #2
    New Coder
    Join Date
    Jul 2002
    Location
    Portugal
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    function activate(which){
    //first if blah is associated(with the old cell) reset it
    if(blah)
    {
    document.all.item(blah).className='';
    }
    //then we hold the current id for the next time
    blah=which.id;
    //and affect the current cell
    document.all.item(blah).className='resultrowActive';
    document.body.style.cursor='hand';
    }

    this should work

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aah...almost, thanks for pushing me in the right direction. I had to store the previous "class name" in a second variable, so I can rever the previously selected TD to its original class, as opposed to an empty string.

    var blah='';
    var blablah='';

    function activate(which,name){
    //first if blah is associated(with the old cell) reset it
    if(blah)
    {
    document.all.item(blah).className=blablah;
    }
    blablah=which.name;
    //then we hold the current id for the next time
    blah=which.id;
    //and affect the current cell
    document.all.item(blah).className='resultrowActive';
    document.body.style.cursor='hand';
    alert('blablah = '+blablah);
    alert('blah = ' +blah);
    }

    Yikes, if I told my programmer friend how long I've been working on this he'd pee in his pants

    Thanks,
    Matz


  •  

    Posting Permissions

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