JavaScript - Hide/show Menu Error

Hi Chaps,

I have a dynamic list menu:
PHP Code:
    <?php $currentCat = '';       
    $first = true
    ;?>
    <ul>  
        <?php   
        do {       
        if ($currentCat != $row_rsCategory['catname']) {            
        if (!$first) {                 
        echo "\n</ul>\n</li>\n";            
        }            
        $currentCat = $row_rsCategory['catname'];            
        ?>      
            <li><?php echo $row_rsCategory['catname']; ?>       
                <ul>      
                <?php }?>          
                    <li><?php echo $row_rsCategory['galleryname']; ?></li>          
                <?php $first = false;  
                } while ($row_rsCategory = mysql_fetch_assoc($rsCategory));  
                ?>   
                </ul>   
            </li>   
    </ul>

I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated!

Hello everyone,

I am trying to figure a solution to this CSS/JavaScript navigation menu. I have a couple of different classes set out for each level of the menu, which there are 4 levels max. The first level has a class for it called 'pMenuMain'. The second and third have names 'pMenu2' and 'pMenu3'. The 4th level is found by its <a> tags, because all of those are links.

This is the JavaScript I need to change somehow:

Code:

<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout    = 1000;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('.pMenu2').hover(jsddm_open, jsddm_timer)
   $('.pMenu > li > ul').hover(jsddm_open, jsddm_timer)});

document.onclick = jsddm_close;
</script>

Now this is the CSS style sheet:

Code:

/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
    padding-bottom:53%;
    padding-left:21%;
}

.pMenu {
    margin:0;
    padding:0;
    list-style:none;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li{
    width:100%;
    display:inline-block;
}
ul.pMenu ul ul li{
    width:100%;
    display:inline-block;
}
ul.pMenu ul ul ul li{
    width:100%;
    display:inline-block;
}

/*begin main list attributes*/
ul.pMenu > li:hover{
    background:#F00;
    border:.33em ridge #C90;
    color:#FF0;
}

ul.pMenu > li{
    float:left;
    list-style:none;
	margin-right:1%;
	display:block;
    color:#FFF;
    background:#900;
    border:.33em ridge #C30;
    text-decoration:none;
}

.pMenuMain{
    text-shadow:1px 1px 1px #000;
    white-space:nowrap;
    padding-top:.7em;
    padding-bottom:.7em;
	text-align:center;
}

/*first sub-list*/
ul.pMenu li li{
	margin-right:0;
}

ul.pMenu ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

.pMenu2{
	background:#CCC;
	border:.25em outset #999;
	width:10em;
	font-size:12px;
	padding-top:.5em;
	padding-bottom:.5em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}

.pMenu2:hover{
    background:#999;
    border:.25em inset #666;
    text-decoration:blink;
}

/*second sub-list*/
ul.pMenu ul ul{
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    display:none;
}

.pMenu3{
	background:#999;
	border:.25em outset #666;
	width:13em;
	font-size:11px;
	padding-top:.35em;
	padding-bottom:.35em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}
ul.pMenu ul ul li {
    float:none;
    display:inline;
}

ul.pMenu ul ul li a {
    width:auto;
    background:#999;
    border:.15em outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}

ul.pMenu ul ul a:hover {
    background:#999;
    border:.15em inset #666;
    text-decoration:blink;
}

/*third sub-list*/
ul.pMenu ul ul ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

ul.pMenu ul ul ul li {
    float:none;
    display:inline;
}

ul.pMenu ul ul li a {
    width:auto;
    background:#999;
    border:1% outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}

ul.pMenu ul ul li a:hover {
    background:#999;
    border:1% inset #666;
    text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/*****************/

This is how it's set up in HTML:

Code:

<!-- begin Personal navigation menu -->
<div class="pWrapper">
	<ul class="pMenu">
		<li style="width:10%;"><div class="pMenuMain">health</div>
    		<ul style="left:18em;">
        		<li><div class="pMenu2">weight loss</div>
            		<ul>
               		  <li><div class="pMenu3">fitness</div>
                			<ul>
                       		  <li><a href="#">under construction</a></li>
                        	</ul>
                    	</li>
                    	<li><div class="pMenu3">dieting</div>
                    		<ul>
                       		  <li><a href="#">under construction</a></li>
                        	</ul>
                    	</li>
            		</ul>
            	</li>   
            	<li><div class="pMenu2">skin care</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
        	</ul>
    	</li>
	</ul>

	<ul class="pMenu">
		<li style="width:14%;"><div class="pMenuMain">insurance</div>
    		<ul>
        		<li><div class="pMenu2">property insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">auto insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">health insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">annuities</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
       	   </ul>
   	   </li>
	</ul>

	<ul class="pMenu">
		<li style="width:11.3%;"><div class="pMenuMain">general</div>
    		<ul>
        		<li><div class="pMenu2">electronics</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">style &amp; fashion</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">food/dining</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">cars/auto</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
       		</ul>
   	    </li>
	</ul>
                   
	<ul class="pMenu">
		<li style="width:10%;"><div class="pMenuMain">dating</div>
    		<ul>
        		<li><a href="#">RealMatureSingles</a></li>
            	<li><a href="#">SeniorPeopleMeet</a></li>
        	</ul>
    	</li>
	</ul>

	<ul class="pMenu">
		<li style="width:13.8%;"><div class="pMenuMain">education</div>
    		<ul>
        		<li><div class="pMenu2"><a href="#">under construction</a></div></li>
        	</ul>
    	</li>
	</ul>                    	
</div>
	<!-- end Personal navigation menu-->

I know that I will receive critique for the HTML I created for this. The reason I am going this route is that a drop down menu with a list full of <a href="#"> can be clicked, resetting the menu. This is a flaw in functionality.

Trying to get the divs to switch style properties when selected form select menu. Any help would be great!

Code:

<script type="text/javascript">
function showstuff(element){
        if(document.getElementById(element).style.display = 'block')
                  {
                        document.getElementById(have).style.visibility="block";
                        document.getElementById(look).style.visibility="none";
                  }
        else if(document.getElementById(element).style.visibility = 'block')
                  {
                        document.getElementById(look).style.visibility="block";
                        document.getElementById(have).style.visibility="none";
                  }
}
</script>

<select name="type" onchange="showstuff(this.value);">
          <option value="look">Look</option>
          <option value="have">Have</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div>

Code:

<html>
<title> random!!</title>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="one" style="cursor: pointer;">
type1<br/><br/></div><div class="two" style="cursor: pointer;">type2<br/><br/></div><div class="three" style="cursor: pointer;">type3<br/><br/></div>
<div class="oneone">atrdjgkhgfyfygfykfyfkygfvkgvkhgv</div><div class="twotwo">hgfihygohgohsgoihgolhgshgoshdgchchj</div><div class="threethree">siucgdiuhsbcohbscjbsidjcksjdnck</div>

<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('div.twotwo').hide();
$('div.threethree').hide(); 
$('div.one').toggle(function() 
{
$('div.twotwo').hide();
$('div.threethree').hide();
$('div.oneone').fadeIn('slow'); 
}, function() 
{ 
return false; 
}); 

$('div.two').toggle(function() 
{
$('div.oneone').hide();
$('div.threethree').hide();
$('div.twotwo').fadeIn('slow'); 
}, function() 
{ 
return false; 
}); 

$('div.three').toggle(function() 
{
$('div.twotwo').hide();
$('div.oneone').hide();
$('div.threethree').fadeIn('slow'); 
}, function() 
{ 
return false; 
}); 
});
</script>
</body>
</html>

