Unobtrusive Javascript To Handle Drop Down/fold Out Menu

Aug 9, 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?

View 2 Replies


ADVERTISEMENT

Best Practice For Unobtrusive Javascript

Oct 16, 2007

I have been going back and getting rid of so many of my onclick's and such, trying to switch to a more unobtrusive method of adding events to anchors.

I've run into one snag that's kind of dissonant for me, and wondered if anyone had any advice.

By adding an event, you can turn:

<a href="#" onclick="something(); return false;>Click me</a>

Into:

<a href="new.html" class="something">Click Me</a>

But what goes in href if you don't have anything to actually link to? One example is a page I've written that is entirely self-contained, and all href's that drive the interface end up pointing to #. Is this acceptible in edge cases like these with the unobtrusive approach?

If someone has JS turned off the markup is essentially meaningless, so I was wondering how people deal with this lapse in the separation between behavior and structure.

View 2 Replies View Related

Drop Down Menu With Javascript

Aug 14, 2006

i need to design a site with a lot of pages and i need to use drop down menu using javascript to make navigation easier. pls anyone got the code or a tutorial for me to learn from.

say i got a text link called About Us and i want drop downs under it like

About Us
Mission Statement
Staff
Vision
Objectives

View 1 Replies View Related

Cache Javascript/Drop Down Menu Contents

Aug 27, 2007

I have a 3 drop down menus used in a form. Depending on what the selection is of the 1st drop down menu, the contents of the the 2nd and 3rd drop down menu can change.

I have all the contents of the drops down menus stored in an array in an external .js file. That way I can manage the content better and upload new .js files whenever I need to.

Since the contents of the .js file can change frequently, my question is how can I ensure that people using the form are always accessing the most up to date .js file without having them to refresh the page?

View 3 Replies View Related

Recommend A Good Javascript Drop Down Menu?

Jun 6, 2005

Can anyone recommend a good javascript drop-down menu?

I am searching for one with these features:
- can easily be used for horizontal and vertical menus;
- is search engine friendly (not mandatory);
- resizes properly when increasing/decreasing browser text sizes;

There are so many choices, and so little time, so if you know of any great ones that are free or affordable, please let me know.

View 3 Replies View Related

How To Find Below Fold

Jun 22, 2011

I have around 100 item details in a page...i want to show it only 18 item details on page load. and the remaining items needs to be displayed only when user scrolls down the page to end. how to find out below fold in javascript?

View 1 Replies View Related

Looking For "good" Javascript Drop Down Menu

Apr 2, 2004

I know there are tons of them floating around, but as with all products, some are better then others. Anyone recommend a good drop down menu that I can use on a site that is "almost" standards compliant, so basically, the less bulky code the better.

Sorry, mean to add, this is to be used on an image as the link. We have 5 tabbed looking images so its something like this

<a href="#"><img src="blah.jpg" alt="Blah image" /></a>

View 7 Replies View Related

JQuery :: Superfish Drop Down Menu - Drop Down Menus Seem To Flash On Screen For Just A Second And Then Disappear?

Nov 4, 2011

i'm having with a superfish menu i have tried to add to my wordpress site.The menu seems to work fine for the base-level (top parent pages) menu items.But the drop down menus seem to flash on screen for just a second and then disappear when the mouse hovers over the menu items.To see an example, please check out the top menu on this temporary development page: http:[url].....I have tried adjusting the z-index in superfish.css file but it doesn't seem to be having any effect.

View 1 Replies View Related

Double-Drop Down Menu - Only Allows One Drop To Be Expanded At A Time

May 1, 2011

I currently have a Drop-Down menu, which has headers you click on to show the links. This menu only allows one drop to be expanded at a time, and can be viewed here [url].

I would like the headers to be able to have 'sub-headers' inside, which also drop-down,to reveal the links. I want them to have a different header colour, and to have the same rule where only one can be open at a time. while keeping the rule with the main headers.

View 5 Replies View Related

JQuery :: SlideToggle Open One Of Two Hidden Sub-nav Bars When Either Of Two Different Menu Items Are Clicked Upon - Instead Of A Drop Down Menu

Oct 26, 2009

The purpose of the code is to slideToggle open one of two hidden sub-nav bars when either of two different menu items are clicked upon - instead of a drop down menu. What doesn't work is the hiding of the div that is not required, if it is already open. Viewing in firebug shows that the appropriate classes are being applied - I suspect the reason is that slideToggle has been somehow set and cannot be unset via another object - but perhaps that is not it at all?

