CODEWITHSUNDEEP
javascriptjquery
user1021139
user1021139

Reputation:

converting this function from Javascript to jQuery

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'");

}

Upvotes: 0

Views: 139

Answers (3)

Fatih Acet
Fatih Acet

Reputation: 29569

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

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

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

Upvotes: 2

rlemon
rlemon

Reputation: 17667

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

Upvotes: 2

Related Questions