The following code works perfectly when clicked once in each of the sub divisions(type1, type2, type3) for hide/show. But from the next time onwards we will have to click twice to initiate the hide/show. Can anyone suggest changes to make the code work as desired??.. P.S: sorry if i have made any stupid mistake.. i am quite new to this!!

I am using javascript that will show/hide a DIV if a link is clicked. In the DIV is a form.

When the user input's form info, and the form is processed, if there is an error the page reloads displaying the error. However, the user must click the link again to see the form and correct their mistake. Is there a way to keep the div shown on reload?

Thanks!

Code:

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("show");
	var text = document.getElementById("add");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "Hide";
	}
} 
</script>

Hi guys, im new to forums and need some help with my website.
I have embed a flash player known as: JW player into my website and put it into a div.
Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif.
How would I set this up?
Im not to familiar about using javascript so im not sure if its even possible.
Anways thx for any help ore suggestions related to this subject.

Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link...

<script type="text/javascript">
function show(){
document.getElementById(test).style.display="block";
}

</script>

<div id="test" style="display:none;">
<p>Some text</p>
</div>


<a href="#" onclick="show(); return false;">Show</a>

Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome

I have a script to show and hide various divs based on a function & var.

The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want.

here is the JS:

Code:

function sitesurveyswitch(emotion) {

	var e = emotion;

	document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px';
	document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px';
	document.getElementById('FeedbackHate').style.display = 'none';
	document.getElementById('FeedbackOk').style.display = 'none';
	document.getElementById('FeedbackLove').style.display = 'none';
		
	if (e == 'hate')
		document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackHate').style.display = 'block';
	if (e == 'ok')
		document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackOk').style.display = 'block';
	if (e == 'love')
		document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px';
		document.getElementById('FeedbackLove').style.display = 'block';
}

and here is the code related to this function:

Code:

<div id="siteSurveyBox">
				<span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span>
				<span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span>
				<span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span>
			</div>
			
			<div id="FeedbackHate" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackOk" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>
			
			<div id="FeedbackLove" style="display:none; margin-top:-28px;">
				FEEDBACK FORM IS HERE
			</div>

ok trying to get a Div tag to show if something is True and hide if something is False

JS
Code:

