[HTML/JS] Hiding a div but then moving another div up to the previous place.
Hey, I'm in the process of trying to make another website, this time I thought I'd throw in some Javascript to make it seem more interactive rather then throwing a whole website into someones face, any way I can hide the div perfectly but what I'm stuck on is moving the div below it on to it's place.
Demo: Click here.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta name="keywords" content="keywords and shizzle" />
<meta name="description" content="description" />
<title>untitled</title>
<style lang="text/css">
/* you don't need all of this */
body{background-color:Background;}
#example{background-color:#eee;border:1px solid #ddd;padding:5px;}
#sample{background-color:#eee;border:1px solid #ddd;padding:5px;}
.woo{padding:2px;}
.woo a{border:2px outset ThreeDLightShadow;background-color:ThreeDFace;padding:2px 20px 2px 20px;color:#333;text-decoration:none;}
.woo a:focus{background-color:ButtonFace;border:2px inset ButtonShadow;}
</style>
<script language=javascript type='text/javascript'>
function hideExample() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('example').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}
function showExample() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('example').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script>
</head>
<body>
<div id="example">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
</div>
<br/>
<div id="sample">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
</div>
<br/>
<div class="woo">
<a href="javascript:hideExample()">hide</a>
<a href="javascript:showExample()">show</a>
</div>
</body>
</html>
What I'm trying to do is to get the box (id:Sample) to move up, I don't care about smooth scrolling and all that upwards I'm just trying to make ends meet until I learn more.
Re: [HTML/JS] Hiding a div but then moving another div up to the previous place.
demo doesn't work.. anyway it's matter of styling, float it and it should move automatically
//edit mkey, does now..
//edit 2
give the #sample { float: left; } and use display: none; instead of visibility: hidden;
oh wait, theoretically float isn't even needed
Re: [HTML/JS] Hiding a div but then moving another div up to the previous place.
That works good, you just need to position the divs on top of each other.
You can do that by setting position: absolute; in CSS. This code below should work:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta name="keywords" content="keywords and shizzle" />
<meta name="description" content="description" />
<title>untitled</title>
<style lang="text/css">
/* you don't need all of this */
body{background-color:Background;}
#example{position:absolute;top:0px;left:0px;background-color:#eee;border:1px solid #ddd;padding:5px;}
#sample{position:absolute;top:0px;left:0px;background-color:#eee;border:1px solid #ddd;padding:5px;}
.woo{padding:2px;}
.woo a{border:2px outset ThreeDLightShadow;background-color:ThreeDFace;padding:2px 20px 2px 20px;color:#333;text-decoration:none;}
.woo a:focus{background-color:ButtonFace;border:2px inset ButtonShadow;}
</style>
<script language=javascript type='text/javascript'>
function hideExample() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('example').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}
function showExample() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('example').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script>
</head>
<body>
<div id="example">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
</div>
<br/>
<div id="sample">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.
</div>
<br/>
<div class="woo">
<a href="javascript:hideExample()">hide</a>
<a href="javascript:showExample()">show</a>
</div>
</body>
</html>
Re: [HTML/JS] Hiding a div but then moving another div up to the previous place.
nope nope, that won't work, this will
http://foxx.f13.cz/test.html
Re: [HTML/JS] Hiding a div but then moving another div up to the previous place.
Wait, is he trying to layer the divs on top of each other and toggle which one gets seen?
Edit: Foxx got it :P I misread
