jQuery help needed (simple .. i think)

Discussion in 'jQuery' started by crazyryan, Mar 1, 2008.

0
  1. #1
    Hey

    Sorry if this is a totally stupid post, but I have like, never used javascript before in my scripts. I was looking for a slidedown effect and came accross jquery and I have to say, it's actually amazing that the effects are all there to use.

    However I'm clueless how to use it.

    Basically, I have something like this basic table:
    <table width="200" border="1">
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>
    Code (markup):
    And in the last column of each row, I want something like view all, and on clicking that view all, a new row will slide down underneath it and show some more details, I want that row to be the full width of the table (also stuck on that), but I have no idea how to apply jquery to that table, can anyone help?

    Thanks :confused:
     
    crazyryan, Mar 1, 2008 IP
  2. crazyryan

    crazyryan Well-Known Member

    Messages:
    3,087
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    175
    #2
    Anyone? I might be able to give about $5 to whoever completes it.
     
    crazyryan, Mar 1, 2008 IP
  3. swishman

    swishman Well-Known Member

    Messages:
    1,264
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    140
    #3
    you can dhtml for that..
     
    swishman, Mar 2, 2008 IP
  4. crazyryan

    crazyryan Well-Known Member

    Messages:
    3,087
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    175
    #4
    I don't know dhtml lol, can anyone help me? It doesnt even have to be with jquery, I just want something like what I said.
     
    crazyryan, Mar 2, 2008 IP
  5. lephron

    lephron Active Member

    Messages:
    204
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #5
    DHTML is Javascript/HTML :)

    Do you want to load the new details from the server with ajax, or have them already included on the page, just hidden?

    The easiest way to do it would probably to include the information on the page with style="display:none;" so it don't display. Give the cell an id. Then add a link to the cell before it like:

    <a href='#' onclick='showMore(cell_id);'>More Details</a>

    And have the following javascript in the page (using jQuery):

    <script type='text/javascript>
    function showMore(id)
    {
    $('#' + id).show('slow);
    }
    </script>
     
    lephron, Mar 2, 2008 IP
  6. crazyryan

    crazyryan Well-Known Member

    Messages:
    3,087
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    175
    #6
    This is my document, but the slider isn't functioning:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type='text/javascript>
function showMore(id)
{
$('#' + id).show('slow');
}
</script>

</head>

<body>

<table width="200" border="1">
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td><a href='#' onclick='showMore(test);'>More Details</a></td>
  </tr>
  <tr id="test" style="display: none;">
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>


</body>
</html>
    Code (markup):
     
    crazyryan, Mar 2, 2008 IP
  7. lephron

    lephron Active Member

    Messages:
    204
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #7
    you need quotes around test eg.

    onclick="showMore('test');"
     
    lephron, Mar 2, 2008 IP