CODEWITHSUNDEEP
jqueryhtmlresizecss-positionfluid
Mafia
Mafia

Reputation: 792

jQuery: Relocate absolute-position of DIV (top & left properties) on WINDOW RESIZE

Language: jQuery

I have a bunch of DIVs on a page.
I'm trying to change their absolute-position (top/left properties) each time the window resizes (to make them proportional to the viewport, while maintaining their original layout).

I am successful at changing the width & height of my DIVs (but this is not my concern, never mind that, because I am going to change font + width & height via Media Queries), my main concern lies at being unable to adjust these DIVs' top/left positioning.

I am almost there, but can't figure out how to make this work?

User Chris Barr played with this for a bit, but was not able to get very far:

Here is the Javascript that I am using:

$(document).ready(function() {
    // THIS GETS WIDTH OF CONTAINER
    var cw = $('#container').width();
    // THIS GETS ORIGINAL FONT SIZE
    var fontSize = $('.box').css('font-size');
    // THIS GETS ORIGINAL ABSOLUTE POSITION OF DIV
    var left = $('.box').css('left');

    $(".box").width(cw / 5).height(cw / 5);
    $('.box').css("font-size", fontSize / 5 + "px");
    $('.box').css("left", left / 5 + "px");

    $(window).resize(function() {
    // THIS GETS WIDTH OF CONTAINER
    var cw = $('#container').width();
    // THIS GETS ORIGINAL FONT SIZE
    var fontSize = $('.box').css('font-size');
    // THIS GETS ORIGINAL ABSOLUTE POSITION OF DIV
    var left = $('.box').css('left');

    $(".box").width(cw / 5).height(cw / 5);
    $('.box').css("font-size", fontSize / 5 + "px");
    $('.box').css("left", left / 5 + "px");
    });
});​

You can view it in action here - jsFiddle: http://jsfiddle.net/kjvSc/1/

Any help & guidance would be greatly appreciated!

Upvotes: 0

Views: 1739

Answers (2)

Chris Barr
Chris Barr

Reputation: 33972

Like @Jiskiras says, that will return a string pixel value of 16px where you just want to get the number 16 out instead.

So, the short answer is to do this: parseInt($('.box').css('font-size'));

Edit: I tried messing with your fiddle a bit, but I didn't get very far: http://jsfiddle.net/kjvSc/4/

Upvotes: 1

Jiskiras
Jiskiras

Reputation: 84

This is what I was able to come up with: http://jsfiddle.net/kjvSc/3/

Here's the problem: 

$('.box').css('font-size');

The above returns 16px. You can't divide 16px by 2. You have to divide 16 by 2 and then append the px.

Instead of trying to do that with jQuery, I'd recommend you use media queries in CSS. That way, your jQuery updates with height/width, and depending on what they are set to, your media query kicks in and updates the font-size.

Upvotes: 1

Related Questions