CODEWITHSUNDEEP
javascriptcssfirefoxscale
user1519225
user1519225

Reputation: 41

Trying to set a div to auto in Firefox

I have a div that dynamically scales based on the viewport size.

function zoomSquare() {
    var $square = $('.square');

    var viewportWidth = $square.parent().width();
    var squareWidth = $square.width();
    var desiredWidth = Math.round(viewportWidth * 0.95);
    var zoom = (desiredWidth / squareWidth);

    $square.css('zoom', zoom);
    $square.css('-moz-transform', 'scale(' + zoom + ')');
    $square.css(  '-o-transform', 'scale(' + zoom + ')');
}

// When the browser is resized
$(window).on('resize', function(){ zoomSquare(); });

// When the page first loads
$(document).ready(function(){
    zoomSquare();
});

http://jsfiddle.net/sarahwhatsup/YDwds/8/

I want have the parent set to auto to as the div scales, the divs underneath adjust their position. This works in Chrome, IE, Safari but for some reason I can't get this to work in Firefox. Anyone have any idea?

Upvotes: 0

Views: 69

Answers (1)

abney317
abney317

Reputation: 8492

You could change the height of the wrapper div.

$('.wrapper').css('height', squareWidth * zoom);

http://jsfiddle.net/YDwds/22/

Upvotes: 1

Related Questions