473,327 Members | 2,118 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

Collapsible Menus

Hi,

I have got this Collapsible Menus, it uses combination of JavaScript
and CSS.

Javascript when executed changes the inital CSS settings to make the
sub menu visable

function toggleClamShellMenu(objectID) {
var object = document.getElementById(objectID);
if (object.style.display == 'block')
object.style.display='none';
else
object.style.display='block';
return;
}

in CSS the initial settings hides the sub menus

#menu1 { display: none; }
#menu2 { display: none; }
#menu3 { display: none; }

In HTML using a tags to execute the javascript

<a class="menuHead" href="javascript:toggleClamShellMenu('menu1')">

It works perfectly in Firefox, IE, Safari but not in Opera to my
suprise.

Opera is not reporting any errors with the Javascript and I cannot see
what it is that stops it working in Opera.

If you know why it doesn't work in opera please let me know and any
possible workarounds.

Many Thanks in Advance

Dafydd

Jul 23 '05 #1
2 2884
<de*******@gmail.com> wrote in message
news:11**********************@f14g2000cwb.googlegr oups.com...
Hi,

I have got this Collapsible Menus, it uses combination of JavaScript
and CSS.

Javascript when executed changes the inital CSS settings to make the
sub menu visable

function toggleClamShellMenu(objectID) {
It's advisable to protect your call to document.getElementById():

if (document.getElementById) {
var object = document.getElementById(objectID);
It's advisable to test for the object and properties you want before
assuming they are available:

if (object && (object = object.style)) {
if (object.style.display == 'block')
object.style.display='none';
else
object.style.display='block';
If you are not applying the styles directly to the elements (ie - <div
style="display:block;">) then you probably want to test against the
default display style, rather than one specific to a specific element:

object.display = (object.display == '' ? 'none' : '');
return;
If you are not returning a value -return- is unnecessary.
}

in CSS the initial settings hides the sub menus

#menu1 { display: none; }
#menu2 { display: none; }
#menu3 { display: none; }

In HTML using a tags to execute the javascript

<a class="menuHead" href="javascript:toggleClamShellMenu('menu1')">
It is in advisable to use href="javascript:...", see <url:
http://jibbering.com/faq/#FAQ4_24 /> for an explanation.
It works perfectly in Firefox, IE, Safari but not in Opera to my
suprise.

Opera is not reporting any errors with the Javascript and I cannot see
what it is that stops it working in Opera.

If you know why it doesn't work in opera please let me know and any
possible workarounds.


I'm guessing that the version of Opera you are using either does not
support document.getElementById(), or does not support the style or
display properties properly.

It's also possible that moving the function call to an -onclick- event
will resolve the problem.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #2
On Mon, 30 May 2005 13:45:24 +0200, <de*******@gmail.com> wrote:
I have got this Collapsible Menus, it uses combination of JavaScript
and CSS. <X> It works perfectly in Firefox, IE, Safari but not in Opera to my
suprise.


Perhaps you have a sample URL I can look at? The posted code was clear
enough but it would still take me some time to write a test page, and I
can not tell exactly what your menu markup looks like.
--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Jul 23 '05 #3

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

Similar topics

1
by: mike | last post by:
The JavaScript below works fine for expandable/collapsible menus in IE, but Firefox 1.5 complains: "Error: loc.parentNode.nextSibling has no properties" and highlights the line...
5
by: Jonathan | last post by:
Hello All, I am in the process of creating a 2/3 level collapsible/exspanible menu (called "nav") where users can click on a category and have the submenus appear beneath it and so on (allow...
7
by: Kamal | last post by:
Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the...
4
by: David T. Ashley | last post by:
In my application, I'm going to have a navigation pane (i.e. frames) on the left that links to pages that display in the main window. The list of choices varies by user, but once a user logs in,...
7
by: David T. Ashley | last post by:
I'm trying to implement these ... I know there is a lot of example code on the web, but I'm trying to roll my own ... What JavaScript functionality is typically used to display parts of the...
1
by: mahesh123 | last post by:
I am using Collapsible Panel in my project.But in other form of my project i want to use collapsible panel inside other Collapsible panel.Is it possible. Both panels are to be dinamic.Is it possible...
0
by: =?Utf-8?B?R2lvcmdpbw==?= | last post by:
Hi, I am having a problem and I need some help. I have a listview with a collapsible panel that has a updatepanel and listview inside updatepanel and I have a button that triggers the...
0
by: wojski696969 | last post by:
Hi.. I'm using ASP.NET AJAX Control Toolkit. I've got collapsible extender (CE) putted inside of modal popup extender (MPE), and there is a problem if i scroll the page when collapsible area is...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.