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
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question JS Pushing bottom div down

    Hi all.

    I posted here earlier and have yet had a response - but that is not what I'm asking for help here again.

    I have since then found another code and again tweaked it so that when I click a particular div, in this case a "Click here" text, the page would split, revealing more content inside similar to an iOS folder.

    However, when I click it, the original content fades away, but I want the bottom content(which is the content below the split) to push down along with the animation.

    Here is the code for how all the JS works.
    Code:
    $(function(){
    	$("#toggle").click(function(){
    		//Check to see if folder is open or closed - tried to use toggle, but wasn't reacting fast enough.
    		if($("#folder").hasClass("normal")){
    			//Make sure no elements are animating
    			if( !$("#top, #bottom, #folder").is(":animated") ) {
    				$("#top, #bottom").animate({height:'30%',opacity:0.2},400);
    				$("#folder").switchClass('normal','expand',400);
    				$("#site").fadeOut('500');
    			}
    		}else{
    			if( !$("#top, #bottom, #folder").is(":animated") ) {
    				$("#top, #bottom").animate({height:'30%',opacity:1},400);
    				$("#folder").switchClass('expand','normal',400);
    				$("#site").fadeIn('500');
    			}
    		}
    	});
    })
    As you can see, #site is set to fadein and fadeout when the div"Toggle" is clicked, along with several other animations. However is it possible so that #site would be pushed down, along with the rest of the animation?

    Thanks all.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Made some changes and add some css[needed]. Don't know why I had to move the site div to the left on reappearance. Here is my version hope it helps.

    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>
    <script type='text/javascript' src='javascript/jquery.js'></script> <!--CHANGE THIS TO YOUR LOCATION-->
    
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#toggle").click(function(){
    		//Check to see if folder is open or closed - tried to use toggle, but wasn't reacting fast enough.
    		if($("#folder").hasClass("normal")){
    			//Make sure no elements are animating
    			if( !$("#top, #bottom, #folder").is(":animated") ) {
    				$("#top, #bottom").animate({height:'30%',opacity:0.2},400);
    				$("#folder").attr('class','expand');
    				$("#site").animate({top: '300px',opacity:0},400);
    			}
    		}else{
    			if( !$("#top, #bottom, #folder").is(":animated") ) {
    				$("#top, #bottom").animate({height:'30%',opacity:1},400);
    				$("#folder").attr('class','normal');
    				$("#site").animate({top: '32px',left:'314px',opacity:1},400);
    			}
    		}
    	});
    });
    </script>
    
    <style type="text/css">
    #top, #bottom, #folder, #site
    {
    	height: 100px;
    	width: 100px;
    	border: 1px solid black;
    	background-color: blue;
    	float:left;
    }
    .normal{
    	background-color: brown !important;
    }
    .expand{
    	background-color: pink !important;
    }
    #site{
    	position:absolute;
    	left: 300px;
    }
    </style>
    </head>
    
    <body>
    <button id="toggle">Animate</button><br />
    <div id="top">top</div>
    <div id="bottom">bottom</div>
    <div id="folder" class="normal">folder</div>
    <div id="site">site</div>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi sunfighter,

    First off, i apologize as I think I have pasted the wrong code. Not sure though, but this is what I have now on my document.

    Thanks very much for your help. I tried putting it in and correcting the css to my liking, but it didnt function like I hope. the #site div would be in a different place afterwards.

    Perhaps if you or anyone can look at the whole site and understand what it looks like currently;
    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>
    Thanks so much if anyone can come across a solution. I'm stuck at this stage and can't progress on my journal!
    Last edited by luxuri; 10-31-2012 at 02:16 PM. Reason: Additional comment


  •  

    Tags for this Thread

    Posting Permissions

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