Jump to content

hide/show javascript problems


divinedesigns1
 Share

Recommended Posts

Ok so im using this script "not mines so you can copy and use it if you wish" but it doesnt work how it should be working

<script type="text/javascript" language="JavaScript"><!--function HideContent(div) {document.getElementById(div).style.display = "none";}function ShowContent(div) {  document.getElementById(div).style.display = "block";  }  function ReverseDisplay(div) {   if(document.getElementById(div).style.display == "none") {   document.getElementById(div).style.display = "block";   }   else {   document.getElementById(div).style.display = "none";   }   }   //--></script>

i followed everything step by step and still it doesnt work as it should, when i click on the next which is home it shows the first button which is subject

<div class="jsmenu">  <ul>  <li><a href="javascript:ShowContent('div1')">Lost</a></li>  <li><a href="javascript:ShowContent('div2')">Found</a></li>  <li><a href="javascript:ShowContent('div3')">Place</a></li>  <li><a href="javascript:ShowContent('div4')">Cover</a></li>  <li><a href="javascript:ShowContent('div5')">Welcome</a></li>  <li><a href="javascript:ShowContent('div6')">Busy</a></li>  </ul>  </div><!-- jsmenu -->  <div id="div1" style="display:block;">gallery one goes here</div><!-- gallery 1 -->  <div id="div2" style="display:none;">gallery two goes here</div><!-- gallery 2 -->  <div id="div3" style="display:none;">gallery three goes here</div><!-- gallery 3 -->  <div id="div4" style="display:none;">gallery four goes here</div><!-- gallery 4 -->  <div id="div5" style="display:none;">gallery five goes here</div><!-- gallery 5 -->  <div id="div6" style="display:none;">gallery six goes here</div><!-- gallery 6 -->

not sure what i am doing wrong, considering i have no knowledge on javascript, switch the hover to this click as was suggested by a member, kindly help if you know what im doing wrong ok so i got the tabs to show ever page number, but when i click on tab "found" then click back on tab "lost" on tab "lost" both tab "found and lost" gets display on tab "lost" 0.o

Edited by DDs1
Link to comment
Share on other sites

DDs, Are you simply trying to show one div when clicking on it and closing all the others? If so, here's a suggestion if you're interested:

<!doctype html><html><head><title>DDs1</title><script type="application/javascript">function ShowContent(div){  document.getElementById(div).style.display = "block";  var divs = document.getElementsByTagName('div');  for(var i = 0; i < divs.length; i++)  {   if(divs[i].id != div && divs[i].className != 'jsmenu')   divs[i].style.display = "none";   } } </script> </head><body><div class="jsmenu">  <ul>  <li><a href="javascript:ShowContent('div1')">Lost</a></li>  <li><a href="javascript:ShowContent('div2')">Found</a></li>  <li><a href="javascript:ShowContent('div3')">Place</a></li>  <li><a href="javascript:ShowContent('div4')">Cover</a></li>  <li><a href="javascript:ShowContent('div5')">Welcome</a></li>  <li><a href="javascript:ShowContent('div6')">Busy</a></li>  </ul>  </div><!-- jsmenu -->   <div id="div1" style="display:block;">gallery one goes here</div><!-- gallery 1 -->  <div id="div2" style="display:none;">gallery two goes here</div><!-- gallery 2 -->  <div id="div3" style="display:none;">gallery three goes here</div><!-- gallery 3 -->  <div id="div4" style="display:none;">gallery four goes here</div><!-- gallery 4 -->  <div id="div5" style="display:none;">gallery five goes here</div><!-- gallery 5 -->  <div id="div6" style="display:none;">gallery six goes here</div><!-- gallery 6 --> </body> </html>

Link to comment
Share on other sites

DDs, Are you simply trying to show one div when clicking on it and closing all the others? If so, here's a suggestion if you're interested:
<!doctype html><html><head><title>DDs1</title><script type="application/javascript">function ShowContent(div){  document.getElementById(div).style.display = "block";  var divs = document.getElementsByTagName('div');  for(var i = 0; i < divs.length; i++)  {   if(divs[i].id != div && divs[i].className != 'jsmenu')   divs[i].style.display = "none";   } } </script> </head><body><div class="jsmenu">  <ul>  <li><a href="javascript:ShowContent('div1')">Lost</a></li>  <li><a href="javascript:ShowContent('div2')">Found</a></li>  <li><a href="javascript:ShowContent('div3')">Place</a></li>  <li><a href="javascript:ShowContent('div4')">Cover</a></li>  <li><a href="javascript:ShowContent('div5')">Welcome</a></li>  <li><a href="javascript:ShowContent('div6')">Busy</a></li>  </ul>  </div><!-- jsmenu -->   <div id="div1" style="display:block;">gallery one goes here</div><!-- gallery 1 -->  <div id="div2" style="display:none;">gallery two goes here</div><!-- gallery 2 -->  <div id="div3" style="display:none;">gallery three goes here</div><!-- gallery 3 -->  <div id="div4" style="display:none;">gallery four goes here</div><!-- gallery 4 -->  <div id="div5" style="display:none;">gallery five goes here</div><!-- gallery 5 -->  <div id="div6" style="display:none;">gallery six goes here</div><!-- gallery 6 --> </body> </html>

yes thats exactly what im trying to do, ill try your code and let you know the outcome
Link to comment
Share on other sites

i tried your code, when i click on found it gives me a black page 0.o not what i want this is what im aiming for http://www.willmaster.com/blog/css/show-hide-div-layer.php but that too isnt working as it should not too sure why

Link to comment
Share on other sites

Black page? That's strange. The code works perfectly for me as intended in Chrome and Firefox and not getting any errors from Firebug. When I click on Lost, 'gallery one goes here' shows. When I click on Found, 'gallery one goes here' disappears and instead 'gallery two goes here' appears. etc etc..

Link to comment
Share on other sites

i copy your code and paste it into a blank html file and it worked, i pasted it into my template and i get a blank gray page when i click on found....ahhhhh

Link to comment
Share on other sites

woot woot got it working, now for the last piece :Pleased: i hope this work so i can use it on a client website woot woot

Link to comment
Share on other sites

if(divs.id != div && divs.className != 'jsmenu') this is fine as long as don't have any other div containers, like wrapper etc, place a container around show/hide content and target the divs within that only.

<div class="jsmenu">  <ul>  <li><a href="javascript:ShowContent('div1')">Lost</a></li>  <li><a href="javascript:ShowContent('div2')">Found</a></li>  <li><a href="javascript:ShowContent('div3')">Place</a></li>  <li><a href="javascript:ShowContent('div4')">Cover</a></li>  <li><a href="javascript:ShowContent('div5')">Welcome</a></li>  <li><a href="javascript:ShowContent('div6')">Busy</a></li>  </ul>  </div><!-- jsmenu --> <div id="show_hide">  <div id="div1" style="display:block;">gallery one goes here</div><!-- gallery 1 -->  <div id="div2" style="display:none;">gallery two goes here</div><!-- gallery 2 -->  <div id="div3" style="display:none;">gallery three goes here</div><!-- gallery 3 -->  <div id="div4" style="display:none;">gallery four goes here</div><!-- gallery 4 -->  <div id="div5" style="display:none;">gallery five goes here</div><!-- gallery 5 -->  <div id="div6" style="display:none;">gallery six goes here</div><!-- gallery 6 --> </div>

function ShowContent(div){var parent_show_hide = document.getElementById("show_hide")var divs = parent_show_hide.getElementsByTagName('div');   for(var i = 0; i < divs.length; i++)  {   divs[i].style.display = "none";  }document.getElementById(div).style.display = "block";}

edit corrected , by removing id from <div id="show_hide"> and .document from var divs = parent_show_hide.getElementsByTagName('div');

Edited by dsonesuk
Link to comment
Share on other sites

I messed with it and got it to work via the code below if you're still interested. It worked for me based on your page etc.

<!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>DivineDesigns1</title><link href="css/2011.css" rel="stylesheet" type="text/css" /><link href="css/2012.css" rel="stylesheet" type="text/css" /><script type="application/javascript">function ShowContent(div){  document.getElementById(div).style.display = "block";  var divContent = document.getElementById('content').firstChild.nextSibling;  var getChildDivs = divContent.childNodes;   for(var i = 0; i < getChildDivs.length; i++)  {        if(getChildDivs[i].nodeName == 'DIV')        {                if(getChildDivs[i].id != div && getChildDivs[i].className != 'jsmenu' )               {                      getChildDivs[i].style.display = "none";                }          }	  } } </script></head><body><div id="wrapper"><div id="banna"><table width="1024" align="center"><tr><td width="227" height="161" align="left" valign="middle"><div class="loholder"><a href="www.divinedesigns1.com"><img src="layouts/logo.png" width="214" height="155" border="0" /></a></div><!-- logo --></td><td width="785" valign="top"><div id="slider"><div class="smallmenu"><ul><li><a href="#">DDS1.us</a></li><li class="last"><a href="http://www.divinedesigns1.net">DDS1.net</a></li></ul></div><!-- smallmenu --></div><!-- slider --></td></tr></table></div><!-- bana --><div id="menu"><div class="nav"><div class="mainmenu">  <ul>	<li><a href="http://www.divinedesigns1.com">Home</a></li>	<li><a href="http://www.divinedesigns1.com/services.html">Services</a></li>	<li><a href="http://www.divinedesigns1.com/projects.html">Project</a></li>	<li><a href="http://www.divinedesigns1.com/about.html">About Us</a></li>	<li class="last"><a href="#">Contact Us</a></li>  </ul></div><!-- mainmenu--></div><!-- nav --></div><!-- menu --><div id="content">  <div class="content">  <div class="jsmenu">  <ul>  <li><a href="javascript:ShowContent('div1')">Lost</a></li>  <li><a href="javascript:ShowContent('div2')">Found</a></li>  <li><a href="javascript:ShowContent('div3')">Place</a></li>  <li><a href="javascript:ShowContent('div4')">Cover</a></li>  <li><a href="javascript:ShowContent('div5')">Welcome</a></li>  <li><a href="javascript:ShowContent('div6')">Busy</a></li>  </ul>  </div><!-- jsmenu -->   <div id="div1" style="display:block;">gallery one goes here</div><!-- gallery 1 -->  <div id="div2" style="display:none;">gallery two goes here</div><!-- gallery 2 -->  <div id="div3" style="display:none;">gallery three goes here</div><!-- gallery 3 -->  <div id="div4" style="display:none;">gallery four goes here</div><!-- gallery 4 -->  <div id="div5" style="display:none;">gallery five goes here</div><!-- gallery 5 -->  <div id="div6" style="display:none;">gallery six goes here</div><!-- gallery 6 -->  </div><!-- .content --></div><!-- content --><div id="footer"><table width="1024"><tr><td width="394" height="38" style="font-size:10px; font-weight:300; color:#CCCCCC; padding-left: 2px;">COPYRIGHT (C) 2011 DIVINEDESIGNS1.COM ALL RIGHTS RESERVED.DDS1.SITES</td><td width="480"></td><td width="134"><div class="footnav"><ul><li><a href="#">Policies</a></li></ul></div><!-- footmenu ---></td></tr></table></div><!-- footer --></div><!-- wrapper --></body></html>

Link to comment
Share on other sites

thanks guys, its working now i just have to add the lightbox to it and sigh im done with this page then onto the contact page and im finish, then ill add this to my dad's site "hopefully it works" then woot woot project completed

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...