SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    slideDow and mouseover on a tr elemnt

    Hi
    Need help on two issues please:

    1.
    -----------------------------------------
    html file
    ........
    .
    .
    ..

    <table id="tabs">
    <tr><td>Apple</td> <td>Fruit</td></tr>
    <tr><td>Audi</td> <td>Car</td></tr>
    <tr><td>Ant</td> <td>Insect</td></tr>

    </table>
    .
    .

    .
    .

    <script>


    $(document).ready(function(){
    $('#tabs tr').mouseover(function(){
    $(this).addClass('zebra'); }); //on mouseover on a tr the background color should change
    });//ready
    </scirpt>


    Here is a simple table with id="tabs"
    ----------------------------------------
    css file

    .zebra{
    background-color:green;
    }

    if i do #tabs td it works but not #tabs tr???
    --------------------end of question 1-----------------


    2'nd question

    $('div').slideDown(1000); does not work , slideUp works but not slideDown ?


    ---------------end of question 2-------------
    Many Thanks
    Meeraa

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by meera_kibe View Post
    if i do #tabs td it works but not #tabs tr
    With #tabs td the effect seems to work on each cell, and with #tabs tr it seems to work on each row.

    Are you expecting something different, or are experiencing different results?

    Quote Originally Posted by meera_kibe View Post
    2'nd question

    $('div').slideDown(1000); does not work , slideUp works but not slideDown ?
    An element needs to first be hidden, before slideDown seems to work for it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru Jason__C's Avatar
    Join Date
    Oct 2009
    Location
    Racoon City
    Posts
    660
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    An element needs to first be hidden, before slideDown seems to work for it.
    Whats the logic behind that? I mean, the element has to be hidden before it could work? That was assine on jQuerys part. Unless I am off somewhere. In this situation pure JS would be the best approach, especially if the OP wants it shown before moving.
    Chuck Norris is so tough,
    mosquitos ask for permission before they bite him

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by USPaperchaser View Post
    Whats the logic behind that? I mean, the element has to be hidden before it could work?
    Have a read of the slideDown documentation page. That's the impression that I get from what it says, and all of the examples that they give there.

    Simple tests like this also help to confirm that such an impression is correct:

    Code html4strict:
    <button id="slidehidden">Slide down the originally hidden div</button>
    <button id="slidepartial">Slide down the partially shown div</button>
    <button id="slideshown">Slide down the shown div</button>
     
    <div id="hidden">Originally hidden</div>
    <div id="partiallyshown">Partially shown</div>
    <div id="shown">Originally shown</div>
     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
    ...
    </script>

    Code javascript:
    $('#hidden').hide();
    $('#slidehidden').on('click', function () {
        $('#hidden').slideDown();
    });
     
    $('#partiallyshown').css({height: 10, overflow: 'hidden'});
    $('#slidepartial').on('click', function () {
        $('#partiallyshown').slideDown();
    });
     
    $('#slideshown').on('click', function () {
        $('#shown').slideDown();
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

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
  •