1

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

mikey
  • 50
  • 7

2 Answers2

1

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...

Community
  • 1
  • 1
fabrigm
  • 648
  • 1
  • 6
  • 14
1

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); });

});
simey.me
  • 2,147
  • 1
  • 19
  • 21
  • and of course, if you need to remove the event binding for a reason: `$(window).off("resizeBoxes");` – simey.me Sep 04 '13 at 01:05
  • I have thought about on mousemove however I don't think this would work on touch screen device, correct me if i am wrong.(something i forgot to mention). – mikey Sep 04 '13 at 01:06
  • correct, there's no `mousemove` event, but the other two triggers still stand. you could also use a `setInterval()` timer instead. I'll update my answer to show :) – simey.me Sep 04 '13 at 01:08
  • 1
    Great thanks that works, can't believe I didn't think of using setInterval. thank you for your help – mikey Sep 04 '13 at 01:17
  • Good news, just make sure you look over my answer once more so you don't miss the important (for your mobile users) bit of DOM traversal I took out of the event. You really want to keep DOM traverals/manipulations out of loops if possible :) – simey.me Sep 04 '13 at 01:20