473,230 Members | 1,448 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,230 software developers and data experts.

unobtrusive javascript to handle drop down/fold out menu

I have an old web application I did where browsers with dynamic
capabilities received a drop down menu on the top of the page and a
fold out on the left hand side of the page and non-dynamic browsers
received two static menus. This was done via server side detection of
browser capabilities and branching the application. Over time needless
to say the capabilities between the dynamic and static sides got
seriously out of whack.

Now the drop-down menu was not done unobtrusively, it was done via
mouseovers and the like.

Obviously it makes sense to change the menus to be done by catching
events. But I would also like to redo the dynamic and static branching.
The way I figured would be as follows:

The static menus are placed inside of noscript elements.
The dynamic menus are loaded with display set to none. Script writes in
a new css changing dynamic menu display to block.

As I understand noscript is considered bad via unobtrusive javascript
theory, however I have a hard time seeing how one could make a menu
that would display properly as a static menu yet also function as a
drop down or fold out (especially fold out), collapsible expandable
menus are easy since they basically have the menu order placed in the
structure needed.

So I'm wondering if anyone has reasonable suggestions on how to
succeed.

On another subject, anyone know what the effect of a bunch of links
inside a noscript element that mirror a bunch of links in the normal
page will do to Google's algorithms?

Aug 9 '05 #1
2 3619
pantagruel wrote:
I have an old web application I did where browsers with dynamic
capabilities received a drop down menu on the top of the page and a
fold out on the left hand side of the page and non-dynamic browsers
received two static menus. This was done via server side detection of
browser capabilities and branching the application. Over time needless
to say the capabilities between the dynamic and static sides got
seriously out of whack.

Now the drop-down menu was not done unobtrusively, it was done via
mouseovers and the like.

Obviously it makes sense to change the menus to be done by catching
events. But I would also like to redo the dynamic and static branching.
The way I figured would be as follows:

The static menus are placed inside of noscript elements.
The dynamic menus are loaded with display set to none. Script writes in
a new css changing dynamic menu display to block.

As I understand noscript is considered bad via unobtrusive javascript
theory, however I have a hard time seeing how one could make a menu
that would display properly as a static menu yet also function as a
drop down or fold out (especially fold out), collapsible expandable
menus are easy since they basically have the menu order placed in the
structure needed.

So I'm wondering if anyone has reasonable suggestions on how to
succeed.

On another subject, anyone know what the effect of a bunch of links
inside a noscript element that mirror a bunch of links in the normal
page will do to Google's algorithms?


There is a reasonable menu system here based on a list, it works
whether JavaScript is available or not.

<URL:http://www.mattkruse.com/javascript/mktree>

The basic menu looks pretty staid, but you can tart it up with CSS to
look much more special (or not...).

There is much debate over noscript elements, their use can be seen as
pointless - if a site is well designed and works without scripting
(albeit without the benefits of scripting), then what's the point?

--
Rob
Aug 9 '05 #2
The example you give follows what I was saying about the difference
between an expand/collapse menu and a fold out menu.

the markup of the expand/collapse menu is a simple tree that mimics the
display of the tree. so all one has to do is to toggle displays. if
javascript is not running then all displays are set to block.

the fold out menu has a presentation as follows:

menu 1 - fold out
menu 2 fold out
menu 3 fold out
menu 4

where the folded out portion is done via a mouseover on menu item 1.

The problem is that the fold out menu is relatively easy to implement
using javascript if we follow the same method used by the collapse
expand, that is to say our markup follows our presentation and the
javascript just toggles the display. This is of course problematic
because a non-javascript enabled browser should then see all the fold
outs at once.

The other solution would be to have the markup follow the structure of
a collapse/expand menu, but to use the javascript to turn the normally
expandable elements into fold out menus. I haven't seen that yet.

Aug 10 '05 #3

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

Similar topics

9
by: Harry | last post by:
I am accumulating over 80 pages per day into an archive that I will need to be able to present sequentially to viewers. Using html to viewing a page, then click on back to return to my archive...
7
by: x muzuo | last post by:
Hi guys, I have got a prob of javascript form validation which just doesnt work with my ASP code. Can any one help me out please. Here is the code: {////<<head> <title>IIBO Submit Page</title>...
13
by: Eric Robinson | last post by:
Hello, My ASP code creates an ADO recordset object on the server. Later on the same page, I have a javascript code snippet that I use to dynamically populate a drop-down box based on choices...
4
by: simon.cigoj | last post by:
I have an javascript made menu and some forms with the dropdown element. When the menu opens and scrolls down the drop down is displeyed over the menu and obscures the menu choices. I have this...
1
by: toby | last post by:
Does anyone have an idea as to why the js does not work on the horizontal drop down menu in IE 6? I have pretty much used exactly what A List had posted in their article titled, "Drop-down Menus...
12
by: tim | last post by:
I am using foldoutmenu 3 and am having problems with viewing my menus in firefox. On my sub3 menus i have more than one line of text in some places. firefox does not recognise that there is more...
4
by: TycoonUK | last post by:
Hi, As I do not have IE7 on my computer, I was wondering if there is a fault in my CSS Menu when using IE7. Please can someone look at my site - http://www.worldofmonopoly.co.uk and tell me...
12
by: lorlarz | last post by:
Unobtrusive JavaScript leads to BUILDERS (e.g. drag drop activity builder) Once you totally remove JS from a web page, and learn the shortcuts and efficiencies provided by a library like...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
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
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

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.