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 3 of 3

Thread: <Dynamic DIV/>

  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    <Dynamic DIV/>

    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!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    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 :

    Code:
    <!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>

  • Users who have thanked sunfighter for this post:

    Nenson (11-12-2011)

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    THANK YOU VERY MUCH!


  •  

    Posting Permissions

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