JavaScript - Show/hide Multiple Layers - Need Help

So I am trying to hide content and show it when selected with a select box. The first select box works fine no problems.

However I added a second one with two options, and it will not work at all. If I use the same name it messes up, and if I make a new name, it does nothing at all.

ShowNext function is the new one I added that doesn't work.

PHP Code:
<script type="text/javascript">

function ShowReg(op) {
  document.getElementById('public').style.display='none';
  document.getElementById('alliance').style.display='none';

  switch (op) {
    case 1 : document.getElementById('public').style.display="block"; break;
    case 2 : document.getElementById('alliance').style.display="block"; break;

    default : break;
  }
}

function ShowNext(op) {
  document.getElementById('randomwin').style.display='none';
  document.getElementById('setentry').style.display='none';
  document.getElementById('highestlevel').style.display='none';
  document.getElementById('question').style.display='none';


  switch (op) {
    case 1 : document.getElementById('randomwin').style.display="block"; break;
    case 2 : document.getElementById('setentry').style.display="block"; break;
    case 3 : document.getElementById('highestlevel').style.display="block"; break;
    case 4 : document.getElementById('question').style.display="block"; break;


    default : break;
  }
}
</script> 


PHP Code:
<tr><td><b>Privacy:</b></td><td>
        <select name="privacy" id="choice" onChange="ShowReg(this.selectedIndex)">
       <option value="error">Select One</option>
       <option value="public">Public</option>
        <option value="alliance">Alliance Only</option>
        </select>
        </td></tr></table><br />
        
<div id="public" style="display:none">
<p><b>Contest will be made Public for all players to use.</b>
</div>
<div id="alliance" style="display:none">
  <p><b>Contest will be made available to only alliance members.</b>
</div>


<tr><td><b>Type:</b></td><td>
        <select name="contype" id="choice" onChange="ShowNext(this.selectedIndex)">
        <option value="error">Select One</option>
        <option value="randomwin">Random Draw</option>
        <option value="setentry">Marked Entry</option>
        <option value="highestlevel">Highest Level</option>
        <option value="question">Answer Question</option>
        </select></td></tr></table><br />

<div id="randomwin" style="display:none">
<p>Random draw selected
</div>

<div id="winner" style="display:none">
<p>Select Entry number to auto win:
<select name="entrypick">
<option value="5">Entry 5</option>
<option value="6">Entry 6</option>
<option value="7">Entry 7</option>
<option value="8">Entry 8</option>
<option value="9">Entry 9</option>
<option value="10">Entry 10</option>
<option value="11">Entry 11</option>
<option value="12">Entry 12</option>
<option value="13">Entry 13</option>
<option value="14">Entry 14</option>
<option value="15">Entry 15</option>
<option value="16">Entry 16</option>
<option value="17">Entry 17</option>
<option value="18">Entry 18</option>
<option value="19">Entry 19</option>
<option value="20">Entry 20</option>
<option value="21">Entry 21</option>
<option value="22">Entry 22</option>
<option value="23">Entry 23</option>
<option value="24">Entry 24</option>
<option value="25">Entry 25</option>
<option value="26">Entry 26</option>
<option value="27">Entry 27</option>
<option value="28">Entry 28</option>
<option value="29">Entry 29</option>
<option value="30">Entry 30</option>
</select>
</div> 

Hi, I am new to javascript so any help would be much appreciated.

I found the following script online to show/hide a login div.

<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden";
}
}
</script>

It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide.

I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy.

Thanks, James

I am using the following code to show / hide form elements within a div based upon the drop down choice.

Does anyone know how this code can be amended to use multiple drop downs within one form?

Code:

<html>
<head>
<title>Show and Hide</title>

<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
	var div = document.getElementById(divID);
	div.style.display = ""; //display div
}

//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
	var div = document.getElementById(divID);
	div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
	//Loop through the seclect menu values and hide all
	var selectMenu = document.getElementById("selectMenu");
	for (var i=0; i<=selectMenu.options.length -1; i++)
	{
		hideDiv(selectMenu.options[i].value);
	}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
	hideAllDivs(); // Hide all
	showDiv(showID); // Show the one we asked for

}


</script>
</head>
<body onload="hideAllDivs();">

<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>

</select>

<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>

<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>

<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>

<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>


</body>
</html>

Thanks in advance!

Hi to All,

