Menu
I am looking for js to toggle divs on and off. i want only one div to display at a time. here is what i have:
[CODE]// Swap
var lastDiv = 0;
function swap(num) {
//show div
document.getElementById(“swap”+num).style.display = ‘block’;
//hide old div, set new old div
document.getElementById(“swap”+ lastDiv).style.display = ‘none’;
lastDiv = num;
}
and
[CODE]<div style=”cursor:pointer” onClick=”swap(0)”>Save</div>
<div style=”cursor:pointer” onClick=”swap(1)”>Edit</div>
<div style=”cursor:pointer” onClick=”swap(2)”>Delete</div>
<div style=”cursor:pointer” onClick=”swap(3)”>Add</div>
<div id=”swap0″ style=”display:none”>this is div0</div>
<div id=”swap1″ style=”display:none”>this is div1</div>
<div id=”swap2″ style=”display:none”>this is div2</div>
<div id=”swap3″ style=”display:none”>this is div3</div>
My problem is that i cant click the first link to dispay div 0, and when i click on div 1 to show, then to hide, i can’t make it display again.
Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div.button {
cursor:pointer;
}
</style>
<script type="text/javascript">
var num = 4; // this is # of divs you have
function swap(what)
{
for(var i = 0; i < num; i++)
{
document.getElementById('swap'+i).style.display = 'none';
}
document.getElementById('swap'+what).style.display = 'block';
}
var createStyle = document.createElement('style');
var createStyleProp = document.createTextNode('.hidden { display:none; }');
createStyle.appendChild(createStyleProp);
document.getElementsByTagName('head')[0].appendChild(createStyle);
</script>
</head>
<body>
<div class="button" onClick="swap(0)">Save</div>
<div class="button" onClick="swap(1)">Edit</div>
<div class="button" onClick="swap(2)">Delete</div>
<div class="button" onClick="swap(3)">Add</div>
<div id="swap0" class="hidden">this is div0</div>
<div id="swap1" class="hidden">this is div1</div>
<div id="swap2" class="hidden">this is div2</div>
<div id="swap3" class="hidden">this is div3</div>
</body>
</html><i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Document</title>
<style type="text/css">
.button {
cursor:pointer;
}
#main {
border: 1px solid black;
width: 200px;
display: none;
}
</style>
<script type="text/javascript">
function ChangeContent(sender) {
var obj=document.getElementById('main');
obj.style.display='block';
obj.innerHTML=sender;
}
</script>
</head>
<body>
<div class="button" onClick="ChangeContent('text 1')">Save</div>
<div class="button" onClick="ChangeContent('text 2')">Edit</div>
<div class="button" onClick="ChangeContent('text 3')">Delete</div>
<div class="button" onClick="ChangeContent('text 4')">Add</div>
<div id="main"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div.button {
cursor:pointer;
}
</style>
<script type="text/javascript">
function swap(what)
{
var theDivs = document.getElementsByTagName('div');
for(var i = 0; i < theDivs.length; i++)
{
if(theDivs[i].id.search('swap') == 0)
{
theDivs[i].style.display = 'none';
}
}
document.getElementById('swap'+what).style.display = 'block';
}
window.onload = function()
{
var theDivs2 = document.getElementsByTagName('div');
for(var j = 0; j < theDivs2.length; j++)
{
if(theDivs2[j].id.search('swap') != -1)
{
theDivs2[j].style.display = 'none';
}
}
}
</script>
</head>
<body>
<div class="button" onClick="swap(0)">Save</div>
<div class="button" onClick="swap(1)">Edit</div>
<div class="button" onClick="swap(2)">Delete</div>
<div class="button" onClick="swap(3)">Add</div>
<div class="button" onClick="swap(4)">Save</div>
<div class="button" onClick="swap(5)">Edit</div>
<div class="button" onClick="swap(6)">Delete</div>
<div class="button" onClick="swap(7)">Add</div>
<div class="button" onClick="swap(8)">Save</div>
<div class="button" onClick="swap(9)">Edit</div>
<div class="button" onClick="swap(10)">Delete</div>
<div class="button" onClick="swap(11)">Add</div>
<div id="swap0">this is div0</div>
<div id="swap1">this is div1</div>
<div id="swap2">this is div2</div>
<div id="swap3">this is div3</div>
<div id="swap4">this is div4</div>
<div id="swap5">this is div5</div>
<div id="swap6">this is div6</div>
<div id="swap7">this is div7</div>
<div id="swap8">this is div8</div>
<div id="swap9">this is div9</div>
<div id="swap10">this is div10</div>
<div id="swap11">this is div11</div>
</body>
</html>[CODE]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Deckle</title>
<style type="text/css">
<!--
body {
text-align: center;
margin-top: 0px;
background-image: url(../images/bg.png);
}
#wrapper {
width: 850px;
position: relative;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
height: 1200px;
}
#header {
height: 150px;
width: 850px;
position: absolute;
top: 0px;
background-image: url(../images/header/header.png);
}
#menu1 {
height: 95px;
width: 70px;
position: absolute;
top: 28px;
right: 138px;
border-right-width: thin;
border-right-style: dotted;
border-right-color: #333;
}
#menu2 {
height: 100px;
width: 70px;
position: absolute;
top: 28px;
right: 45px;
}
#logo {
height: 92px;
width: 217px;
position: absolute;
left: 38px;
top: 28px;
}
#heading1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 20px;
width: 605px;
position: absolute;
top: 175px;
text-align: left;
padding-top: 5px;
padding-left: 5px;
background-image: url(../images/headings/headingbkg.png);
color: #F3F2EC;
letter-spacing: 0.2em;
font-weight: bold;
left: 5px;
}
#divider {
height: 985px;
width: 4px;
position: absolute;
top: 210px;
right: 233px;
background-image: url(../images/artists/line.png);
}
#heading2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 20px;
width: 215px;
position: absolute;
top: 175px;
text-align: left;
padding-top: 5px;
padding-left: 5px;
background-image: url(../images/headings/headingbkg.png);
color: #F3F2EC;
letter-spacing: 0.2em;
font-weight: bold;
right: 5px;
}
#gallery1 {
height: 225px;
width: 450px;
position: absolute;
left: 5px;
top: 210px;
}
#thumb1 {
height: 50px;
width: 130px;
position: absolute;
top: 210px;
left: 455px;
}
#thumb2 {
height: 50px;
width: 130px;
position: absolute;
top: 268px;
left: 455px;
}
#thumb3 {
height: 50px;
width: 130px;
position: absolute;
top: 326px;
left: 455px;
}
#thumb4 {
height: 50px;
width: 130px;
position: absolute;
top: 385px;
left: 455px;
}
#search {
height: 72px;
width: 220px;
position: absolute;
top: 210px;
right: 5px;
text-align: left;
background-image: url(../images/login/formbg.png);
}
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="file:///Macintosh HD/Users/macdo019/Desktop/SpryAssets/SpryValidationCheckbox.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #951925;
}
a:hover {
text-decoration: none;
color: #951925;
}
a:active {
text-decoration: none;
color: #951925;
}
-->
</style>
<link href="../exss/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function swap(what)
{
var theDivs = document.getElementsByTagName('div');
for(var i = 0; i < theDivs.length; i++)
{
if(theDivs[i].id.search('swap') == 0)
{
theDivs[i].style.display = 'none';
}
}
document.getElementById('swap'+what).style.display = 'block';
}
window.onload = function()
{
var theDivs2 = document.getElementsByTagName('div');
for(var j = 0; j < theDivs2.length; j++)
{
if(theDivs2[j].id.search('swap') != -1)
{
theDivs2[j].style.display = 'none';
}
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script></head>
<body onload="MM_preloadImages('../images/artists/borlaug/ubt2.png','../images/artists/borlaug/ubt3.png','../images/artists/borlaug/ubt4.png','../images/artists/borlaug/sbt1.png','../images/artists/borlaug/ubt1.png','../images/artists/borlaug/sbt2.png','../images/artists/borlaug/sbt3.png','../images/artists/borlaug/sbt4.png')">
<div class="h1" id="wrapper">
<div id="header">
<div id="logo"><a href="../index.html"><img src="../images/logo/logo.png" alt="logo" name="deckle" width="217" height="92" border="0" id="deckle" /></a></div>
<div id="menu1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="../login/login.html">Log In</a></li>
<li><a href="../register/register.html">Register</a></li>
<li><a href="../aboutus/aboutus.html">About Us</a></li>
<li><a href="../news/news.html">News</a></li>
</ul>
</div>
<div id="menu2">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a href="#">Artists</a></li>
<li><a href="#">Exhibitions</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="search">
<form id="form3" name="form2" method="post" action="">
<table width="221" height="72" border="0" cellpadding="0" cellspacing="5">
<tr>
<td width="65" height="30"><label>
<select name="type" class="body" id="type">
<option value="1">Artist</option>
<option value="2">Title</option>
<option value="3">Tag</option>
</select>
</label></td>
<td colspan="2"><input name="keyword" type="text" class="body" id="keyword" size="20" /></td>
</tr>
<tr>
<td height="24"> </td>
<td width="102" height="24"> </td>
<td width="83"><input name="search" type="submit" class="button" id="search2" value="Search" /></td>
</tr>
</table>
</form>
</div>
[/CODE][CODE] <div class="h1" id="heading1">FEATURED ARTIST</div>
<div>Content for New Div Tag Goes Here</div>
<div id="gallery1"><span style="cursor:pointer">
<div id="swap0"><img src="../images/artists/borlaug/ub1.png" alt="ub1" name="B1" width="450" height="225" id="B1" onclick="MM_openBrWindow('../images/artists/borlaug/b1.png','','width=815,height=600')" /></div>
<div id="swap1"><img src="../images/artists/borlaug/ub2.png" alt="ub1" name="B1" width="450" height="225" id="B1" onclick="MM_openBrWindow('../images/artists/borlaug/b2.png','','width=600,height=812')" /></div>
<div id="swap2"><img src="../images/artists/borlaug/ub3.png" alt="ub1" name="B1" width="450" height="225" id="B1" onclick="MM_openBrWindow('../images/artists/borlaug/b3.png','','width=500,height=845')" /></div>
<div id="swap3"><img src="../images/artists/borlaug/ub4.png" alt="ub1" name="B1" width="450" height="225" id="B1" onclick="MM_openBrWindow('../images/artists/borlaug/b4.png','','width=630,height=800')" /></div>
</span></div>
<div id="thumb1"><div class="thumb" onClick="swap(0)"><img src="../images/artists/borlaug/sbt1.png" alt="sbt1" name="b1" width="130" height="50" id="b1" onclick="MM_swapImage('b1','','../images/artists/borlaug/sbt1.png','b2','','../images/artists/borlaug/ubt2.png','b3','','../images/artists/borlaug/ubt3.png','b4','','../images/artists/borlaug/ubt4.png',1)" /></div></div>
<div id="thumb2"><div class="thumb" onClick="swap(1)"><img src="../images/artists/borlaug/ubt2.png" alt="ubt1" name="b2" width="130" height="50" id="b2" onclick="MM_swapImage('b1','','../images/artists/borlaug/ubt1.png','b2','','../images/artists/borlaug/sbt2.png','b3','','../images/artists/borlaug/ubt3.png','b4','','../images/artists/borlaug/ubt4.png',1)" /></div></div>
<div id="thumb3"><div class="thumb" onClick="swap(2)"><img src="../images/artists/borlaug/ubt3.png" alt="ubt3" name="b3" width="130" height="50" id="b3" onclick="MM_swapImage('b1','','../images/artists/borlaug/ubt1.png','b2','','../images/artists/borlaug/ubt2.png','b3','','../images/artists/borlaug/sbt3.png','b4','','../images/artists/borlaug/ubt4.png',1)" /></div></div>
<div id="thumb4"><div class="thumb" onClick="swap(3)"><img src="../images/artists/borlaug/ubt4.png" alt="ubt4" name="b4" width="130" height="50" id="b4" onclick="MM_swapImage('b1','','../images/artists/borlaug/ubt1.png','b2','','../images/artists/borlaug/ubt2.png','b3','','../images/artists/borlaug/ubt3.png','b4','','../images/artists/borlaug/sbt4.png',1)" /></div></div>
<div id="divider"></div>
<div></div>
<div id="form">
<form id="form1" name="form1" method="post" action="">
</form>
</div>
<div class="body" id="form2"></div>
<div class="h1" id="heading2">SEARCH</div>
<div class="subheading" id="previous">
<table width="115" height="40" border="0">
<tr>
<td width="109" align="center" valign="middle" style="text-align: center"><a href="#" class="subheading"><<<Older Articles</a></td>
</tr>
</table>
</div>
<div class="h1" id="heading3">NEWS</div>
<div class="h1" id="heading4">LOG IN</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>[/CODE]0.1.9 — BETA 5.18