document.getElementById( ....

P

PaulB

Good Morning everybody,

I'm trying to adapt a tutorial script that will handle the behaviour of an
"Expanding/Contracting" site-navigation menu. The code that seems to
handle the expansion and contraction follows at the bottom of my
message here.

This following line is a big part of my hang-up:

document.getElementById('m1').style.display='none';

Question #1:
My "assumption" is that this statement line will "Contract" the menu-chain
that is named by 'm1' and the action word is 'none'.
My other 'assumption' is that the other statement line would " Expand" the
named menu-chain and the action word is 'block'.
That doesn't make sense but really, what do I know?

Am I correct in my assumptions?

Question #2: ( This is my biggie )
At the end of the day, I want the menu.shtml page to open with
this menu in a fully contracted state. Display only the major
category headings. I took all of the document.getElementById
statements and placed them in a function called CloseAll(), like this:

function CloseAll()
{
document.getElementById('m1').style.display='none';
document.getElementById('m2').... // did this for each menu-chain
}

Placed this tag in the menu.shtml
<BODY onLoad="CloseAll()">
but...
When I load the page... nothing displays... NADA, ZILCH.
If I remove the onLoad part, he page displays, but the
menu is FULLY expanded.

Clearly, I am working this code wrong, can someone please help
me sort it out? I've been kicking this thing around for so long that
I barely remember to eat.

Many thanks

-Paul-


[ All of this in now located in the "JS" file ]
document.getElementById('m1').style.display='none';
document.getElementById('m2').style.display='none';
document.getElementById('m3').style.display='none';
document.getElementById('m4').style.display='none';
document.getElementById('m5').style.display='none';
document.getElementById('m6').style.display='none';
document.getElementById('m7').style.display='none';
document.getElementById('m8').style.display='none';
document.getElementById('m9').style.display='none';

var Ary=new Array();
function toggle(list){
var listElement=document.getElementById(list);
for (i=0;i<Ary.length;i++){
if (Ary!=listElement){
Ary.style.display="none";
}
}
if (listElement.style.display=="none"){
listElement.style.display="block";
}
else {
listElement.style.display="none";
}
if (!listElement.dis){
listElement.dis=1;
Ary[Ary.length]=listElement;
}
}
 
M

Martin Honnen

PaulB wrote:

This following line is a big part of my hang-up:

document.getElementById('m1').style.display='none';

Question #1:
My "assumption" is that this statement line will "Contract" the menu-chain
that is named by 'm1' and the action word is 'none'.
My other 'assumption' is that the other statement line would " Expand" the
named menu-chain and the action word is 'block'.
That doesn't make sense but really, what do I know?

Am I correct in my assumptions?
Click to expand...

Not necessarily, JavaScript is used to change the CSS display property
of HTML elements and CSS 2.1 knows a lots of possible values for the CSS
display property, 'none' will always hide the element so that it does
not consume layout space but to show an element different values are
possible depending on the functionality of the element. 'block' is for
block elements, other possible values are 'inline' for inline elements,
'list-item' for list item elements, 'table-row' for table rows and so
on. To make things more complicated the usual cross browser problems
exist, modern browsers like Mozilla or Opera 7/8 are closer to CSS 2.1
than IE 6 is which for instance knows how to render HTML tables so
internally must have some way to distinguish between a table row and a
paragraph but does not support the different display properties. While
IE therefore somehow lets you get away with setting the display of a
table row to 'block' that will mess up the rendering with Mozilla or Opera.
There are different strategies to try to solve all that, one is to set
element.style.display = 'none';
to hide an element but use
element.style.display = '';
to show it as that way the browser's default style sheet kicks in which
has the proper defaults for table rows or table cells or paragraphs or
list items.
Question #2: ( This is my biggie )
At the end of the day, I want the menu.shtml page to open with
this menu in a fully contracted state. Display only the major
category headings. I took all of the document.getElementById
statements and placed them in a function called CloseAll(), like this:

function CloseAll()
{
document.getElementById('m1').style.display='none';
document.getElementById('m2').... // did this for each menu-chain
}

Placed this tag in the menu.shtml
<BODY onLoad="CloseAll()">
but...
When I load the page... nothing displays... NADA, ZILCH.
If I remove the onLoad part, he page displays, but the
menu is FULLY expanded.
Click to expand...

We need to see the HTML of the page e.g. which element has the id 'm1'
and so on.
Also tell us whether you get any script errors in the script console of
your browser, which browsers you are testing with.
 
P

PaulB

Thanks Martin,

I have attached the Menu.htm so that you can
see the various ID elements.

Thank you so much... this issue is becoming
an obsession with me.

Paul
 
P

PaulB

Thanks Martin,

I have attached the Menu.htm so that you can
see the various ID elements.

Thank you so much... this issue is becoming
an obsession with me.

Paul
 
M

Michael Winter

I have attached the Menu.htm so that you can
see the various ID elements.
Click to expand...

This is a text-only newsgroup. Do /not/ post attachments (my news server
rejected it).

Post a URL, or include code in your post if really necessary.

[snip]

Mike
 
P

PaulB

Thanks for the offer Martin, bit I can not send an attachment through
this newsgroup. It will be stripped by the server.

-Paul-
 
P

PaulB

I'm sorry Martin.
I had thought you offered to help and asked to see the HTML stuff.

My apologies and I'll leave you alone about it all

Regards,

Paul
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with my responsive home page 2
Help with code 0
Workaround for document.getElementById("mydiv").style.display='none' 3
Pulling my hair out 2
How do I output a function with a parameter argument? 6
How to do a For x=1 to 10 kinda loop 2
Only one table shows up with the information 2
Need help reading all Select options for use in getElementByid 7

Members online

No members online now.
Total: 28 (members: 0, guests: 28)
Robots: 410

Forum statistics

Threads
473,770
Messages
2,569,584
Members
45,075
Latest member
MakersCBDBloodSupport

Latest Threads

Top