Hide / Show DIV Tag On Menus?
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
ADVERTISEMENT
Sep 12, 2011
I am trying to hide/show table when hide/show button is pressed
Problem: The code works fine when I remove 'slow' from line 10. But with 'slow' in line 10 content of toggleButton doesnt change from Hide to Show when pressed.
Code:
View 1 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
Sep 21, 2009
I was told to use some Javascript to achieve collapsing menus. This is my current try, but it doesn't seem to be working. The end result should be like the menus on this site: [URL]
This is my code so far:
<HTML><HEAD>
<title>Test</title>
</HEAD><BODY>
<script type="text/javascript">
var hide = 0;
function Show(){
alert("Test");
if ( hide == 0 ){
document.write("<a href=\"county.htm\">County</a>");
hide = 1;
} else {
document.write("");
hide = 0;
}}
</script>
<input type="button" onclick="Show()" value="Services" />
</BODY></HTML>
For some reason, Show isn't being called. The alert doesn't even show up. Though I'm under the impression the script should go above the first time it's used in the document.
View 1 Replies
View Related
Feb 26, 2010
I recently created a website with a spry dropdown navigation bar. On preview from Dreamweaver CS4, in Firefox, IE, Opera, Chrome, all elements work properly and the dropdown menus work as well. However, when I upload it to my server at the domain URl..., the dropdown menus do not show up on rollover. I don't know what is going on. The .js file and .css file are both appropriately linked to the root folders as well.The dropdowns are supposed to be displayed under 'online resources' and 'citing your work'
View 4 Replies
View Related
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
View Related
Mar 3, 2010
I have several switch menus that are VITAL to my website's navigation. They all worked very well when I tested the pages in all browsers. However, I finally FTPed my site to the internet, now when you click a link from a switch menu, instead of staying opened due to the onLoad function in the body, they do not appear.
Strangely, the only way to get my switch menus to show is to refresh the page.
View 5 Replies
View Related
Jul 27, 2010
I have an animated main menu that uses slideDown() to show the sub-menus, triggered by the .hover() event on the parent. There's another animation on the home page that uses jCarousel to rotate the items in a <ul> every three seconds. Whenever a hover event on a parent menu item coincides with the animation trying to load a new frame, the menu freezes until the other animation is loaded. As common as animated menus are these days, I can't believe I'm the only one who has ever come up against this problem.What I want is for the menu animation to take precedence no matter what, but I understand that JS has no "priority" feature (not being multi-threaded)
View 3 Replies
View Related
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
Jan 22, 2009
I am having problems, basically I have a set of nested lists I need to show and hide
Code:
<ul id="smenu3"><ul id="smenu4">
<li>stuff here..</li>
<li>stuff here..</li>
<li>stuff here..</li>
</ul><ul id="smenu5">
[Code]...
I always want "smenu3" to show with "smenu4" and "smenu5" collapsed... When the user clicks the link, it calls a javascript function to show "smenu4" like so...
[Code]...
View 7 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
Aug 11, 2005
I am trying to hide some form elements in a form by default and show/hide
depending on which radio button is clicked. This is what I have but it is
not working: Code:
View 2 Replies
View Related
Sep 6, 2005
I'd like to have a show/hide widget on my web site, kind of like "show
details" / "hide details" in Google Groups. Is there a tutorial
explaining how to make them? Google's is a bit complex and it's easy to
get something wrong. If the browser does not support the required
features, I want it to generate a completely static page with the
"details" shown automatically.
View 3 Replies
View Related
Oct 26, 2009
Check this code:
<a>text</a>
<div id="pkg">pkg</div>
<div id="table_pkg">table_pkg</div>
I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do?
View 3 Replies
View Related
Apr 8, 2009
I am using some simple javascript to show and a hide a div
Code:
function showHide(d) {
if (document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
[Code]...
View 5 Replies
View Related
Feb 12, 2006
i have 5 sections in seperate divs and i am trying to collapse them using anchor onclicks and some js to toggle the display style. I am a little unsure of how to make this piece of code work a little more elegantly(lack of js symantic knowledge). Code:
View 3 Replies
View Related
May 17, 2006
gives me a type mismatch when I try to hide the div using the function hideTip2? Code:
View 3 Replies
View Related
Mar 29, 2010
I have 5 links and 5 divs. When the page loads I've set the visibility of first div to visible and all the rest are hidden. When the user clicks on second link I want to hide all the other divs and show only second. Similarly when the user clicks third link I want to show third div only. You get the idea. Here is what I have so far. Nothing happens when I click the second link.
[Code]...
View 14 Replies
View Related
Jul 20, 2011
Basically, I need a link that gives the user an option to show the rest of an article, and then a link UNDER the rest of the article to hide a post again. The link needs to work uniquely with each link. Every method I've used so far has worked for one post, and on the next post, when the link is clicked, it just shows the rest of the first post.
View 8 Replies
View Related
Jan 28, 2010
I have a javascript that works great in every browser except IE8. In IE8 the rows of links change but this ONLY happens when you open and close the info using the same link.
View 1 Replies
View Related
Jul 2, 2009
ive just got this script ive got set up and it works fine, but not what i expected.i want it so i have headings and when i click those headings sub headings show up and when i click on that heading again they dissapear however i also want it so that you can have multiple headings open at once .how would i be able to modify this code so that if i have say sub1 open and i click to open sub2 sub1 remains open
var persistmenu="yes" "yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" enter "sitewide" for menu to persist across site, "local" for this page only if (document.getElementById){ DynamicDrive.com change[code].....
View 1 Replies
View Related
Jul 23, 2005
I would like to add some javascript to show/hide a certain row of a
table. The first row of the table contain the hyperlink that calls the
javascript the second row is the one i want to show/hide with the
javascript in a toggle fashion.
the problem is a know very little javascript and have become incredibly
frustrated because i went ahead thinking it was going to be like C. its not.
I know i can use these lines to do the actual work:
document.getElementById("row").style.display = "none"; // hides row
document.getElementById("row").style.display = "inline"; // shows row
but I don't think i can use a getElementById exactly because i want to
reference the element via its relationship to the hyperlink that calls
the javascript, i know this can be done. You see there will be several
tables on one page and i want to be able to toggle each one
independently; hopefully with the same bit of javascript.
View 10 Replies
View Related
Jul 11, 2006
i Have a table with two columns and a checkbox above it.
when the box is checked, i like to show the two <TD>s
i have:
<TD ID=1000 style=display=none>APPLE</TD>
<TD ID=1000 style=display=none>ORANGE</TD>
how can i do this with JS ?
i have used getElementById, but it only return one of the ids 񟝘'
View 2 Replies
View Related
Feb 20, 2007
I have a working Show / Hide form, that works on FF, but what I would
like to do is to be able to display one part when a user clicks on one
radio button and display another part when the user clicks on the
second radio button - here is the code which just shows / hides the
whole form:
View 6 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
Jul 20, 2005
I'm using a simple show function, called from a button.
function show(rowId) {
var hideRow = "View_" + rowId
document.getElementById(showRow).style.display ="block";
}
QUESTION: I'm using xsl and can have more than one table row with the
specific rowId, and I want ALL of them to show when the button is
clicked for that rowId. But although the html source is there, I only
get the first row with the rowId.
View 1 Replies
View Related
