Solved

Show layer in another layer place, and hide the new layer from button

Posted on 2010-09-14
4
507 Views
Last Modified: 2012-05-10
Hi all,


I have Button A and aside, Layer 1 to start with.
If I click Button A I need Layer 1 to hide and Layer 2 to be shown in its place.
Inside of Layer 2 there's Button B.
If I click Button B, Layer 2 has to hide and Layer 1 has to show in it's place.

The attached image will give you a further view.

How can I do this? I was about to post some of my code but the only thing I have come around is to show and hide from the same button :(

Thanks a lot!

 
showHideLayers.gif
0
Comment
Question by:Dada44
4 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 33670028
<script type="text/javascript">
function showHide(showing,hiding) {
  document.getElementById(showing).style.display="";
   document.getElementById(hiding).style.display="none";
 }
</script>
<input type="button" onClick="showHide('div2','div1')" value="ButtonA" />
 <div id="div1" style="position:absolute; top:0; left:200px">I'm Layer1</div>
 <div id="div2" style="position:absolute; top:0; left:200px; display:none">I'm Layer2<br/><input type="button" onClick="showHide('div1','div2')" value="ButtonB" /></div>
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33670070
Assuming that 2 layers are
<div id="layer1" style="left:100px; top:20px;"\>
<div id="layer2" style="left:100px; top:40px;"\>

<a id='buttonA'>
<a id='buttonB'>

$("#buttonA").bind("click", function(){
   var layer1 = $("#layer1");  
   var layer2 = $("#layer2");  
   var left = layer1.css("left");
   var top = layer1.css("top");
   $("#layer1").css ("display", "none");
   $("#layer2").css ("left", left + "px");
   $("#layer2").css ("top", top + "px");
 
});

$("#buttonB").bind("click", function(){
   var layer2 = $("#layer1");  
   var layer1 = $("#layer2");  
   var left = layer1.css("left");
   var top = layer1.css("top");
   $("#layer1").css ("display", "none");
   $("#layer2").css ("left", left + "px");
   $("#layer2").css ("top", top + "px");
 
});
0
 

Author Closing Comment

by:Dada44
ID: 33670093
Awesome! thank you!
0
 
LVL 14

Expert Comment

by:sam2912
ID: 33670369
Since you are using jQuery, this is a better way to do it

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
#div1, #div2 {
   position:absolute;
   top:150;
   left:150px;
   margin: 10px;
   padding: 10px;
   border: 2px solid gray;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('#div2').css('display','none');
	$('#buttonA').click(function() { $('#div1').css('display','none'); $('#div2').css('display',''); });
	$('#buttonB').click(function() { $('#div2').css('display','none'); $('#div1').css('display',''); });
});
</script>
<input type="button" id="buttonA" value="Button A" />
<div id="div1">I'm Layer1</div>
<div id="div2">I'm Layer2<br/><input type="button" id="buttonB" value="Button B" /></div>

Open in new window

0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question