Go Back   CodingForums.com > :: Client side development > JavaScript programming
Reload this Page JS Pushing bottom div down

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-29-2012, 12:27 PM   PM User | #1
luxuri
New to the CF scene

 
Join Date: Oct 2012
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
luxuri is an unknown quantity at this point
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.
luxuri is offline   Reply With Quote
Old 10-29-2012, 03:40 PM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,383
Thanks: 18
Thanked 350 Times in 349 Posts
sunfighter is on a distinguished road
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>
sunfighter is offline   Reply With Quote
Old 10-31-2012, 02:12 PM   PM User | #3
luxuri
New to the CF scene

 
Join Date: Oct 2012
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
luxuri is an unknown quantity at this point
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
luxuri is offline   Reply With Quote
Reply

Bookmarks

Tags
animation, div, fade, slide

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 11:52 AM.
Advertisement
Log in to turn off these ads.