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 14 of 14
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    onclick display: block... but using the class name as a variable

    Hey, i'm trying to throw together a quick script for a friend and I have hit a roadblock (yes, i actually tried coding it myself )

    here's the situation: he has a top menubar with five links. when a link is clicked, he want to have its associated sublinks appear in directly below. I suggested using divs and setting them all to display: none, and then onClick use a document.getElementById('className').style.display='block' to show the links.

    here's how far i got:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    function showLinks(n){
     document.getElementById(n).style.display='block'
    }
    </script>
    
    <style type="text/css">
    td {
    text-align: center
    }
    </style>
    </head>
    
    <body>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td><a href="#" onClick="showLinks(class1)">Link 1</a></td>
        <td><a href="#" onClick="showLinks(class2)">Link 2</a></td>
        <td>Link 3</td>
        <td>Link 4</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="2">
    		<div id="class1" style="display: none">Link 1.1 | Link 1.2</div>
    		<div id="class2" style="display: none">Link 2.1 | Link 2.2</div>
    		<div id="class3"></div>
    		<div id="class4"></div>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    when i click the links i get an "Object Required" JS error...where did i go wrong?
    Last edited by canadianjameson; 05-26-2005 at 11:18 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    <a href="#" onClick="showLinks('class1');return false;">Link 1</a>
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    no luck, i changed my link to

    <a href="#" onClick="showLinks(class1); return false;">Link 1</a>

    and got the same error
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    onclick="showLinks('class1')"

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    aww AWWW

    how do i make it so that when it displays it doesnt stretch out the table? i tried using this and removing the &nbsp but it didn't work.
    Code:
    table { empty-cells: show; }
    also, i figure that when a second link is clicked that the first one should be hidden again and the new one appear in its place. how would i modify the script to do that?
    Last edited by canadianjameson; 05-27-2005 at 12:06 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    anyone?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Assign widths to your td's to keep them from streching, return false from your onclick links to keep from poping to the top o' page, when doing a showLinks hide all the siblings.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Hairy Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    function showLinks(n){
      var el=document.getElementById(n);
      var p=el.parentNode;
      for(var i=0;i<p.childNodes.length;i++){//check all of n's siblings (n's parent's childen)
        if(p.childNodes[i].style && p.childNodes[i].style.display=='block'){//find who is displaying
          p.childNodes[i].style.display='none';
          if(p.childNodes[i]==el) return;//remove this line to remove toggling action
          break;
          }
        }
      el.style.display='block'
      }
    </script>
    
    <style type="text/css">
    td {
      text-align: center
      }
    </style>
    </head>
    
    <body>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td width=25%><a href="#" onClick="showLinks('class1');return false">Link 1</a></td>
        <td width=25%><a href="#" onClick="showLinks('class2');return false">Link 2</a></td>
        <td width=25%>Link 3</td>
        <td width=25%>Link 4</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="2">
    		<div id="class1" style="display: none">Link 1.1 | Link 1.2</div>
    		<div id="class2" style="display: none">Link 2.1 | Link 2.2</div>
    		<div id="class3" style="display: none"></div>
    		<div id="class4" style="display: none"></div>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    Easy, eh?
    Last edited by Harry Armadillo; 05-27-2005 at 05:55 AM.

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    seems sexy enough to me rather furry infact

    however there's still the question of the rogue &nbsp causing the <td> containing the hidden <div> links to display on 2 lines instea of 1.

    i tried using and it wouldnt work. here's how it looked

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Hairy Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    function showLinks(n){
      var el=document.getElementById(n);
      var p=el.parentNode;
      for(var i=0;i<p.childNodes.length;i++){//check all of n's siblings (n's parent's childen)
        if(p.childNodes[i].style && p.childNodes[i].style.display=='block'){//find who is displaying
          p.childNodes[i].style.display='none';
          if(p.childNodes[i]==el) return;//remove this line to remove toggling action
          break;
          }
        }
      el.style.display='block'
      }
    </script>
    
    <style type="text/css">
    table { 
      empty-cells: show;  }
    td {
      text-align: center }
    </style>
    </head>
    
    <body>
    <table width="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <td width=25%><a href="#" onClick="showLinks('class1');return false">Link 1</a></td>
        <td width=25%><a href="#" onClick="showLinks('class2');return false">Link 2</a></td>
        <td width=25%>Link 3</td>
        <td width=25%>Link 4</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="2">
    		<div id="class1" style="display: none">Link 1.1 | Link 1.2</div>
    		<div id="class2" style="display: none">Link 2.1 | Link 2.2</div>
    		<div id="class3" style="display: none"></div>
    		<div id="class4" style="display: none"></div></td>    <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    i bolded what i added and removed.

    any ideas as to how i can fix this last stumbling block?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Small point of order (in reference to the original query)…

    You aren't actually referencing the class name, but the id.
    class names are those values which appear within the class attribute.
    The clue is in the method getElementById.

    Like I say, a small point, but one worth knowing for future references (and thread titles).

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    i didn't think you could do a document.getElementByClass...
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    empty-cells: show; works fine with Firefox; just tell all your visitors to dump IE.

    Oh, all right. Instead of a big, bulky &nbsp; to keep the table-cell inflated, jam in a teeny, tiny div that hides in the corner:

    <td colspan="2"><div style='width:1px;height:1px;float:left;'></div>...</td>

    Not the greatest solution, but it works.

  • #12
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts


    that works... only problem being that the same thing occurs.

    what is happening is when you click on a link, the &nbsp (or now the div) is being pushed down to Line 2 within the cell so that the newly unhidden div can be shown on Line 1.

    I want to avoid this resizing of the table. if i remove the &nsbp there is no more shifting from a height of 1 line to a height of 2 lines, but the borders of that cell dissapear.

    i suppose that we could contain that &nbsp in its own <div> and have the script permanently hide it onClick of any link... but consarnit thats a heck of a workaround
    Last edited by canadianjameson; 05-28-2005 at 12:04 AM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #13
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Did you put the single-pixel div before or after your linky div's? From your response, I'm guessing after....despite the fact that my post clearly (clearly, darn it!) shows the pixie-div first.


  • #14
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    well i'll be an insectivores uncle....

    it seems you were right
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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