$(document).ready(function() {
//add .toggle function to appropriate li element
$('#hozmenu li:nth-child(4)').toggle(function () {
//set 4th menu links colour to be green whilst div is shown
$('#hozmenu li:nth-child(4) a').css('color', '#95d890');
$('#toggle_nav_services').removeClass('toggle_show');
[Code]....

View 1 Replies View Related

Dropdown Submenu - Make A Horizontal Drop Down Menu With A Sub Menu ?

Nov 3, 2009

I actually want to make a horizontal drop down menu with a sub menu.As far as I have researched, I think that it can be done by JavaScript. I have searched for some java scripts but they are very long and complex.

That made me wonder that for a funcitonality like a Drop down is so complex?

So here is my question : Is there any JavaScript that can be applied for drop down menu exclusively? Which just presents logic of drop down solely?

View 3 Replies View Related

Drop Down Menu - Over The Sub Menu The Background Image Of The Top Item Disappears

Feb 11, 2011

I'm building a drop down menu like [URL] or [URL] or [URL] the effect I'm trying to achieve is to have the top menu item showing a background image via css and create a stylized design with the sub-menu. Using CSS when I hover over the sub menu the background image of the top item disappears. So I'd like some guidance with javascript on how to keep the back-image while hovering on the sub menu.

View 1 Replies View Related

Jquery :: Sub Menu Animation - Add A Nested Menu To The Drop Down

Dec 5, 2010

, I'd like to think this is fairly simple but unfortunately my knowldege of jquery is limited to using prebuilt scripts and changing a few variables to get what i need. I created a drop down menu with a slide down/up animation for submenus, which worked out just as I wanted. I ran into troubles though when trying to add a nested menu to the drop down, but with a slide animation going from left to right. I'm sure my explanation isn't very clear, so please take a look [URL] The nested submenu I am speaking of should only open when hovering occurs on the 'Item 01' link, but as you can see it also opens when hovering over the buyers link. Secondly, my attempt to slide from left to right on this ul is not working, it seems to be sliding down even though this was not defined in the code.

View 1 Replies View Related

Form Box Menu - Force The Drop Down Menu

Dec 5, 2006

If you double click on a empty form box a drop down menu will appear .

But if the form box has text content - then double clicking on the form
box has no effect and a drop down menu doesnt appear .

Or at least it doesnt in IE v7 .

A google search only really brought up the usual beginner type of form
tutorials .

onDblClick=whatever()

I assume i'm looking for a line like the above that i can add to the
<inputtag - or some other suitable piece of javascript to do the job.

View 2 Replies View Related

JQuery :: Drop Up Instead Of Drop Down Menu?

Nov 15, 2011

how can a menu like the image attached

1 - drop up instead of drop down

2 - all with same and fixed height

3 - possible mult levels

Attachments
menu.jpg
Size : 29.72 KB
Download : 165

View 1 Replies View Related

Turning Drop-down Menu Into Drop-up (or Both)?

Feb 1, 2010

I'm currently redesigning my site, and I have a small quandary.[URL].. Unfortunately, not everyone has the same size monitor as me, therefore sometimes the drop-down menus get cut off. Is there a way with this script for it to auto-detect if it's going past the bottom edge, and when this happens it'll go upwards instead?

View 1 Replies View Related

Drop Drop Menu With Other Option?

Jan 4, 2011

I am looking to put a drop down menu in my for i have the drop down set up but i am not sure how to do the make hidden text field pop up when "Other" is selected. I am guessing you use javascript to make this happen

HTML Code:
<td><select name="actionrequest" onchange="Select(this,'budget',1);">
<option value="Calibration">Calibration</option>
<option value="calibration and repair">Calibration and Repair</option>
<option value="repair">Repair</option>

[Code]...

View 12 Replies View Related

JQuery :: Drop Down Slide Menu And A Parralex Slide Gallery - Submenu Of The Slide Down Menu Does Not Work

Feb 2, 2011

I'm having a little trouble with 2 differentJS scripts. I have a drop down slide menu and a parralex slide gallery. Both work on separate pages and puton the same page they still work however the submenu of the slide down menu does not. if I remove the style sheet that belongs to the gallery

Then the munu works, however (obviously) the page layout goes wrong. if i remove<h1 class="title">Alex Holland Perspective</h1> the menu works however page layout goes wrong andI loose my header

Here is the code.

View 4 Replies View Related

Unobtrusive Over / Down / Click

Jan 24, 2007

Is it possible to write this as and unobtrusive script in the head of a document?
This is a really long piece of code for being in the html!

<a href="whatever" onmouseover="document.images['s3a'].src='hover.gif'" onmouseout="document.images['s3a'].src='root.gif'" onmousedown="document.images['s3a'].src='active.gif'" onmouseup="document.images['s3a'].src='hover.gif'"><img src="root.gif" name="s3a" height="50" width="50" alt="" border="0"></a>

View 2 Replies View Related

Drop Down Menu Gen

Dec 28, 2006

i donot know javascript at all but i know how to use it yesterday i open the javascriptsource.com and i found script menugen in it there are only 30 option of drop down menu but i want more than 100 what i do now Please?:(

View 1 Replies View Related

Move Value "Saleman" From Drop-menu 1 And Value "Billy" From Drop-down 2 To A List Box?

Oct 26, 2009

I'm completely new to javascript. I want to use dreamweaver with javascript to do a litter project in which I want to move value "Saleman" from drop-menu 1 and value "Billy" from drop-down 2 to a list box. The result should be as follows:

dropdown 1
Manager
Salesman (to be selected)
Cleaner

[Code]....

View 1 Replies View Related

Unobtrusive Script With Parameters?

Nov 12, 2009

I have a PHP page that dynamically generates table rows with input fields. A sample row looks like:

Code:
<tr id="row1">
<td><input type="button" name="remove_row1" id="remove_row1" value="X" /></td>
</tr>

I have a JavaScript function that I am attempting to attach to each of the input buttons:

Code:
// get all the input elements
var inputs = document.getElementsByTagName('input');
var delete_regex = new RegExp('remove_row');[code]...

But I would like to give it a parameter

Code: inputs[i].onclick = delete_row('row' + inputs[i].id.replace('remove_row', ''));

But doing the above just executes the function. What is the best way to do this?

View 2 Replies View Related

Unobtrusive Fixed DIV For All Browsers

Mar 3, 2010

First off by let me stating that I am not a great web devloper nor am I a good with css / javascript. I am creating this website for a friend of mines company and I have one problem.The problem is that the navigation menu on the right side will not remain fixed how i want it to be. I spoke with many people and they all said that this cannot be done with css considering your layout and because it needs to dodge the headers and the footer. I basically want this div (sidenav on the right) to scroll along the page as users scroll up or down but it can not interfere with the header or footer. I do not want the right side navigation to go over the content or out of the wrapper. I want it to stay in the same position in all aspects - left / right / top / bottom. Here is a link to the site [URL].

View 2 Replies View Related

Rebuild Drop-down Menu ....

Oct 5, 2005

I have 2 drop-down menus (1) States (2) Shows By State. My question is how
do I invoke a re-build of the Shows By State drop-down when the user
requests a different state. I believe this has to be done with Javascript
and I don't know Javascript. Could someone supply a small example of how
this is done?

I am using PHP and MySQL. Following is the PHP code for building the state
drop-down menu:

<tr><td bgcolor="#EFC891" width="496" align="left"><b>Select a Show in Your
State:&nbsp;&nbsp;

<select name="ShowState" >
<?php
$stateName=getStateName();
$stateCode=getStateCode();
for ($n=1;$n<=50;$n++)
{
$state=$stateName[$n];
$scode=$stateCode[$n];
echo "<option value='$scode'";
if ($scode== $searchState)
echo " selected";
echo ">$state
";
}
?>
</select>

View 1 Replies View Related

Drop Down Menu Not Working In IE?

Jun 28, 2009

I have a drop down menu on this web site: [URL] the drop down is at the bottom I got the drop down from this site: [URL]

The drop down works in every browser on Mac and PC platforms except for IE.

View 2 Replies View Related

Drop Down Menu - Only Select Each Value Once?

Jan 6, 2011

Tried searching for this, but can only find js events to remove an item completely from a drop down box once it's been selected. Example: On a page with many fields for entering different DNS server addresses, I have a drop down menu next to each field, and the values are "Main DNS", "Alternative DNS", "Third DNS", "Least Favorable". Since there can only be one main DNS server chosen, I'd like to know if it's possible for js to prevent that choice from being used more than once. Say there is a Main DNS selected, but the user changes his/her mind and wants a different one. When he selects a second "Main DNS", the first item will return to the drop-down default choice (most likely blank). As stated before, I'll gladly accept a link describing this (or even the proper term to use for a google search).

View 14 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved