Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Div Visible/Hidden

    I am trying to create a button which makes a div appear when clicked and disappear when clicked again.... then appear, then disappear.

    I'm nearly there, the div appears, but then rather than just that div disappearing when you click again, everything disappears!!!!!! I'm sure its simple to work out for people who are confident using Javascript. Not for me though!

    Here's the link

    www.standardcraze.co.uk/test.htm

    Please help!!!
    Thanks

  2. #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    You script hides all divs. So it makes sense that all the divs disappear. The reason you think it works the first time is because the divs' styles don't have a display property at first.

    You should stop using the loop for hiding if you want to use the page. Just hide the div you want to hide.

  3. #3
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    So how can I change the code so it only shows and hides Divs with a certain ID??

    I'm not too hot when it comes to Javascript

  4. #4
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    document.getElementById
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  5. #5
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Thats what i'd have thought but nothing happens at all when i change it to that.

  6. #6
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Ok i've adapted the code a bit... well a lot.

    Code:
    <html lang="en">
    <head>
    <title>Test Page</TITLE>
    
     <style type="text/css">
    div.image1 {
    	position: absolute;
    	width: 398px;
    	height: 474px;
    	top: 88px;
    	left: 88px;
    	z-index: 1;
    }
    div.semitransparent {
    	position: absolute;
    	width: 398px;
    	height: 474px;
    	top: 88px;
    	left: 88px;
    	background-image:url(images/contentfill.gif);
    	display: none;
    	z-index: 2;
    }
    a img { border: none ; }
     </style>
    
    <script type="text/javascript">
    function toggleDisplay(divId) {
      var div = document.getElementById(divId);
      div.style.display = (div.style.display=="block" ? "none" : "block");
    }
    </script>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    
    	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv1')"><img src="images/logo/planeicon.gif"></div>
    	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv2')"><img src="images/logo/planeicon.gif"></div>
    	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv3')"><img src="images/logo/boaticon.gif"></div>
    
    	<div class="image1"><img src="images/juno/juno1.jpg"></div>
    	<div class="semitransparent" id="myToggledDiv1">11111111111111111</div>
    	<div class="semitransparent" id="myToggledDiv2"><br>2222222222222222</div>
    	<div class="semitransparent" id="myToggledDiv3"><br><br>3333333333333333</div>
    </body>
    </html>
    This works pretty much fine, but i want to work so that only 1 div is visible at any one time.

    Any ideas???

  7. #7
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Well, I would think that you'd first need to choose which divs are going to participate in this hiding and showing. CLearly not all divs in the page should hide/show, just the ones you want. One way could be with classes. One way could get keeping an array of all the participating divs and looping through that. Solve your problem logically, then use javascript to implement your solution.

  8. #8
    New Coder
    Join Date
    Mar 2006
    Location
    Denver, CO
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is something I am working on that may help:

    ---------
    <html>
    <head>

    <style type="text/css">
    .shown { display: block; }
    .hidden { display: none;}
    </style>

    <script language="JavaScript">

    var numero = 0;

    function change(newClass) {
    document.getElementById('affectedArea').className = newClass;
    }


    function clickChg() {
    numero++
    if (numero%2 > 0) change('hidden');
    else change('shown');
    }

    </script>

    </head>

    <body>


    <p><a href="javascript:" onClick="clickChg();" onMouseover="document.rolls.src='x2.gif'" onMouseout="document.rolls.src='x.gif'"><img name="rolls" src="x.gif" border="0"></a></p>

    <div class="shown" id="affectedArea">
    <img src="smileyface.gif" border="0">
    </div>

    </body>
    </html>



    -----

    smileyface.gif will appear and disappear when you click the broken link. The style gets changed when the rollover is clicked from display:none, to display: block.

    If this helps and you need more explanation, let me know.
    Last edited by JeremyH; 03-20-2006 at 08:41 PM.

  9. #9
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Thats great stuff Jeremy. The button works exactly as i need it to except for the fact that I need 3 buttons to bring up 3 different submenus and don't know how to change the Javascript to make this work.

    Here's the link to what i have so far.

    www.standardcraze.co.uk/menu/juno

    Any ideas how i can adapt the javascript??

  10. #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,584
    Thanks
    3
    Thanked 516 Times in 503 Posts
    Code:
    <html lang="en">
    <head>
    <title>Test Page</TITLE>
    
     <style type="text/css">
    div.image1 {
    	position: absolute;
    	width: 398px;
    	height: 474px;
    	top: 88px;
    	left: 88px;
    	z-index: 1;
    }
    div.semitransparent {
    	position: absolute;
    	width: 398px;
    	height: 474px;
    	top: 88px;
    	left: 88px;
    	background-image:url(images/contentfill.gif);
    	display: none;
    	z-index: 2;
    }
    a img { border: none ; }
     </style>
    
    <script type="text/javascript">
    function toggleDisplay(divId,grp) {
     var div = document.getElementById(divId);
     if (!window[grp]){ window[grp]=[]; }
     if (!div.ary){ div.ary=true; window[grp].push(div); }
     for (var zxc0=0;zxc0<window[grp].length;zxc0++){
      if (window[grp][zxc0]!=div){
       window[grp][zxc0].style.display='none'; 
      }
     } 
     div.style.display = (div.style.display=="block" ? "none" : "block");
    }
    </script>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    http://www.codingforums.com/showthread.php?t=82451
    	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv1','Grp1')"><img src="images/logo/planeicon.gif"></div>
    	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv2','Grp1')"><img src="images/logo/planeicon.gif"></div>
    	<div id="myClickyDiv" onclick="toggleDisplay('myToggledDiv3','Grp1')"><img src="images/logo/boaticon.gif"></div>
    
    	<div class="image1"><img src="images/juno/juno1.jpg"></div>
    	<div class="semitransparent" id="myToggledDiv1">11111111111111111</div>
    	<div class="semitransparent" id="myToggledDiv2"><br>2222222222222222</div>
    	<div class="semitransparent" id="myToggledDiv3"><br><br>3333333333333333</div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  11. #11
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Thats spot on! works in all browsers too which is a huge bonus!thanks


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •