SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Setting Height

Hybrid View

  1. #1
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting Height

    I've got a couple of AJAX calls on a page. They populate separate but related divs. I'd like both divs to be the same size, so I call this function from both returning functions:

    Code:
    	reSize: function () {
    		var htCat = xHeight(sn_crumbs.elCategories);
    		var htTtl = xHeight(sn_crumbs.elTitles);
    		var maxHt = Math.max(htTtl, htCat);
    		console.log('pre height: ' + htCat + ', ' + htTtl + ' max: ' + maxHt);
    		xHeight(sn_crumbs.elCategories.style.height, maxHt);
    		xHeight(sn_crumbs.elTitles.style.height, maxHt);
    		htTtl = xHeight(sn_crumbs.elTitles);
    		htCat = xHeight(sn_crumbs.elCategories);
    		console.log('post height: ' + htCat + ', ' + htTtl + ' max: ' + maxHt);
    	}
    I'm getting this reply (one page):

    pre height: 275, 0 max: 275
    post height: 275, 0 max: 275
    pre height: 275, 0 max: 275
    post height: 275, 0 max: 275

    So it doesn't look like the height is being updated.

    Any help appreciated.
    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  2. #2
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, there were a number of problems with the above code, and I've nailed most of it, I think. But the underlying problem which persists is that I'm populating the divs' innerHTML, then immediately want to get the size of the div with the newly added content.

    The browser hasn't had a chance to process the new innerHTML content.

    So, is there a way to do that?

    Thx,
    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi AAA,

    I've seen this issue before, especially in Firefox. You might have to use setTimeout to run the resize function a few milliseconds after the innerHTML assignment.

  4. #4
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when div is hidden, height will be zero, I don't know whether you have your style changed before reading height value.

  5. #5
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx for the help, guys. The issue still isn't resolved...

    It has kind of morphed over time, though...

    The problem now is:

    Once the height is set, it stays set, until the page is reloaded. But since we're using AJAX, the page doesn't get reloaded anytime soon. So, how can I reset the height (so that it grows organically, based on content) before pumping new content into innerHTML?

    Thanks again for the help,
    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE

  6. #6
    SitePoint Zealot alfred3x's Avatar
    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, found the solution:

    Code:
    height: auto;
    This allows the div to resize based on the contents.

    Thanks for your help,
    - AAA
    - A. Alfred Ayache
    PHP/MySQL ZCE


Bookmarks

Posting Permissions

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