473,836 Members | 1,424 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

document.getEle mentById( ....

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.getEle mentById('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.getEle mentById
statements and placed them in a function called CloseAll(), like this:

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

Placed this tag in the menu.shtml
<BODY onLoad="CloseAl l()">
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.getEle mentById('m1'). style.display=' none';
document.getEle mentById('m2'). style.display=' none';
document.getEle mentById('m3'). style.display=' none';
document.getEle mentById('m4'). style.display=' none';
document.getEle mentById('m5'). style.display=' none';
document.getEle mentById('m6'). style.display=' none';
document.getEle mentById('m7'). style.display=' none';
document.getEle mentById('m8'). style.display=' none';
document.getEle mentById('m9'). style.display=' none';

var Ary=new Array();
function toggle(list){
var listElement=doc ument.getElemen tById(list);
for (i=0;i<Ary.leng th;i++){
if (Ary[i]!=listElement){
Ary[i].style.display= "none";
}
}
if (listElement.st yle.display=="n one"){
listElement.sty le.display="blo ck";
}
else {
listElement.sty le.display="non e";
}
if (!listElement.d is){
listElement.dis =1;
Ary[Ary.length]=listElement;
}
}

Jul 23 '05 #1
7 6001


PaulB wrote:

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

document.getEle mentById('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?
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.d isplay = 'none';
to hide an element but use
element.style.d isplay = '';
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.getEle mentById
statements and placed them in a function called CloseAll(), like this:

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

Placed this tag in the menu.shtml
<BODY onLoad="CloseAl l()">
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.


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.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2
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
Jul 23 '05 #3
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
Jul 23 '05 #4
On 29/06/2005 17:17, PaulB wrote:
I have attached the Menu.htm so that you can
see the various ID elements.


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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #5
Thanks for the offer Martin, bit I can not send an attachment through
this newsgroup. It will be stripped by the server.

-Paul-
Jul 23 '05 #6


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


What offer? Nobody told you to send an attachment, it suffices if you
quote the relevant HTML. Or you can post a URL as already suggested.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #7
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
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2712
by: lawrence | last post by:
This PHP function prints out a bunch of Javascript (as you can see). This is all part of the open source weblog software of PDS (www.publicdomainsoftware.org). We had this javascript stuff working, but it only worked for IE. You can see a working version here: http://www.publicpen.com/designer/mcControlPanel.php username: designer password: designer123 However, I've tried to rewrite this so it would work in all browsers,
12
3950
by: lawrence | last post by:
The following function correctly makes everything invisible but then fails to turn the one chosen DIV back to visible. I imagine I'm getting the syntax of the variable wrong? I've tried this with both single quotes and no single quotes, but it doesn't work either way. What am I doing wrong? <SCRIPT type='text/javascript'> function makeVisible(nameOfDiv) { document.getElementById('weblogs').style.visibility='hidden';
4
5489
by: lawrence | last post by:
Can anyone tell me why this code works in Netscape 7.1 but not in IE??? <SCRIPT type='text/javascript'> function makeVisible(nameOfDiv) { document.getElementById(nameOfDiv).style.visibility='visible'; document.getElementById(nameOfDiv).style.height='auto'; if (nameOfDiv != 'weblogs')
3
9281
by: davidkarlsson74 | last post by:
Error: document.getElementById("folderMenu").cells has no properties File: http://www.volkswagen.se/tillbehor/js/foldermenu.js Rad: 49 The function activates different DIV:s, but doesn't seem to work on FireFox or Netscape. What could be wrong? The function: function setActiveTab(tabNo) {
1
36534
by: Andre Ranieri | last post by:
Hello, I'm trying to set up an ASP.NET 2.0 form where the user enters values in WebControls.TextBoxes for amount owing, interest and late fees and a JavaScript function totals the three values and sets the value of a label (lblTotal) to the sum of the three textbox values. The form is in a content place holder. I've added the following block of code in my form load.
5
11154
by: garfy | last post by:
Hi i get this error in validation Line 22 column 6: document type does not allow element "title" here. <title>Seo Web Design Los Angeles - Web Design And Search Engine Optimization L But the title is inside the head so why I am getting this?
6
3383
by: therig | last post by:
I'm having issues, I've spent many hours searching and I'm a noob at javascript, any help will be greatly appreciated. I keep getting the following error: Error: document.forms.sec11_A has no properties with this script: function checkform(btntype) {
4
2648
by: dr1ft3r | last post by:
Hey guys, I'm building a site for a landscaping business down the street and can't seem to get part of the code functioning correctly. The code fails on line 68 where I make a reference to an iframe's src property. Being that IE does not follow standard and considers an id, name, etc as a qualifying identifier for the document.getElementById object, I double checked to make sure that there's only one instance of id = "servif" and I never use...
13
4971
by: RommelTJ | last post by:
Hi, My website (http://www.justiceinmexico.org/indextest.php) looks good in Firefox, but horrible in IE, and I think it's because of an error in the javascript of a free web ticker I got off the internet. When I run Firebug on it, it says: document.getElementById("TICKER") has no properties TICKER_CONTENT = document.getElementById("TICKER").innerHTML; Here is the complete script:
0
9825
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9671
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10558
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10257
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7794
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5651
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5829
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4459
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4022
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.