Menu
Here's a very simple jsFiddle:
function hideDiv2() {
$('.div2').hide();
}
function showDiv2() {
$('.div2').show();
}.div1 {
height: 300px;
width: 20%;
background-color: red;
float: left;
}
.div2 {
height: 300px;
width: 20%;
background-color: green;
float: left
}
.div3 {
height: 300px;
width: 35%;
background-color: pink;
float: left
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<br>
<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()">Show div2</button>that creates 3 divs in HTML, and provides two buttons to hide and show the middle div. What I'd like to know is how I keep div3 from sliding over to the left when div2 is hidden. In other words I'd like div3 to remain in its original location regardless of whether div2 is hidden or visible. It is required, however, that the initial HTML page be displayed with all 3 divs visible as shown initially in the jsFiddle.
564
Use position fixed. Position fixed makes it so that an element stays at it's specified place even if the user scrolls up or down.
You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.
To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.
display = “none” will make it disappear when clicked on div.
Instead of using .hide(), set opacity to 0, or set visibility to hidden
$('.div2').css('visibility', 'hidden');
Note: opacity won't work in IE < 9
172
By adding an external div you can achieve what you looking for. Here is your code and jsFiddle
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.div1 {
height:300px;
width:20%;
background-color: red;
float:left;
}
.div2 {
height:300px;
width:100%;
background-color: green;
float:left
}
.hideDiv {
height:300px;
width:20%;
float:left
}
.div3 {
height:300px;
width:35%;
background-color: pink;
float:left
}
</style>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
<div class="div1">div1</div>
<div class ="hideDiv"><div class="div2">div2</div></div>
<div class="div3">div3</div>
<br>
<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()" >Show div2</button>
</body>
<script>
function hideDiv2()
{
$('.div2').hide();
}
function showDiv2()
{
$('.div2').show();
}
</script>
</html>
answered Sep 22 '22 02:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With