Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

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 08-17-2012, 10:06 PM   PM User | #1
LimeX
New Coder

 
Join Date: Dec 2011
Posts: 25
Thanks: 7
Thanked 0 Times in 0 Posts
LimeX is an unknown quantity at this point
jQuery onClick div split

Hi!
Upon pressing the button i want it to split into two parts, one upper and one lower (vertically). Inbetween these parts i want another div to appear, which will be 100% wide.
Right now i have so that when the button is pressed, the div changes from a height of 0 to a full height and toggeling a border.
However, the script I have now doesn¨t work if two different parts of the div is pressed. Right now the script looks like this:

Code:
var divh = document.getElementById('people').offsetHeight;
  document.getElementById("people").style.height = "0px";
  jQuery("body.main #people").css('border', '0');
	jQuery("div.showmore").toggle(function(){
  		jQuery("div#people").animate({
    		height: divh
  		},500).css('border-bottom', '1px solid #111');
  	},function(){
    	jQuery('div#people').animate({
    		height: ['0px', 'swing']
    	},400).css('border', '0');
  		});
This code is both slow and it doesnt work
The html code looks like this:

Code:
<div class="showmore"></div>
<div id="people"></div>
<div class="showmore"></div>
How would I get this to work?
I'm thinking of something with variables or alike, but I might be doing this over complicated.
If the div wasn't wider than the button it would've been easier. This might be solved by some CSS hack.

Thank you in advance.
//Will
LimeX is offline   Reply With Quote
Old 08-18-2012, 03:16 PM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,495
Thanks: 18
Thanked 361 Times in 360 Posts
sunfighter is on a distinguished road
You want to split a div into a top part and a bottom part..... Where do you want that break to occur, in the center, 25% top - 75% bottom? And most importantly, what do you want done with the contents of the div? How is that distributed?
sunfighter is offline   Reply With Quote
Old 08-18-2012, 03:29 PM   PM User | #3
LimeX
New Coder

 
Join Date: Dec 2011
Posts: 25
Thanks: 7
Thanked 0 Times in 0 Posts
LimeX is an unknown quantity at this point
Quote:
Originally Posted by sunfighter View Post
You want to split a div into a top part and a bottom part..... Where do you want that break to occur, in the center, 25% top - 75% bottom? And most importantly, what do you want done with the contents of the div? How is that distributed?
Either I split a div in the middle (50%) or I make two seperate divs that looks like they are the same, which shouldn't be any problem. The problem is to make it work with javascript, so that when one part of the button is pressed (one div), the other button's toggle function i triggred.
Look here, and you'll see what I mean.
http://codepen.io/anon/pen/Jcmkx
LimeX is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of 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:58 PM.


Advertisement
Log in to turn off these ads.