CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mikey
mikey

Reputation: 50

Trouble getting height to scale to width on responsive website

Im trying to have a div re-size so that the height stays the same width as the height. The divs are constantly changing size,

The width changes size because of percentages, however the height is changed using Jquery.

Html

<div id="inner_container">
        <div id="Sbox1" class="select_tile" > </div>
        <div id="Sbox2" class="select_tile" > </div>
        <div id="Sbox3" class="select_tile" > </div>
        <div id="Sbox4" class="select_tile" > </div>
        <div id="Sbox5" class="select_tile" > </div>
        <div id="Sbox6" class="select_tile" > </div>
        <div id="Sbox7" class="select_tile" > </div>
        <div id="Sbox8" class="select_tile" > </div>
<div class="clr"> </div>

Css

#inner_container 
{    width:98%; min-width:50%; max-width:1600px; 
     margin:auto; padding:1% 1%; text-align:center; background:;}

.select_tile 
{    width:23%; min-width:50px; min-height:50px;  
     background:green; margin:1%; float:left;}

Jquery

   $(window).resize(function() {
      var ccW = $('.select_tile').width();
      $('.select_tile').css("height", ccW);
   });

This works fine for when the browser window is re-sized but the #inner_content div re-sizes when a button is pressed, so the height of the div.select_tile stays the same as it was before the button press but the width changes.

I was wondering if there was an event that waits for a change in the width or for something to change.

basically I want the width and height at 1:1 ratio to stay the same but scale to the size of the browser window on any change on either property.

Any assistance on this would be much appreciated, Thanks

edit: added html

Upvotes: 1

Views: 717

Answers (2)

simey.me
simey.me

Reputation: 2217

you could create your own event :)

$(function() {

  // moved this out of the event so it doesn't
  // do a DOM traversal every 300ms!!! :)
  var $tiles = $('.select_tile');

  // this is your own custom function, which can be triggered
  // as you see below
  $(window).on("resizeBoxes" , function(e,$selector) {

     //set your box resize code here.
     var ccW = $selector.width();
     $selector.css("height", ccW);

  });

  // using 300 ms as it's not too short to kill a device,
  // and not too long to show noticable lag.
  // importantly though you want the resize event to
  // be succinct and easy on cpu.

  var resizeTimer = setInterval( function() {
    $(window).trigger("resizeBoxes",$tiles);
  }, 300);


  $(window).on("resize", function(e) { $(window).trigger("resizeBoxes",$tiles); });
  $("#button").on("click", function(e) { $(window).trigger("resizeBoxes",$tiles); });
  // this next one might be best for you :)
  $(window).on("mousemove", function(e) { $(window).trigger("resizeBoxes",$tiles); });

});

Upvotes: 1

fabrigm
fabrigm

Reputation: 658

You have one solution here jquery-how-to-determine-if-a-div-changes-its-height-or-any-css-attribute with the setTimeOut() function but I would make the button trigger that change...

Upvotes: 1

Related Questions