I have a table that contains many rows,
some in italian with code <td nome='riga_i'>
and some in english with code <td name='row_e'>.
I have created two buttons with different background flags: italy and uk,
so when one pushes the button with flag uk, the html page will be reloaded with only english rows,
and when one pushes the button with flag it, the same page is reloaded containing only italian rows.
All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this.

Here the code:

<html>
<head>
<script type="text/javascript">
function toggle(name) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(name)){
if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
//
function toggle(nome) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(nome)){
if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
</script>
</head>

<body onload="toggle('name');">
<table>
<tr nome="riga_i">
<td>REQUISITI RELATVI AL SERVIZIO</td>
<td> </td>
<td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr>
<tr name="row_e">
<td> </td>
<td>REQUIREMENTS RELATED TO THE SERVICE</td>
<td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr>
....
.... and so on....
.....
</table></html>


To better the code I have tried in this way but without success ...

<html>
<head>
<script type="text/javascript">
function toggle(this) {
if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
}
</script>
</head>


Thanks in advance !!!

Hi. I'm writing a script that graphs data in different colors and shapes and I'm encountering two problems:

(1) I can't specify different colors for the graph I'm rendering. If I use fillStyle="red"; then the entire chart becomes red. It seems to use the last color specified as the color for everything on the chart.

(2) The shapes are overlapping in strange ways. The fills are not covering the lines of shapes behind them so it's unclear which shape is in front and which is behind. It's like they aren't being treated as separate shapes but instead one shape where boundaries are unclear. I don't know how else to explain it.

I'm hoping there is some way to put each shape in its own layer. Would I have to use DIV IDs for that or is there a way to keep it all in the script so it's more scalable?

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

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!

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, 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>

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

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>

Hi there, I have a site which consists of the html page and css page. I have been trying to get the image at the top of the page to dissapear when the user clicks on the footer. Any suggestions on how I can do this? Below is my code, Thanks in advance.


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">

body {
background-color: #CC6;
}

</style></head>
<body>

<div id="header-wrap">
<div id="header-container">
<div id="header">
<h1>JavaScript</h1>
</div>
</div>
</div>
<div id="ie6-container-wrap">
<div id="container">
<DIV STYLE="font-size:12pt" onmouseover="this.style.fontSize='16pt'"
onmouseout="this.style.fontSize='12pt'">
<div id="content">
<h1>Mainframe</h1>
<p>Enter the content of your website within this area.</p>
</div></DIV>
</div>
</div>
<div id="footer-wrap">
<div id="footer-container">
<div id="footer">

<center>

<body onLoad="dateandtime()">


<script>



var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var cdate="<small><font color='#87ac6d' font size='2.5' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else
document.write(cdate)
}
if (!document.all)
getthedate()
function dateandtime(){
if (document.all)
setInterval("getthedate()",1000)
}

</script>
<span id="clock"></span>
</center>
</div>
</div>
</div>
</body>
</html>


CSS:
body {
font: 62.5% Arial, Helvetica, sans-serif;
color: #597347;
margin: 0;
padding: 0;
background: #beffbf;
}

h1, h2 {
color: #87ac6d;
font-family: Tahoma, Arial, Geneva, sans-serif;
margin: 20px 0 10px;
}

h1 {
font-size: 2.5em;
}

p {
margin: 10px 0;
padding: 0;
}

blockquote {
font-style: italic;
}

#header-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

#header-container {
height: 90px;
background: url(../images/banner.jpg) repeat-x left bottom;
}

#header {
width: 940px;
margin: 0 auto;
position: relative;
}

#header h1 {
color: #beffbf;
text-align: right;
width: 290px;
margin: 0;
position: absolute;
left: 476px;
top: 32px;
}

#header h1 em{
color: #90b874;
font-size: small;
display: block;
}

#header ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 35px;
right: 0;
}

#header ul li {
float: left;
margin-right: 5px;
}

#header ul li a{
color: #90b874;
font-weight: bold;
font-size: 1.4em;
margin-right: 5px;
text-decoration: none;
}

#header ul li a:hover {
color: #beffbf;
}

#container {
width: 940px;
margin: 0 auto;
font-size: 1.4em;
overflow: auto;
padding: 90px 0 40px;
}

#content {
float: left;
width: 100%;
}

#sidebar {
float: right;
width: 275px;
margin-top: 10px;
}

#footer-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

#footer-container {
height: 40px;
background-color: #000;
}

#footer {
width: 940px;
margin: 0 auto;
position: relative;
}