first-child selector on (this) in jquery?

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

So I'm writing a plugin for jquery to see if I can figure it out. I need to call the first child of the div that is being called upon and get it's height. So in my plugin:

Code: [ Select ]
var quant = jQuery(this:first-child).height();

this doesn't work;
How do I call the first child of "this"
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Have you tried this.children(:first)? I'm also assuming that since you're using this, that you're inside a jQuery function? A bit more context could help if the substitution doesn't get it.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

thanks UPSguy, I actually figured it out last night about a half hour after I posted. Here's the plugin. You know of any way to improve it?


the plugin:
HTML Code: [ Select ]
 
jQuery.fn.blindToggle = function(speed, easing, callback) {
var tot = ($(this).find(":last").height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'))+ parseInt(this.css('marginBottom')) + parseInt(this.css('marginTop'))) - ($(this).height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'))+ parseInt(this.css('marginBottom')) + parseInt(this.css('marginTop')));
return this.animate({top: parseInt(this.css('top')) < 0 ? 0 : +tot}, speed, easing, callback);
};
  1.  
  2. jQuery.fn.blindToggle = function(speed, easing, callback) {
  3. var tot = ($(this).find(":last").height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'))+ parseInt(this.css('marginBottom')) + parseInt(this.css('marginTop'))) - ($(this).height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'))+ parseInt(this.css('marginBottom')) + parseInt(this.css('marginTop')));
  4. return this.animate({top: parseInt(this.css('top')) < 0 ? 0 : +tot}, speed, easing, callback);
  5. };


the implementation
JAVASCRIPT Code: [ Select ]
 
$(document).ready(function() {
$('#wrapper').css("top",-150);
  $('#hiddenArea').click(function() {
    $('#wrapper').blindToggle(1000,'easeOutBounce');
  });  
});
 
  1.  
  2. $(document).ready(function() {
  3. $('#wrapper').css("top",-150);
  4.   $('#hiddenArea').click(function() {
  5.     $('#wrapper').blindToggle(1000,'easeOutBounce');
  6.   });  
  7. });
  8.  


you can see an example here: blindToggle

When you click on login at the top of the page, the above portion will slide down. You click it again, and it slides up. It still has some measurement issues that I can't quite explain. If you have any ideas to fix it so that the full form hides, please let me know.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

What about if you throw an if statement in to detect the fully 'up' point and toggle display to none when that occurs? You may have to break apart a line or two or add a callback to the animate call, but it's a possibility.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

You mean add an if statement so that when it reaches it's peak "up" state to switch to display:none?

Won't that cause it to "jump"?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Hrmm, I guess it would if you're still in view when you make the switch. Shouldn't it be a matter of just decreasing the css -150px that you've set to a lower number like -200? If you set it *too* high, it really won't matter, because it's only going to go until it's out of frame and then you won't care how much further it goes. That being said, you don't want to go too far, because then bringing it back in would take increasingly longer.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

that specific line doesn't have anything to do with the plugin. It's simply there to hide it initially. What I want to do is calculate the height of the first child, and subtract it from the "top" property of the wrapper.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Rather than calculating the height, why not place the form into a div with overflow:auto and use the div as the moving element?
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I basically want to be able to use this plugin whenever I see fit and to have a simple formula for it. Right now, I know I make a div, which moves. Inside that div are 2 elements. The first element is what is hidden. The second element is what hides it. This is simple for me to understand and if I make the first child a div, I can put anything I want in it, knowing that no matter how much stuff is in that first child, it will still hide all of it.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

OK, I follow - you're doing what I was thinking already. Sorry, it was a chaotic day at work, so this is first I've had to really look at your plugin code. So can you explain the logic of subtracting the padding top and bottom to me? Those elements are within the div space, so I would think you'd want to leave those in the 'tot' amount. Alternatively, have you tried just setting tot the height of the div (#loginform) and trying with just that?
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

because of the box model, padding is added to the height of an object. So if the first child is declared with a height of 20px, and has a top and bottom padding of 10px, the total height of the element is 40px. I didn't want that to cause problems later down the road if the element has padding.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I figured out why it wasn't hiding completely. It's because I hadn't reset the body margin and padding to 0. The code works fine, but wasn't compensating for the default margin around the body that browsers set.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Makes sense. Glad you found it.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

so I want to convert this to use the height property so that both the wrapper height is auto and the login form div container shrinks - advertently shrinking the wrapper div. It's causing a lot of problems for me. Anyone have any ideas on how to do this?

Post Information

  • Total Posts in this topic: 14 posts
  • Users browsing this forum: No registered users and 145 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.