unction eToggle(anctag,darg) 
{
 var ele = document.getElementById('Module1');
   var ele = document.getElementById('Module2');
   var ele = document.getElementById('Module3');
   var ele = document.getElementById('Module4');

  
  if("module1" + "module2" + "module3" + "module4" <40)
  {
    div.id.Failed = "block";
	div.Failed = "Failed";
  }
  else 
  {
	div.style.Passed = "block";
	div.Passed = "show";
  }
}

HTML
Code:

<div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b>
<br  />
</div>

<div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div>

Hello,

I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management".

Does anyone know how I resolve ?.

The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link.




------------


Have placed code in attachment as too long for this section

Code:

<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var noticecontent = document.getElementsByTagName("div");
for(var x=1; x < noticecontent.length; x++) {
name = noticecontent[x].getAttribute("name");
if (name == 'noticecontent') {
if (noticecontent[x].id == thechosenone) {
noticecontent[x].style.display = 'block';
}
else {
noticecontent[x].style.display = 'none';
}
}
}
}
</script>

</head>
<body>
<center>
<div id="parentdiv">
<div id="expandall">OPEN/CLOSE ALL</div>
<div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div>
<div id="noticecontent1" name="noticecontent"  class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div>
<div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div>
<div id="noticecontent2" name="noticecontent"  class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div>
<div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div>
<div id="noticecontent3" name="noticecontent"  class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div>
</div>
</center>
</body>
</html>

can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs

I don't know a lot about Javascript... still learning..
I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code:
Code:

<script type="text/javascript" >

function showSample() {
	
  if (document.getElementById('input').value='SW001') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW002') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='block';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  else if (document.getElementById('input').value='SW003') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='block';
    document.getElementById('SW004').style.display='none';

  }
    else if (document.getElementById('input').value='SW004') {
	document.getElementById('SW001').style.display='block';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='none';

  }
  
    else if (document.getElementById('input').value='SW005') {
	document.getElementById('SW001').style.display='none';
    document.getElementById('SW002').style.display='none';
    document.getElementById('SW003').style.display='none';
    document.getElementById('SW004').style.display='block';

  }

}

</script>


<style type="text/css">
<!--
#main {
	width: 400px;
	margin-right: auto;
	margin-left: auto;
	height: 125px;
}
#imageArea {
	float: right;
	width: 200px;
}
#formArea {
	float: left;
	width: 200px;
	height: 125px;
}
.image {
	height: 125px;
	width: 125px;
	margin-right: auto;
	margin-left: auto;
	display: none;
}
#SW001 {
	background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center;
}
#SW002 {
	background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center;
}
#SW003 {
	background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center;
}
#SW004 {
	background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center;
}
#SW005 {
	background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center;
}
-->
</style>
</head>

<body>
<div id="main">
  <div id="imageArea">
    <div class="image" id="SW001"></div>
    <div class="image" id="SW002"></div>
    <div class="image" id="SW003"></div>
    <div class="image" id="SW004"></div>
    <div class="image" id="SW005"></div>
  </div>
  
  <div id="formArea">
    <form action="" method="get">
      
      
      <input  type='text' name="input" id='input' />
      <input name="" type="button" onclick="showSample(this.selectedIndex)"/>
      
      
    </form>
  </div>
</div>
</body>
</html>

Any help would be greatly appreciated!

Hi all,

Check this code:
PHP 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?

Thank you very much

this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html

using this code: http://www.linkstraffic.net/programm...nd/movediv.php

heres my code. can someone fix it?

html:

[CODE]

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chris MacDonald - Javascript Assignment 2</title>

<link href="styles/styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="java.js"></script>

<div id="header">
<div id="logo"><img src="images/beat.png" /></div>
</div>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li>
<li><a href="#">About Us</a></li>
</ul>

</head>

<body>

<div id="content">

<a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a>

<div id="coverlogin">

<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<br/>

<p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p>
</div>

</div>
</div>


<div id="footer">
<div id="footertext">Beat Threads - 2010</div>
</div>





</body>
</html>
[CODE]

javascript:

// JavaScript Document

var hh=0;
var interv;

//we show the box by setting the visibility of the element and incrementing the height smoothly
function ShowBox()
{

//Depending on the amount of text, set the maximum height here in pixels
if(hh==40)
{
clearInterval(interv);
return;
}

obj = document.getElementById("coverlogin");
obj.style.visibility = 'visible';
hh+=2;
obj.style.height = hh + 'px';
}

function HideBox()
{
obj = document.getElementById("coverlogin");

if(hh==2)
{
obj.style.visibility = 'hidden';
obj.style.height = '0.1em';
clearInterval(interv);
return;
}
hh-=2;
obj.style.height = hh + 'px';
}

[CODE]

Can someone fix this for me?

Hi Guys!
I found one great solution for show/hide JQuery but i can't figure out how to make JS,css and html code all together, so please if anybody can make that code together for me and post me here!

-Thanks in advance!!!

here is code with example:

http://jsfiddle.net/9XmVT/14/