SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: onClick

  1. #1
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onClick

    I am having proplems with onClick on display.
    My script is
    PHP Code:
    <script language="JavaScript">
      function change(fID) {
        if (fID.style.display == "none") {
          fID.style.display = "show";
        } else {
          fID.style.display = "none";
        }
      }
    </script>
    <?
    while ($r mysql_fetch_object($q)) {
      echo 
    "<tr onMouseOver=\"this.style.cursor='hand'\" onClick=\"change('ntf" .$r->id"')\"><td><img src=\"images/new.gif\" align=\"middle\" /></td></tr>";
      echo 
    "<tr id=\"ntf" .$r->id"\" style=\"display:none\"><td>" .
      
    // text stuff
      
    "</td></tr>";
    }
    ?>
    And I get an error and nothing happens. I have also treid:
    PHP Code:
    onClick="ntf<? echo $r->id?>.style.display='show'"
    And I still get an error. Anyone know how I can fix this?
    Last edited by notepad_coder; May 3, 2002 at 20:10.
    - the lid is off the maple syrup again!

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hide and show

    PHP Code:
    <table>
    <
    tr>
     <
    td>
      <
    span onclick="var tO=this.offsetParent.lastChild.style;(tO.display=='')?tO.display='none':tO.display='';" style="cursor:hand">
          
    SHOW DIV
      
    </span>
      <
    div style="display:none">
       
    This Is a nameless Div<br>
      </
    div>
     </
    td>
     </
    tr>
    </
    table>


    <!-- or -->

    <
    script type="text/javascript">

    function 
    expand(listID) {
            if (
    listID.style.display=="none") {
                    
    listID.style.display="";
            }
            else {
                    
    listID.style.display="none";
            }
            
    window.event.cancelBubble=true;
    }
    function 
    contract(listID) {
            if (
    listID.style.display=="show") {
                    
    listID.style.display="";
            }
            else {
                    
    listID.style.display="none";
            }
            
    window.event.cancelBubble=true;
    }
    </script> 

  3. #3
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope I still get an error on page, I have also tried
    PHP Code:
    <script type="text/javascript">
      <!--
        function 
    show(fID) {
          var 
    showID document.getElementByID(fID);
          if (
    showID.style.visibility == "hidden") {
            
    showID.style.visibility == "visible";
            
    showID.style.display "block";
          } else {
            
    showID.style.visibility "hidden";
            
    showID.style.display "none";
          }
        }
      -->
    </script> 
    But that didnt do anything either.
    Last edited by notepad_coder; May 4, 2002 at 06:18.
    - the lid is off the maple syrup again!

  4. #4
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it do it displays the section but now I cant get it so it hides it. I changes the code to
    PHP Code:
    echo "<tr onClick=\"ntf" .$r->id".style.display='block'\">"
    And that shows it perfectly. Now how can I get it to hide it?
    - the lid is off the maple syrup again!

  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there are two functions that i mentioned one hides the box the other shows it

    PHP Code:

    <script type="text/javascript">

    function 
    expand(listID) {
            if (
    listID.style.display=="none") {
                    
    listID.style.display="";
            }
            else {
                    
    listID.style.display="none";
            }
            
    window.event.cancelBubble=true;
    }
    function 
    contract(listID) {
            if (
    listID.style.display=="show") {
                    
    listID.style.display="";
            }
            else {
                    
    listID.style.display="none";
            }
            
    window.event.cancelBubble=true;
    }
    </script> 

  6. #6
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried that and I am getting an error saying object does not support this property or method?

    Ok I changed the code but now I get
    Error: 'style.display' is null or not an object
    Last edited by notepad_coder; May 4, 2002 at 06:51.
    - the lid is off the maple syrup again!

  7. #7
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this works, havent tried it in other browsers but hopefully it will

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
      <
    title>Untitled</title>

    <
    script language="javascript" type="text/javascript">
    <!--

    function 
    expandable(listID) {
            if (
    listID.style.display=="none") {
                    
    listID.style.display="";
            }
            else {
                    
    listID.style.display="none";
            }
            
    window.event.cancelBubble=true;
    }
    //-->
    </script>
        
    </head>

    <body>
      <table border="0" summary="" style="background: #000000;color: #ffffff;">
        <thead><tr><td onmouseover="this.style.background='white';this.style.color = 'black';" onmouseout="this.style.background='black';this.style.color = 'white';">This text is in the THEAD</td></tr></thead>
        <tfoot><tr><td onmouseover="this.style.background='white';this.style.color = 'black';" onmouseout="this.style.background='black';this.style.color = 'white';">This text is in the TFOOT</td></tr></tfoot>
        <tbody>
          <tr><td style="display:show;background: #000000;color: #ffffff;" onclick="expandable(a)"  onmouseover="this.style.background='white';this.style.color = 'black';this.style.cursor='hand';" onmouseout="this.style.background='black';this.style.color = 'white';this.style.cursor='#';"><div unselectable="on">click here to hide &amp; show</div></td></tr>
          <tr id="a"><td  onmouseover="this.style.background='white';this.style.color = 'black';" onmouseout="this.style.background='black';this.style.color = 'white';">a,b,c,d,e,f,g,h,i,j .</td></tr>
        </tbody>        
      </table>

    </body>
    </html> 

  8. #8
    That's Right. notepad_coder's Avatar
    Join Date
    Apr 2002
    Location
    Colorado
    Posts
    835
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, that works. I have been trying to get it working since yesterday and nobody could find the problem. Thanks
    - the lid is off the maple syrup again!

  9. #9
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem


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
  •