...

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



canadianjameson
05-27-2005, 12:12 AM
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 :p :D :D)

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:


<!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?

A1ien51
05-27-2005, 12:20 AM
<a href="#" onClick="showLinks('class1');return false;">Link 1</a>

canadianjameson
05-27-2005, 12:23 AM
no luck, i changed my link to

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

and got the same error

Willy Duitt
05-27-2005, 12:43 AM
onclick="showLinks('class1')" :thumbsup:

canadianjameson
05-27-2005, 12:48 AM
aww AWWW :D

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.

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?

canadianjameson
05-27-2005, 06:18 AM
anyone?

Harry Armadillo
05-27-2005, 06:52 AM
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.


<!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?

canadianjameson
05-27-2005, 03:41 PM
seems sexy enough to me :thumbsup: 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



<!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?

Bill Posters
05-27-2005, 07:49 PM
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). ;)

canadianjameson
05-27-2005, 10:35 PM
i didn't think you could do a document.getElementByClass...

Harry Armadillo
05-28-2005, 12:28 AM
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.

canadianjameson
05-28-2005, 01:01 AM
:D

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

Harry Armadillo
05-28-2005, 02:03 AM
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.

;)

canadianjameson
05-28-2005, 08:51 AM
well i'll be an insectivores uncle....

it seems you were right



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum