[jQuery] Sum of the height of all dynamically loaded anchors

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

[jQuery] Sum of the height of all dynamically loaded anchors

Post by Wolfie »

pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


Hi all,


I have a menu which dynamicaly load anchors on page depending of the database records, so when I click on one menu button I have for example 5 anchors on page, and when I click on second menu button I have 12 anchors.

The anchors have diferent height depending on how many lines of text they have, and I need to calculate the sum of the all anchors loaded on page, to make the scrolling page, cause some of theme will be hidding behind some div.

I did something like this :

Code: Select all

 
$steps = $(".data a").length;
            $h = $(".div a").height;
            $obj = $(".data a");
            $(".data a").each(function() {
                $height = $(".data a").height();
            });
            return $height;
 
Where $steps is the number of all anchors on the loaded page, $h should be the height of an anchor , but it doesn't work, also each() doesn't work, please help.....
I need to calculate the sum of the haight of all anchors on page.....


pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by pickle »

- You're using .height in one place, and .height() in another - which is the correct one?
- You never use $obj after creating it.
- The each() construct loops through all the results of the associated selector. Inside each(), "this" refers to the current element - which is what you want to check the height of.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by Wolfie »

Ok, I have changed the way to move my div, but now I need only to get the height of the dynamicaly loaded div

I am doing this :

Code: Select all

 
$h = $("#content_bottom").height();
 
For static div it works fine but not for dynamic.....
Enabody now how to handle this issue ?
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by John Cartwright »

You should be able to access elements dynamically loaded into the DOM. Can you post your updated source? (what you have posted so far is unclear).
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by Wolfie »

Just forget about each loop, now I only have to get the height of the dynamically loaded div and here is the code :

Code: Select all

 
$('a[href="aktualnosci.php"]').click(function(){
      $('#content_bottom').load('dataprocess.php', {'kategory':$('a[href="aktualnosci.php"]').attr('title')}, function() {
            $(this).hide().animate({"height": "toggle", "opacity": "toggle"}, { duration: "slow" });//.fadeIn('slow');
            $steps = $(".data a").length;
            $h = $("#content_bottom").height();
        });
      return false;
   });
 
But the thing is that firebug shows that $h wariable is 1....so it is some error....
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by John Cartwright »

I've never actually seen anyone prepend their variables in javascript with $, like in PHP. Are you sure thats what was desired? What happens when the run the following?

Code: Select all

 
$('a[href="aktualnosci.php"]').click(function(){
      $('#content_bottom').load('dataprocess.php', {'kategory':$('a[href="aktualnosci.php"]').attr('title')}, function() {
            $(this).hide().animate({"height": "toggle", "opacity": "toggle"}, { duration: "slow" });//.fadeIn('slow');
 
            var test = $("#content_bottom").height();
            alert(test);
        });
      return false;
   });
 
Secondly, why exactly do you need to know the height of this element? You can probably design the CSS to incorporate your style requirements.
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by jayshields »

I don't think you can prefix variables with $ in JavaScript. He's probably confused it with the jQuery syntax ($ function call).
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by Wolfie »

Well, I can prefix it with $

for example this :

Code: Select all

 
$h = $("#frame").height();
 
Works just fine, but the div #frame is the static div, and #content_bottom is dynamic div and I think this is the problem

When I am using this :

Code: Select all

 
var test = $("#content_bottom").height();
alert(test);
 
I get the alert with '1' text, the same value as when using this :

Code: Select all

 
$h = $("#content_bottom").height();
 
Checked in firebug......
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by kaszu »

.height() will return current height which is set by animation

Code: Select all

$(this).hide().animate(...);  //Here you hide the element and then start animation from height 0 to X, so it's impossible to determine inner/actual height.
...
$h = $("#content_bottom").height(); //which you are trying to get here
you need to get height before animating that element

Code: Select all

$h = $("#content_bottom").height();
$(this).hide().animate(...);
Wolfie
Forum Commoner
Posts: 37
Joined: Wed Jan 28, 2009 8:40 am
Location: Poland

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by Wolfie »

Oh man ! You are awesone 8)


Thank u very much !
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by pickle »

<offtopic a bit>
You are allowed to use "$" in javascript variables. That's why the shortcut for the jQuery (and possibly other libraries)object is just "$" - that's a variable. Prepending "$" is sometimes done in jQuery plugins to indicate that the variable represents a jQuery object.

For example, if I'm doing a bunch of different work on a single selector (and for some reason I can't chain), you would do this:

Code: Select all

$anchors = $("a");
$anchors.show();
$anchors.hide();
$anchors.load('http://www.mysite.com/ajaxlinktextloader.php');
The "$" lets someone know who's quickly looking at code realize that "$a" is a jQuery object.
</offtopic>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
pankajnagarkoti70
Forum Newbie
Posts: 4
Joined: Fri Sep 25, 2009 5:31 pm

Re: [jQuery] Sum of the height of all dynamically loaded anchors

Post by pankajnagarkoti70 »

The anchors have diferent height depending on how many lines of text they have, and I need to calculate the sum of the all anchors loaded on page, to make the scrolling page, cause some of theme will be hidding behind some div.
Post Reply