Hide Form <select> Menus In IE From Appearing On Top Of DHTML Layers
Mar 14, 2006
I created this script because <select> form menus in IE on Windows appear on TOP of my DHTML layer navigation menus = client NOT happy and blames YOU. To avoid this crappy situation you can use my script to hide a certain number of the <select> menus when your DHTML layer nav menus are active.
Place this JavaScript in the <head> somewhere.
<script type="text/javascript">
// code to hide/show form menu drop downs ie/win courtesy of www.dreamingdigital.ca
// function should take in the parameter "visible" or "hidden" (the_action)
function dd_hide_show_selects(the_action) {
var dom = (document.getElementById) ? true : false;
var windows = (navigator.userAgent.toLowerCase().indexOf("windows")>-1) ? true : false;
var ie5 = ((navigator.userAgent.toLowerCase().indexOf("msie")>-1) && dom) ? true : false;
var cp_selects = document.getElementsByTagName("select");
var number_to_hide = 0;
var number_needed_hidden = 4; // 4 was the number of selects I needed to hide
if (windows && ie5) {
if (cp_selects.length > number_needed_hidden) {
number_to_hide = number_needed_hidden;
}
else {
number_to_hide = cp_selects.length;
}
for (var i=0; i<number_to_hide; i++) {
cp_selects[i].style.visibility = the_action;
}
}
}
</script>
An example of its use would be:
<a href="somewhere.html" title="Some text to describe the link."
onMouseOver="dd_hide_show_selects('hidden');" onMouseOut="dd_hide_show_selects('visible');">Something</a>
View 5 Replies
ADVERTISEMENT
Feb 11, 2009
I am trying to make a form where the user is only able to select an option from one of the drop down menus and if they click both then submit an error should pop up telling them to select just one. Now I have found this code:
<SCRIPT LANGUAGE="JavaScript"'>
<!--
function validateForm(){[code]....
the first problem is that my menu must be named "id[2]2" which causes a problem due to the bracketed 2 and the 2 after. Is there any way around that?the second problem I forsee is that this will only work with 1 drop down box being unselected. I need a code that will give the warning if nothing is selected OR if something is selected in both drop downs.
View 17 Replies
View Related
Aug 31, 2005
I'm having a hard time with the use of my DHTML menu and video on my
site. The video is served using Windows Media Player. Short of hiding
it, I can't seem to get my DHTML menu to appear above the video.
Unfortunately, I have noticed that hiding the video caused the browser
to flash several times. Does anyone know of anything I can implement
that would minimize the client side impact and also allow my menu to
appear on top of the video?
View 5 Replies
View Related
Aug 20, 2001
I am trying to achieve a simliar look that you get in explorer you know when you click on the + file the content folders are displayed, moving the other folders down? Now I thought that I had seen one in the web reviews page but can't find it and can't find it through searching either.
I have found all the DHMTL menus items and I use menu builder myself, but I want to actually open up the folders see the contents without going horiz into the page but going down.
Hmm not really explaining myself very well here - honestly see explorer that is the effect that I want. How is this acheived DHTML? or what
View 7 Replies
View Related
Apr 16, 2007
Code:
The idea is that the blue help text rechtangle will have to remain
visible when mouse over (because there will be soon links in it) and
invisible when onmouseout.
I have now placed javascript on the small numbered balls and within
the rechtangle itself.
But I have it in a way that when "onmouseout" the blue help rechtangle
will be hidden. But now the onmouseout event is acting like
onmouseover. Any Ideas to do this correctly? So right now when you
onmouseover it it will disappear :S
If I get this working I can start thinking of putting a timeout on the
rechtangle for it to disappear within a couple of seconds after
"onmouseout"
View 3 Replies
View Related
Feb 21, 2004
I'm designing a site that implements popup menus. There are several menus and each one is called by a mouseover event on an image. Each menu is set to show for about 3 seconds, and then it will go away. The only problem I am having is if you roll over two or more different images, both of the popup menus will display. I need some help on showing only one popup at a time. I'm sure it would be something like this...
HTML Code:
i = popup numbers; //which should be either 1 or 0
if (i == 1) {
hide(previous popup);
show(getElementById);
}
else {
show(getElementById);
}
I'm just not sure on how to determine the previous popup. Any suggestions?
View 1 Replies
View Related
Aug 18, 2010
I'm having problems with a Javascript 'Lookup' function.
Basically, I have a select menu 'Customer' which triggers a 3 JS functions, to populate 2 extra select menus.
Using IE Developer Tools, during debugging, I get this error: Expected ';' Error
This relates to either: eval(ajax_CustContact[index].response); OR eval(ajax_CostCentreContact[index].response); (it's a bit random, as sometimes it works, sometimes it doesn't)
I have tried changing the 'custid' to 'custname' to check whether it was an integer causing the problem, but had the same problem.
View 4 Replies
View Related
Dec 24, 2010
This is my first post here. I'm not well versed in JavaScript, so I'm not sure how to do all the following things: (1) set up a horizontal menu with (2) + and - images as bullet points, such that clicking on the bullet points (3) changes + to - and vice versa while (4) a single-level drop down menu makes text disappear and appear.
It should look like this:
---------------------------------------------
[+] Option A [+] Option B
[code]....
View 3 Replies
View Related
Nov 18, 2010
I found on the [url].... tutorials their js code for submenus here: http:[url]..... I've changed some things in the css but I'm afraid to change the js code.I would like my link to hide the submenu on the onmouseout.What is the code to do this and where would it go in my js page? Here is the js code that I've taken from the tutorial if that helps:
var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""[code].....
View 7 Replies
View Related
May 11, 2010
I am trying to show/hide div tag using the script below.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language=javascript type='text/javascript'>
function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.divs[i].visibility = 'visible';
} else {
if (document.getElementById)
divs[i].style.visibility="hidden";
else
if (document.layers) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
} } }
</script>
</head>
<body>
<a href="javascript:showDiv('F256')">Home</a>
<a href="javascript:showDiv('F512')"> About Us</a>
<div id="F2561" style="position: absolute; left:5px; top:54px; background-color: #0093DD; border: 1px none #000000; visibility: hidden">
Home
</div>
<div id="F512" style="position: absolute; left:5px; top:54px; background-color: #0093DD; border: 1px none #000000" >
About Us
</div>
</body>
</html>
When I tested the above, everything works fine. But when I tested it on my real web, it went wrong. The div tag that I want to show after clicking a link disappear rather than displayed, not only that specific div tag, but all of div tags were gone. What I did in principle was trying the script only on the first 2 menus; home and about us. The home div is set to have absolute position and no visibility property being on the landing page. The about us div is set to have absolute position and hidden. When the about us button was clicked the whole div tags disappeared (only showing the flash banner). My main div consists of other sub divs but without id, only classes, could this be the reason?
View 10 Replies
View Related
Aug 2, 2011
Using jQuery, the hide show part is easy. I need to show or hide a single section of a form based on the value of a select box. More specifically, if the select box is one of 30 countries, then show, else hide.
What's the easiest way to handle this?
View 4 Replies
View Related
Aug 9, 2003
I've tested a very good validation script called(fValidate ). Now, I want it to implement into a php-form which has 2 layers. Layers are called with following code:
function showLayer(layer)
{
strHidden = ( !document.layers ) ? "hidden" : "hide";
strVisible = ( !document.layers ) ? "visible" : "show";
if( document.layers ){
lyrForm1 = document.idForm1;
lyrForm2 = document.idForm2;
} else if( document.getElementById ){
lyrForm1 = document.getElementById("idForm1").style;
lyrForm2 = document.getElementById("idForm2").style;
} else if( document.all ){
lyrForm1 = document.all["idForm1"].style;
lyrForm2 = document.all["idForm2"].style;
}
lyrForm1.visibility = (layer == "idForm1") ? strVisible : strHidden;
lyrForm2.visibility = (layer == "idForm2") ? strVisible : strHidden;
return false;
}
[<A HREF="javascript:void(0);" showLayer('idForm1');">page 1</A>]
[<A HREF="javascript:void(0);" showLayer('idForm2');">page 2</A>]
.
When I submit the form, the validation script alerts the first "wrong" field which is on layer 1 (invisible because the submit button is on layer 2). Normally it goes to that wrong field, but instead it submits the form...
Does anyone has any experience with validation of layered forms?
There is also the possibility of making a custom validation function. I could make use of it, but then... how does javascript know on which layer the wrong field is/was...?
View 1 Replies
View Related
Aug 5, 2009
I need to create two drop-down boxes and a GO button for navigation. In one drop-down box the user will choose a city and the other drop-down box will require the user to choose a location. When the user hits the GO button they will go to a Web page based on their choices. Here is the code I am using:
<label>Choose a city</label>
<select>
<option>LA</option>
<option>San Diego</option>
<option>San Jose</option>
</select>
[Code]...
So if the user selects "LA" in the first drop-down menu and then "Airport" in the second drop-down menu and then hits GO, they will be taken to a page that has airport information for LA. Can this be done with JS? If so, how? Remember I'm a newbie at JS and still learning (we all have to start somewhere I guess).
View 11 Replies
View Related
Oct 13, 2001
Have form elements between two background layers (z-index set to -1 and 0). But when I show a layer above the form elements (triggered from a menu drop down list of dynamically produced data from a database table) they all appear above the layer (N4) and the select drop down shows above in the layer (IE). I have set the z-index to 2 for the above layer. Even tried placing the form into a layer and setting the z-index to 1!!
View 2 Replies
View Related
Jul 8, 2004
The following script generates three SELECT menu's... one for days one for months and one for years. Each time a new year or a month is selected the menu's are updated to allow only valid dates. Its only just been finished and could probably use commenting more, but im always open to suggestions, advice and criticism.
View 19 Replies
View Related
Jul 15, 2010
I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it,
<head>
<script type="text/javascript">
lastone='empty';
function showIt(lyr)
[Code]...
View 7 Replies
View Related
Mar 28, 2011
I have 9 select menus that are populated by a php for loop. Each has a numeric value that is displayed base on the selection (which I have working).I can not figure out how to sum all of these values and display them in a <div> tag.what I have thus far:
// Part of a function that creates drop down boxes
<select name="$name" onchange="document.getElementById('cost_$name').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('cost_$name')">
[code]....
View 4 Replies
View Related
Oct 22, 2009
The intention is that when you select a site from the list, the banner underneath changes. However, I can only get it to do this once, then it simply refuses to let you select anything else. This is the code I am using to change it:
function defineimage()
{
if (document.forms[0].gourl.value = "http://jeff.zhomg.com")
{
document.images.linkimage.src = '/images/exchange/jeff.gif'
}
else if (document.forms[0].gourl.value = "http://www.strangedrawingsartgallery.com")
{
[Code]...
View 2 Replies
View Related
Dec 1, 2011
I can't get the form validation and the postioned layers/radio buttons working at the same time is either 1 of the other. I have provided the code html/css/javascript code below [URL]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[code]...
View 5 Replies
View Related
Aug 2, 2011
I am building a jurisdiction calculator for issues on/off Indian reservations. I'd like the user to select 3 variables (radio buttons would also work) - whether the victim is Indian/Non, the perpetrator is Indian/Non, and whether the crime occurred On/Off a reservation and have a div that displays the possible jurisdiction outcomes based on the selections.For instance, if the user selects Victim: Non-Indian, Perp: Indian, Location: On reservation, the possible jurisdiction results would appear.
Here is the basic html breakdown:
<select id="VictimSelector" name="VictimSelector">
<option selected="selected"></option>
<option>Indian</option>
[code]....
View 2 Replies
View Related
Jul 11, 2005
I have purchased the new DHTML Utopia book and I am trying to implement the form validation method that they use in the book, everything is working fine except for my knowledge of regular expressions .
The book uses the example of ^[- ()0-9]+$ to ensure that only numbers are added to a particular form field.
I know this seems like a trivial question but I have googled and not been able to find an answer.
What is a REGEXP that will ensure that I do not get an empty field. That is I want to make a particular field required.
I really like how easy the script is to implement (once I got my head around it) but I'm just struggling with Regular Expressions.
View 2 Replies
View Related
Aug 24, 2005
I have difficulties placing a menu over a select box. Whenever a menu item pops up over a select box, it's not rendered right above the select box. The menu will not appear over select box which splits up into two parts: one part with items above the select box and a second part will all remaining items below the select box.
It works in netscape,but not in "IE".
i hv tried to add the specific z-index, but still fail to display in IE.
some people use <display:none> to make the select box disappear.
However it will look strange if the select box is bigger than the menu.
except this method,
Anyone gets hints?
View 2 Replies
View Related
Oct 21, 2011
I wanted to create a small DHTML code that created a unordered list of input forms dependent on the number selected from the select dropdown menu. Problem is that it doesn't seem to want to generate the list. I think the variables are within the scope of the function too, and I didn't get an errors from the javascript console when using firebug. The script itself runs, I tested it when I used the old standby alert(); to see if the script was active. Here's the code:
[Code]...
View 14 Replies
View Related
Aug 28, 2011
I am creating a form containing two drop down menus. The second drop down changes every time a user change the selection on the first drop down. So, I have this line below:
Code:
<select name="province" id="province" class="mobileform" onchange="changeCities()">
The problem is when a user (in this case me) is using an iPhone's Safari, when he hits "next" button on the first drop down, it does not change the content of the second drop down. But when he hits "previous", then "next" again, the selections get updated afterwards.
In a shorter sentence, the event listener does not work on the first hit, but it works on the second hit. What am I missing here? What steps do I need to add?
View 4 Replies
View Related
Jun 16, 2011
I've seen a variety of implementations around that enable selecting all or no checkboxes by using a checkbox to toggle that choice. However, I'm trying to find a way like this: I have two text links on my page: Select All, and Select None. How can I get those links to call a jquery function to select all or select no checkboxes in my form? As a little food for thought:
<head>
$(function() {
//function for selecting all or none...is there a way to make a single function that passes in a parameter to differentiate between selecting all or selecting none, or do I need a separate function for both?[code]....
View 2 Replies
View Related
Mar 14, 2009
I need to include an interactive drop-down, global menu and a flyout menu. What do each of these look like? i thought they would look the same?
View 1 Replies
View Related
