преобразование этой функции из Javascript в jQuery

Я пытался снова и снова использовать эту функцию для jQuery, но я не могу заставить ее работать правильно. Может ли кто-нибудь мне помочь?преобразование этой функции из Javascript в jQuery

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

вот моя попытка преобразовать его 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'"); 

}

источник

2011-10-30 Anonymous

document.getElementById ("sth") можно заменить на $ ("# sth"), что является первым изменением. Что вы подразумеваете под этим, не работает должным образом? – lc2817

Как выглядит ваша лучшая попытка (сообщение в вашем вопросе)? –

CSS не «понимает» JavaScript. 'document.getElementById ('crofthouse'). width = ...' должен перейти к '$ (" # crofthouse "). css (" width ", (newHeight/2) * 1.33)'. Обратите внимание на размещение цитаты. Кроме того, рассмотрите возможность использования селектора mutli-CSS или привязки или использования переменной, чтобы избежать повторного создания jQuery (повторного evaulating selector) каждый раз. 'var house = $ (#" crofthouse "); ... house.css (...) '. Это также поможет уменьшить ошибки, такие как '$ (« main »)' –

Должно работать, попробуйте.

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

источник

2011-10-30 22:18:15 Fatih

Интересно, почему вы хотите преобразовать рабочий JavaScript в jQuery. Он всегда будет медленнее, чем родной. – Fatih

Да, но может не работать кросс-браузер. Одним из самых больших преимуществ использования jQuery для таких простых вещей, как это, является то, что у вас есть команда экспертов JS, которые делают все, что работает в разных браузерах, легко. И большинство функций jQuery делегируют как можно быстрее исходные JS-функции, если они присутствуют. – GregL

Это должно сделать ..

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

источник

2011-10-30 22:24:42

Я пробовал это, и он никогда не работал. Мне нужно изменить окно window.onresize = resizeImage; –

@user, этот код должен заменить весь код, который вы отправили в своем вопросе .. как функция, так и привязка события .. (* он делает все это *) –

@user, была ошибка .. 'newHeight' should be 'height' –

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

или если вы действительно хотите Jquery подход;

$(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'; 
    }

и для записи я не уверен, что croftHouse.height делает .. Вы имели в виду croftHouse.style.height ??

источник

2011-10-30 23:34:51 rlemon

@rlemon .. может быть' crofthouse' является '' .. –

преобразование этой функции из Javascript в jQuery

ответ

Смежные вопросы