...

View Full Version : <Dynamic DIV/>



Nenson
11-11-2011, 06:31 PM
Hello! I want to make a dynamic div that appears and hides on a link click.
The example is here http://imageshack.us/photo/my-images/39/75854154.jpg/
I want that the dynamic div does not exchange the site layout but rather "take its space between the main div an the container" thx!

sunfighter
11-12-2011, 07:35 AM
From the image the page you show must have a fixed height.
The two divs that live on the left are in their own container, same for the right divs.
If the "link" took you some place else changing your page would be ridiculous.
So I used a button, you fix it anyway you want.
Your gonna need javascript to change anything on a page that has rendered.
AND please notice overflow:auto; to make scroll bar appear.

Your mark-up skeleton for the page :


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<style type="text/css">
body
{
color: black;
}
#links
{
width: 75px;
height: 400px;
background: red;
}
#tools
{
width: 75px;
height: 100px;
background: blue;
}
#main
{
width: 500px;
height: 500px;
overflow:auto;
background: green;
}
#magic
{
width: 500px;
height: 150px;
background: pink;
display:none;
}
#left
{
width: 75px;
height: 500px;
float:left;
}
#right
{
width: 500px;
height: 500px;
float:left;
}
</style>
</head>
<body>
<div id="left">
<div id="links">
<input type="button" value="push" onclick="change();" />
</div>
<div id="tools"></div>
</div>

<div id="right">
<div id="main">
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />Stuff to read and think about. Stuff to read and think about. Stuff to read.<br />
Stuff to read and think about.
</div>
<div id="magic"></div>
</div>
<script type="text/javascript">
function change()
{
document.getElementById('main').style.height='350px';
document.getElementById('magic').style.display = 'block';
}
</script>
</body>
</html>

Nenson
11-12-2011, 09:41 AM
THANK YOU VERY MUCH! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum