By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,571 Members | 994 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,571 IT Pros & Developers. It's quick & easy.

Collapsible Menus

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
<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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.