Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    47
    Thanks
    7
    Thanked 0 Times in 0 Posts

    variables not resetting on window resize

    For some reason, I'm having trouble getting my variables to reset the height of a specific div as the window is resized.

    I have an unordered list of beer that includes and image and name for each beer. It looks like this in the html code.

    Code:
    <ul>
         <li>
              <div class="beer-details-cntr beer-constant"><img src="beer-image-file-here" /></div>
              <h2>Beer Name Goes Here</h2>
         </li>
         <li>
              <div class="beer-details-cntr"><img src="beer-image-file-here" /></div>
              <h2>Beer Name Goes Here</h2>
         </li>
            .
            .
            .
    </ul>
    The problem is that the images are not all the same height, so I'm having trouble getting the beer names to line up in a row (four beers are listed in a single row). Now, this would be easy in a static website, as I could simply set a min-height on .beer-details-cntr div. However, this is a responsive site, so the images are constantly varying in width and height. This is where I'm trying to use window resize to reset the height of of all .beer-details-cntr divs based on the height of the div that also includes the class .beer-constant. My code looks like this:

    Code:
    $(document).ready(function() {
    	var currentHeight;
            currentHeight = $(".beer-constant").height();
    	$(".beer-details-cntr").height(currentHeight);
    });
    
    $(window).resize(function() {
    	var adjustedHeight;
            adjustedHeight = $(".beer-constant").height();
    	$(".beer-details-cntr").height(adjustedHeight);
    });
    I know the resize function is triggering, b/c I tested it with an alert. However, it doesn't matter how much I resize the window, the .beer-details-cntr div stays at the size that is set in the document.ready function. I'm clueless as to why the variables won't change. Any help would be appreciated.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    well, is the height of .beer-constant chaning on resize? can we see the css for .beer-constant and .beer-details-cntr

  • Users who have thanked DanInMa for this post:

    mathruD (07-30-2013)

  • #3
    New Coder
    Join Date
    Apr 2011
    Posts
    47
    Thanks
    7
    Thanked 0 Times in 0 Posts
    You were correct. The problem was that I was actually setting the height of .beer-details-cntr so despite the fact that the image was changing sizes, the height of that div wasn't changing with it. So what I did was add a call to reset the height of .beer-details-cntr to "auto" on window resize. And that did the trick. Thanks for bringing that to my attention. So now it just looks like this:

    Code:
    $(document).ready(function() {
    	var currentHeight;
            currentHeight = $(".beer-constant").height();
    	$(".beer-details-cntr").height(currentHeight);
    });
    
    $(window).resize(function() {
            $(".beer-details-cntr").css('height','auto');   //added this
    	var adjustedHeight;
            adjustedHeight = $(".beer-constant").height();
    	$(".beer-details-cntr").height(adjustedHeight);
    });


  •  

    Posting Permissions

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