converting this function from Javascript to jQuery

Question

I've tried over and over to change this function to jQuery but I can't seem to get it to run properly. Could anyone give me any help with it at all?

window.onresize = resizeImage;

function resizeImage(){
    var newHeight = document.documentElement.clientHeight;
    var newWidth = document.documentElement.clientWidth;
    document.getElementById('crofthouse').width = (newHeight / 2) * 1.33;
    document.getElementById('crofthouse').height = (newHeight / 2);
    document.getElementById('main').style.width = (newHeight / 2) * 1.33;
    document.getElementById('main').style.height = (newHeight / 2);

    var margin = (newHeight - document.getElementById('crofthouse').height) / 2;
    document.getElementById('main').style.margin = margin + ',auto,' + margin + ',auto';
}

here's my attempt at converting it window.onresize = resizeImage;

function resizeImage(){
var newHeight = document.documentElement.clientHeight;
var newWidth = document.documentElement.clientWidth;

$("#crofthouse").css("width, (newHeight /2) * 1.33")
$("#crofthouse").css("hegiht, (newHeight /2)")
$("#main").css("width, (newHeight /2) * 1.33")
$("#main").css("height, (newHeight /2)")


var margin = (newHeight - $('#crofthouse').css("height) / 2");
$('main').css("margin = margin + ',auto,' + margin + ',auto'");

}

document.getElementById("sth") could be replaced by $("#sth") that is a first change. What do you mean by it doesn't run properly? — lc2817
– lc2817, Commented Oct 30, 2011 at 22:13
What does your best attempt look like (post in your question)? — Jared Farrish
– Jared Farrish, Commented Oct 30, 2011 at 22:16
CSS doesn't "understand" JavaScript. document.getElementById('crofthouse').width = ... should go to $("#crofthouse").css("width", (newHeight /2) * 1.33). Note the quote placement. Also, consider using the mutli-CSS selector or chaining or using a variable to avoid re-created a jQuery (re-evaulating a selector) each time. var house = $(#"crofthouse"); ... house.css(...). That will also help reduce errors like $("main") — user166390
– user166390, Commented Oct 30, 2011 at 22:25
You do realize that the resulting jQuery approach will run slower than the straight js approach. jQuery is a library wrapped on top of javascript, which means a well written function will do the same thing as jQuery does in the mystical forest before it spits out it's magic, but without all of the overhead. What you want is to keep your original function with a few updates. I will post. — rlemon
– rlemon, Commented Oct 30, 2011 at 23:25

rlemon · Accepted Answer · 2011-10-30 23:34:51Z

window.onresize = resizeImage;

function resizeImage(){
    var newHeight = document.documentElement.clientHeight;
    var newWidth = document.documentElement.clientWidth;
    var croftHouse = document.getElementById('crofthouse');
    croftHouse.height = (newHeight / 2) * 1.33;
    croftHouse.width = (newWidth / 2);
    var main = document.getElementById('main');
    main.style.width = (newHeight / 2) * 1.33;
    main.style.height = (newHeight / 2);

    var margin = (newHeight - croftHouse.height) / 2;
    main.style.margin = margin + ',auto,' + margin + ',auto';
}

or if you really want a jquery approach;

$(window).resize(resizeImage);
    function resizeImage(){
        var newHeight = document.documentElement.clientHeight;
        var newWidth = document.documentElement.clientWidth;
        var croftHouse = document.getElementById('crofthouse');
        croftHouse.height = (newHeight / 2) * 1.33;
        croftHouse.width = (newWidth / 2);
        var main = document.getElementById('main');
        main.style.width = (newHeight / 2) * 1.33;
        main.style.height = (newHeight / 2);

        var margin = (newHeight - croftHouse.height) / 2;
        main.style.margin = margin + ',auto,' + margin + ',auto';
    }

and for the record i'm not sure what croftHouse.height does.. did you mean croftHouse.style.height??

Gabriele Petrioli · Accepted Answer · 2011-10-31 01:09:11Z

2

This should do it ..

$(window).resize(function(){
    var doc = $(document),
        croft = $('#crofthouse'),
        main = $('#main'),
        height = doc.height(),
        margin = croft.height() / 2;


    croft.add(main).css({
             width:(height / 2) * 1.33, 
             height:(height / 2)
    });
    main.css({ margin: margin + 'px auto' });
});

edited Oct 31, 2011 at 1:09

answered Oct 30, 2011 at 22:24

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

2 Comments

user1021139 Over a year ago

I tried this and it never worked.. do i need to change my window.onresize = resizeImage;

Gabriele Petrioli Over a year ago

@user, this code should replace the whole of the code you posted in your question .. both the function and the event binding.. (it does it all)

GitaarLAB · Accepted Answer · 2015-02-20 20:15:11Z

0

It should work, try it.

$(window).resize(function(){
    var docEl = document.documentElement;
    var newHeight = docEl.clientHeight;
    var newWidth = docEl.clientWidth;
    $('#crofthouse').width((newHeight / 2) * 1.33);
    $('#crofthouse').height((newHeight / 2));
    $('#main').css({
        width: (newHeight / 2) * 1.33,
        height: newHeight / 2 
    );

    var margin = newHeight - (($('#crofthouse').height()) / 2);
    $('#main').css('margin', margin + ', auto, ' + margin + ', auto');
};

edited Feb 20, 2015 at 20:15

GitaarLAB

14.7k12 gold badges62 silver badges83 bronze badges

answered Oct 30, 2011 at 22:18

Fatih Acet

29.8k9 gold badges55 silver badges58 bronze badges

2 Comments

Fatih Acet Over a year ago

I wonder why do you want to convert working JavaScript to jQuery. It will always be slower than native.

GregL Over a year ago

Yes, but may not work cross-browser. One of the biggest advantages of using jQuery for even simple things like this is that you have a team of JS experts making everything work across different browsers seamlessly. And most of the jQuery functions delegate as quickly as possible to native JS functions if they are present.

Collectives™ on Stack Overflow

converting this function from Javascript to jQuery

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related