I have made a jquery script that relies on variables for viewport width and viewport height.
This is the script with the viewportwidth and viewportheight variables, stored in its own document:
var viewportwidth,viewportheight;"undefined"!=typeof window.innerWidth?(viewportwidth=window.innerWidth,viewportheight=window.innerHeight):"undefined"!=typeof document.documentElement&&"undefined"!=typeof document.documentElement.clientWidth&&0!=document.documentElement.clientWidth?(viewportwidth=document.documentElement.clientWidth,viewportheight=document.documentElement.clientHeight):(viewportwidth=document.getElementsByTagName("body")[0].clientWidth,viewportheight=document.getElementsByTagName("body")[0].clientHeight);
Here is the script:
function kjør() {
if ((viewportwidth / viewportheight) >= 1.33) {
$('#redline').appendTo('body');
$('#sitewrap').on('scroll', function(e) {
if ($(this).scrollTop() > (viewportheight / 100 * 40)) {
$('body').addClass('fix');
$('#headerwrap').appendTo('body');
} else {
$('body').removeClass('fix');
$('#headerwrap').appendTo('header');
}
$("#logo-top").css("opacity", 1 - $(this).scrollTop() / (viewportheight / 100 * 30));
});
} else {
$('#headerwrap').appendTo('body');
$('#redline').prependTo('#headerwrap');
$('body').removeClass('fix');
};
};
$(function() {
kjør();
$(window).resize(kjør());
});
As you can se at the bottom. I have tried making it so that the script will update once window is resized. This doesnt work, however. The script will still use the viewportwidth and viewportheight that were established on pageload.
How can I make the script reevaluate viewport height and viewport width on window resize?
kjør()function to the resize handler. You need to give it the function reference instead:$(window).resize(kjør);