SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a problem in same height jquery script (wordpress template)

    hello

    hey

    my site is in this address: z-ls DOT info
    it's a wordpress site.

    a added this jquery code to cause the post content (c2) and the widget(widget) to be in the same height,
    but it doesn't move, something cause it to stuck at this point

    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
    var colHeight = Math.max($('#c2').height(), $('.widget').height());
    $('#c2, .widget').height(colHeight);
    });
    </script>
    a line before the last one i tryed:
    $('.widget').height() = colHeight + 50;

    what is wrong ?

    thanks

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    WordPress comes with jQuery pre-enabled so you don't need to request the source for it again, also you will need to use jQuery instead of $ as by default WordPress forces the jQuery.noConflict() method to avoid library conflicts.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey chris

    thanks for your reply.
    i know it's enabled only if i use wp_enqueue_script function.
    any way i sayed to myself let's try it and ...
    the samething no change

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I tried just the code you posted, and it seemed to work fine. Can you link to a live example? Can somebody please help me with my reading comprehension?
    Last edited by sdleihssirhc; Jan 26, 2012 at 01:37. Reason: ;_;
    I'm the web overlord for Graphic Business Systems

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure

    http://z-ls.info/

    the bottom near the footer

  6. #6
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Found the problem:

    The #c2 element has 1507px height, a 30px bottom padding, and a 10px bottom border.
    The .widget element has 1507px height, a 10px top padding, a 10px bottom padding, and a 10px bottom border.

    After you add everything up, the #c2 element is 10px taller than the .widget element, even though they both have a height of 1507px.

    It's your call on how you want to fix it, but the simplest solution is probably to just change the #c2's bottom padding to 20px.
    I'm the web overlord for Graphic Business Systems

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    amyzing

    thanks very much

    if you don't mind i'm asking i can wait to the morning :-)

    1. how did you calculated both elements heights ? in the final source code i can't see any height output for this elements
    2. in cases like this wich elements envolved ? if i understand from your answer: padding and border
    maybe i don't understand what border is but I would never guess it's a factor in the final height

  8. #8
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    1. By using Chrome's awesome Web Inspector, basically. If you right-click on the page, you can "Inspect Element" and get a wealth of information.

    a.png

    b.png

    2. The problem is, what do you mean when you say "height"? The browser thinks you're only talking about the height of the content--not including padding or border. So it did what it thought you wanted it to do.

    c.png

    This is one of those things I forget every single time I mess with an element's height. It doesn't look quite right, and then I realize that I accidentally included some padding as well...
    I'm the web overlord for Graphic Business Systems

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2012
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot for the help

  10. #10
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,220
    Mentioned
    237 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    @sdleihssirhc ; I love your "ha"


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
  •