SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Javascript Pushing Divs and Animations

    Hi all.

    I am working on a school project, and creating a website. Right now I am making the navigation bar and I want to have one of the buttons to have an expandable div, which reveals more information in a box, pushing the rest of the website below. It is similar to an iOS Folder animation for ease of understanding.

    Here is all of the code in the document, which basically makes up for that button and its function. Currently, if I put the code in my website, it would work smoothly. However it only acts like a drop down navigation instead of pushing the rest of the site down with it. Is there a solution to this? Thanks a lot.

    Code:
    <html>
    	<head>
    	<title>Hello</title>
    
    	<script  type="text/javascript">
    /*<![CDATA[*/
    
    function Toggle(id,close,open,ms){
     var obj=document.getElementById(id),o=Toggle['zxc'+id],to;
     if (!o&&obj){
      Toggle['zxc'+id]=o={
       obj:obj,
       now:0,
       ms:500,
       ud:true
      }
     }
     if (o){
      ms=typeof(ms)=='number'?ms:o.ms;
      obj.style.display='block';
      to=o.ud?open:close;
      clearTimeout(o.dly);
      animate(o,o.now,to,new Date(),ms*Math.abs((to-o.now)/open));
      o.ud=!o.ud;
     }
    }
    
    function animate(o,f,t,srt,mS){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      o.now=Math.max(now,0);
      o.obj.style.height=o.now+'px';
     }
     if (ms<mS){
      o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
     }
     else {
      o.now=t;
      o.obj.style.height=o.now+'px';
      if (t==0){
       o.obj.style.display='none';
      }
     }
    }
    
    
    /*]]>*/
    </script>
        
    	<style>
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    	background-color: #CCC;
    	}
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* Page-Specifics */
    
    p.inside {
    	color: #f1f1f1;
    	text-shadow: 0px 1px 0px #000000;
    }
    
    h1.inside {
    	color: #f1f1f1;
    	text-shadow: 0px 1px 0px #000000;
    	font-weight: bold;
    	font-size: 1.6em;
    	padding-bottom: 10px;
    }
    
    p {
    	font-size: 0.9em;
    	color: #545454;
    	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    	text-shadow: 0px 1px 1px #f1f1f1;
    	margin-top: 5px;
    	margin-bottom: 5px;
    	line-height: 1.2em;
    }
    
    h1 {
    	font-size: 1.6em;
    	color: #545454;
    	font-weight: bold;
    	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    	text-shadow: 0px 1px 1px #f1f1f1;
    	padding-bottom: 2px;
    }
    
    	h1 a:visited, h1 a:link, h1 a:active {
    		text-decoration: none;
    		color: #545454;
    	}
    
    	h1 a:hover {
    		text-decoration: none;
    		color: #565656;
    		border-bottom: 1px dotted #fe57a1;
    	}
    
    h2 {
    	font-size: 0.8em;
    	text-transform: uppercase;
    	color: #FE57A1;
    	font-weight: bold;
    	letter-spacing: 0.1em;
    	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    	text-shadow: 0px 1px 1px #f1f1f1;
    	margin-bottom: 5px;
    }
    
    hr {
    	height: 1px;
    	opacity: 0.4;
    	-moz-opacity: 0.4;
    	filter:alpha(opacity=4);
    	background-color: #fff;
    	border-top: 1px solid #000;
    	margin-bottom: 10px;
    	margin-top: 10px;
    }
    
    .button {
    	position: relative;
    	display: block;
    	background-color: #fe57a1;
    	border-radius: 8px;
    	width: 70px;
    	height: 20px;
    	padding: 4px;
    	margin-left:50px;
    	border: 1px solid #4d4d4d;
    }
    
    	.button p {
    		color: #f1f1f1;
    		text-shadow: 0px 1px 1px #4d4d4d;
    		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    		letter-spacing: 0.1em;
    		text-transform: uppercase;
    		font-size: 0.7em;
    		position: relative;
    		display: block;
    		text-align: center;
    	}
    
    	.button a {
    		text-decoration: none;
    	}
    
    	#page-wrapper {
    		width: 100%;
    		padding-top: 15px;
    	}
    
    	.content {
    		background-color: #E8E8E8;
    		padding: 10px;
    		position: relative;
    		width: 960px;
    		margin: 0 auto;
    	}
    
    	#page-split-wrap {
    		display: none;
    		position: relative;
    		width: 100%;
    		height: 0px;
    		background-color: #333;
    	    position:relative;
    		overflow:hidden;height:0px;
    
    	}
    
    	.page-split-head {
    		display: block;
    		background-color: #333;
    		height: 35px;
    		border-top: 1px solid #f1f1f1;
    	}
    
    	.page-split-footer {
    		display: block;
    		position: absolute;
    		bottom: 0;
    		background-color: #333;
    		height: 35px;
    	}
    
    	.page-split-content {
    		width: 960px;
    		margin: 0 auto;
    		padding-top: 35px;
    		padding-bottom: 35px;
    		padding-left: 20px;
    		padding-right: 20px;
    		background-color: #333;
    	}
    
    	</style>
    <script type="text/javascript">
    animatedcollapse.addDiv('jason', 'optional_attribute_string')
    //additional addDiv() call...
    //additional addDiv() call...
    animatedcollapse.init()
    </script>
    
    
    </head>
    
    <body>
     <div class="button open-button" onMouseUp="Toggle('page-split-wrap',0,250,500);" ><p>Toggle</p></div>
    
     <div id="page-split-wrap">
      <div class="page-split-head"> </div>
      <div class="page-split-content">
       <p class="inside">Content in here</p>
       <p class="inside">Content in here</p>
      </div>
     </div>
    
    </body>
    
    </html>
    Also, I found a solution before which works like I wanted it to be. However, instead of a single button, it needs two buttons to be able to open/close the div, which is troublesome. The code is here fyi:
    Code:
    <html>
    	<head>
    	<title>Hello</title>
    
    	<script type="text/javascript" src="js/jquery.js"></script>
    
    	<script>
    	jQuery(document).ready(function() {
    		$('.open-button').click(function() {
    			$('.page-split-wrap').css({'display': 'block'})
    			$('.page-split-wrap').animate({height: '250px'}, 500);
    	});
    
    		$('.close-button').click(function() {
    			$('.page-split-wrap').animate({height: '0px'}, 500, function() {
    			$('.page-split-wrap').css({'display': 'none'});
    		});
    		});
    	})
    	</script>
    	<style>
    
    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    	background-image:url('images/bg-repeat.png');
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    /* Page-Specifics */
    
    p.inside {
    	color: #f1f1f1;
    	text-shadow: 0px 1px 0px #000000;
    }
    
    h1.inside {
    	color: #f1f1f1;
    	text-shadow: 0px 1px 0px #000000;
    	font-weight: bold;
    	font-size: 1.6em;
    	padding-bottom: 10px;
    }
    
    p {
    	font-size: 0.9em;
    	color: #545454;
    	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    	text-shadow: 0px 1px 1px #f1f1f1;
    	margin-top: 5px;
    	margin-bottom: 5px;
    	line-height: 1.2em;
    }
    
    h1 {
    	font-size: 1.6em;
    	color: #545454;
    	font-weight: bold;
    	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    	text-shadow: 0px 1px 1px #f1f1f1;
    	padding-bottom: 2px;
    }
    
    	h1 a:visited, h1 a:link, h1 a:active {
    		text-decoration: none;
    		color: #545454;
    	}
    
    	h1 a:hover {
    		text-decoration: none;
    		color: #565656;
    		border-bottom: 1px dotted #fe57a1;
    	}
    
    h2 {
    	font-size: 0.8em;
    	text-transform: uppercase;
    	color: #FE57A1;
    	font-weight: bold;
    	letter-spacing: 0.1em;
    	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    	text-shadow: 0px 1px 1px #f1f1f1;
    	margin-bottom: 5px;
    }
    
    hr {
    	height: 1px;
    	opacity: 0.4;
    	-moz-opacity: 0.4;
    	filter:alpha(opacity=4);
    	background-color: #fff;
    	border-top: 1px solid #000;
    	margin-bottom: 10px;
    	margin-top: 10px;
    }
    
    .button {
    	position: relative;
    	display: block;
    	background-color: #fe57a1;
    	border-radius: 10px;
    	width: 70px;
    	height: 20px;
    	padding: 4px;
    	border: 1px solid #4d4d4d;
    }
    
    	.button p {
    		color: #f1f1f1;
    		text-shadow: 0px 1px 1px #4d4d4d;
    		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    		letter-spacing: 0.1em;
    		text-transform: uppercase;
    		font-size: 0.7em;
    		position: relative;
    		display: block;
    		text-align: center;
    	}
    
    	.button a {
    		text-decoration: none;
    	}
    
    	#page-wrapper {
    		width: 100%;
    		padding-top: 15px;
    	}
    
    	.content {
    		border-radius: 10px;
    		background-color: rgba(255, 255, 255, 0.7);
    		background: rgba(255, 255, 255, 0.7);
    		color: rgba(255, 255, 255, 0.7);
    		padding: 10px;
    		position: relative;
    		width: 960px;
    		margin: 0 auto;
    	}
    
    	.page-split-wrap {
    		display: none;
    		position: relative;
    		background-image:url('images/fabric-repeat.png');
    		width: 100%;
    		height: 0px;
    		background-color: #000000;
    	}
    
    	.page-split-head {
    		display: block;
    		background-image:url('images/fabric-top-repeat.png');
    		background-color: #ffffff;
    		height: 35px;
    		border-top: 1px solid #f1f1f1;
    	}
    
    	.page-split-footer {
    		display: block;
    		position: absolute;
    		bottom: 0;
    		background-image:url('images/fabric-bottom-repeat.png');
    		background-color: #ffffff;
    		height: 35px;
    	}
    
    	.page-split-content {
    		width: 960px;
    		margin: 0 auto;
    		padding-top: 35px;
    		padding-bottom: 35px;
    		padding-left: 20px;
    		padding-right: 20px;
    	}
    
    	</style>
    
    </head>
    <body>
    
    	<div id="page-wrapper">
    		<div class="content">
    			<h1><a href="http://www.redesigntheweb.net">RedesignTheWeb.net</a></h1>
    			<h2>jQuery Apple-style page split demo.</h2>
    			<hr />
    			<p>Here's where you'd put surrounding content. You could put anything from text, to images to any markup your imagination can possibly stretch to. Then, say for example, you wanted to elaborate with an image of some sort, but you didn't want the user to go to ANOTHER page, you could quite easily use this little technique to show information in the hidden content below. Give the button a click to get it going!</p>
    				<div class="button open-button"><a href="#"><p>Open me!</p></a></div>
    			</p>
    	</div> <!-- .content -->
    
    		<div class="page-split-wrap">
    			<div class="page-split-head"> </div>
    				<div class="page-split-content">
    					<h1 class="inside">Holy swanky-animation, Batman!</h1>
    					<p class="inside">Here's some content, hidden in the depths of the page split. Click here to close this gaping hole back up again.</p>
    					<div class="button close-button"><a href="#"><p>Close me!</p></a></div>
    				</div> <!-- .page-split-content -->
    				<div class="page-split-footer"> </div>
    		</div> <!-- page-split-wrap -->
    
    		<div class="content"><p>Check this out - this is just a bit of text which comes after the split.</p></div>
    
    	</div> <!-- #page-wrapper -->
    
    </body>
    </html>

    Sorry for such long codes. I am merely desperate to get the project working.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    It looks like this is actually working exactly as you're expecting, but you simply don't have any other content that gets pushed down, so you're not seeing the effect because of that.

    If you add some extra content below the menu, you should see it

    HTML Code:
    <body>
     <div class="button open-button" onMouseUp="Toggle('page-split-wrap',0,250,500);" ><p>Toggle</p></div>
    
     <div id="page-split-wrap">
      <div class="page-split-head"> </div>
      <div class="page-split-content">
       <p class="inside">Content in here</p>
       <p class="inside">Content in here</p>
      </div>
     </div>
    
     <p>Some other content here</p>
     <p>Some other content here</p>
     <p>Some other content here</p>
    
    </body>
    Of course if you want to get a sense of the entire site being pushed down even more, you could move the button to below the menu as well.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm, weird... it did work on merely the single code and document... but when I put it in my website, it does not work. Here is the code.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
    <script type='text/javascript' src='/js/lib/mootools-core-1.3-full-compat-nc.js'></script>
    <script  type="text/javascript">
    
    /*<![CDATA[*/
    
    function Toggle(id,close,open,ms){
     var obj=document.getElementById(id),o=Toggle['zxc'+id],to;
     if (!o&&obj){
      Toggle['zxc'+id]=o={
       obj:obj,
       now:0,
       ms:500,
       ud:true
      }
     }
     if (o){
      ms=typeof(ms)=='number'?ms:o.ms;
      obj.style.display='block';
      to=o.ud?open:close;
      clearTimeout(o.dly);
      animate(o,o.now,to,new Date(),ms*Math.abs((to-o.now)/open));
      o.ud=!o.ud;
     }
    }
    
    function animate(o,f,t,srt,mS){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      o.now=Math.max(now,0);
      o.obj.style.height=o.now+'px';
     }
     if (ms<mS){
      o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
     }
     else {
      o.now=t;
      o.obj.style.height=o.now+'px';
      if (t==0){
       o.obj.style.display='none';
      }
     }
    }
    
    
    /*]]>*/
    </script>
    <script type="text/javascript">
    animatedcollapse.addDiv('jason', 'optional_attribute_string')
    //additional addDiv() call...
    //additional addDiv() call...
    animatedcollapse.init()
    </script>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
    <div id="contain">
    <div id="header">
    <div id="hwrapper">
    		<a href="#" id="logo"><img src="logo1.png" alt="TEMPORARY LOGO" width="340px" height="150px" onmouseover='alert("Temporary Logo Placeholder")'/></a>
            </div>
        </div>
    
    <div id="container">
    	<div id="line">
    </div>
    <div id="navbar">
        <div id="nav">
        	<ul>
            	<li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://www.apple.com">Apple</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
                <li><a><div class="button open-button" onMouseUp="Toggle('page-split-wrap',0,250,500);" >Toggle</div></a>
    
     <div id="page-split-wrap">
      <div class="page-split-head"> </div>
      <div class="page-split-content">
       <p class="inside">Content in here</p>
       <p class="inside">Content in here</p>
      </div>
     </div></div></li>
            </ul>
        </div>
     
        <div id="body">
        <div id="wrapper">
        	<h2>Title</h2>
            <p>Content</p>
    It doesn't work like this, all it does is bring down a drop down menu - is there anything I'm doing wrong?

    Thanks

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It's a bit hard to tell what's going on, but I suspect that you have a few problems with your markup. Your example wasn't a complete HTML document and has a couple of issues with it. Do you have this page up online somewhere for me to look at?
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Here's the whole website; javascript, css, html I pasted on this site. Doesn't know if it'll be on for a long time - or will it even work on your side?

    But I'm willing to give it a go as long it solves my issue...

    http://pastehtml.com/view/ch4fi5t38.html

    Thanks in advanced again!

  6. #6
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by luxuri View Post
    Hi,

    Here's the whole website; javascript, css, html I pasted on this site. Doesn't know if it'll be on for a long time - or will it even work on your side?

    But I'm willing to give it a go as long it solves my issue...

    http://pastehtml.com/view/ch4fi5t38.html

    Thanks in advanced again!
    It looks like everything is happening *almost* as it should.

    The reason your site isn't being pushed down when the menu appears is because you have a fixed height set on the #navbar <div> and the <ul> inside of that. Because they are a fixed height, the menu does not force the page down further. You could move the #page-split-wrap <div> to directly above the #body <div> and then it should work exactly as intended.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!

    I did what you told me to, I placed the #page-split-wrap <div> to between the #body and #wrapper, and it works really well. Thank you again so much!

    I'll know now where to seek for help when I'm in trouble! Thanks for your help again.


Tags for this Thread

Bookmarks

Posting Permissions

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