Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > unobtrusive javascript to handle drop down/fold out menu

Reply
Thread Tools

unobtrusive javascript to handle drop down/fold out menu

 
 
pantagruel
Guest
Posts: n/a
 
      08-09-2005
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?

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      08-09-2005
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
 
Reply With Quote
 
 
 
 
pantagruel
Guest
Posts: n/a
 
      08-10-2005
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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Javascript Drop Down Menu Issue. Replacing Text of the Menu Ivann Javascript 1 07-22-2008 08:34 PM
Unobtrusive JavaScript leads to BUILDERS (e.g. drag drop activitybuilder) lorlarz Javascript 12 07-09-2008 10:02 AM
Share your views on unobtrusive javascript Animesh K Javascript 23 07-30-2007 10:51 PM
Unobtrusive method for image resizing? Animesh K Javascript 4 07-27-2007 02:54 AM
[ANN] deplate 0.7.1 - A tool for converting documents written inan unobtrusive, wiki-like markup to LaTeX, HTML, "HTML slides", or DocBook Thomas Ruby 0 03-03-2005 06:36 PM



Advertisments
 



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57