We Keep Coding

Could i make this Jquery resize function more efficient / shorter / cleaner?

i'm new to Jquery and it doesn't look efficient copying the same code in two functions.
Is it possible to make this function more efficient?
By efficient i mean shrinking the code.
What it does is, changing the size of an ID element when it will be resized.
Why i need copy it twice? When i leave the code inside .resize and remove the other inside .ready, the elements will have unset sizes.
It works like i would have it working, but the problem is it doesn't look "clean".
I'm using latest Jquery.
$(document).ready( function() {
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
$(window).resize(function() {
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
});
});

Just move the code you want to run in multiple places into a function, then call it on document ready, and on resize events.
$(document).ready( function() {
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
function layout() {
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
}
layout();
$(window).resize(layout);
});

Put the logic into a named function - then call it on page load and then again on window resize.
$(document).ready( function() {
updateSizes();
var files = ["home.html","test.html","random.html","noob.html"];
var a = 0;
$(window).resize(updateSizes)
function updateSizes(){
var wh = $(window).height();
var ww = $(window).width();
var btn_n = $("#btn_nav button");
btn_n.height(ww*0.05);
btn_n.width(ww*0.12);
}
});

Update window innerheight when resizing window

This far i have succeded to make an Id to have same innerHeight as the window.
However when i resize the window the height stays the same.
Could anyone help me make the Id be the same innerHeight as the window whenever it is resized ?
Here is the code
function height()
{
var h = window.innerHeight;
document.getElementById("id").style.height = h+'px';
}
height();

this approach might play nicer with existing event handlers:
window.addEventListener('resize',function(){
document.getElementById("id").style.height = window.innerHeight + 'px';
});

You could use:
window.onresize = function(event) {
var h = window.innerHeight;
document.getElementById("id").style.height = h+'px';
};

Auto-resizing elements on window change (properly)

I'm making a JavaScript function that auto-resizes a div to same width/height of the window, when the window is resized.
The function is pretty basic, however I've noticed significant "paint" lag when the window is resized. In a JS fiddle, with no other elements on the page or other JavaScript, performance isn't really an issue. However in a real-world project, the lag is really annoying and something I'd like to fix.
I've iterated over a few different techniques but haven't really noticed much performance increase. Is there something I'm missing here? There must be a way to do this that's doesn't kill browser performance.
Here is the first function:
1.
window.onresize = function (event) {
var resize = document.querySelector(".resize");
var w = window.innerWidth;
resize.style.width = w + "px";
resize.style.height = w + "px";
};
This has pretty much the worst performance out of all - http://jsfiddle.net/SY5Tn/
2.
function resizer(e,w) {
e.style.width = w + "px";
e.style.height = w + "px";
}
window.onresize = setInterval(function() {
var e = document.querySelector(".resize");
var w = window.innerWidth;
resizer(e,w);
}, 100);
this has a little better performance. Not much difference though http://jsfiddle.net/SY5Tn/2/
3.
function resizer() {
var resizeLoop;
resizeLoop = setInterval(function() {
var e = document.querySelector(".resize");
var w = window.innerWidth;
e.style.width = w + "px";
e.style.height = w + "px";
}, 100);
function clear() {
clearInterval(resizeLoop);
}
window.onresize = function () {
resizeLoop();
}
document.addEventListener('mouseup', function() {
clear();
document.removeEvenetListener('mouseup');
});
}
resizer();
This was the best I could come up with, although I still get an error "number is not a function"
http://jsfiddle.net/SY5Tn/3/
Is there a better way of doing this? (no Jquery please);
P.S - I can't post this on Code Review as only have 1 rep point over there so it doesn't allow me to post multiple links.

Try this:
resizeLoop = function(){
setInterval(function() {
var e = document.querySelector(".resize");
var w = window.innerWidth;
e.style.width = w + "px";
e.style.height = w + "px";
}, 100);
}

You can solve this by pure CSS also using viewport units.
.resize {
width: 100vw;
}
You can check the support here..

you can add
.resize {
width: 100%;
height: 100%;
}

Executing $(window).load() and $(window).resize() in Drupal 7

I'm trying to resize a couple divs on page load and window resize in drupal 7.
theme.info
name = Theme
description = The Theme
core = 7.x
stylesheets[all][] = css/style.css
scripts[] = js/scripts.js
(the rest)
scripts.js
$(window).load(function() {
getViewport();
});
$(window).resize(function() {
getViewport();
});
function getViewport() {
alert('function hit');
var viewportwidth;
var viewportheight;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
viewportheight = window.innerHeight || document.documentElement.clientHeight || document.body.clientWidth;
}
document.getElementById("content").style.height = (window.innerHeight - 150) + 'px';
document.getElementById('sidebar-first').style.height = (window.innerHeight - 50) + 'px';
}
But neither load, resize, or the function or getting hit. I'm sure it's my ignorance of utilizing this in drupal, but I can't seem to find the answer.
I've even tried including my own jquery library in the info file, but to no avail.
Thanks

No jQuery needed for this code to work, just create some event listeners and kill the $(window) method chains.
window.addEventListener('load', function() { getViewport() });
window.addEventListener('resize', function() { getViewport() });
Note:
You'll want to normalize addEventListener() if you need to target less than IE9. Something like:
if ( window.addEventListener ) {
// Modern browsers
window.addEventListener('load', function() { getViewport() });
window.addEventListener('resize', function() { getViewport() });
} else
// Browsers that need to die
window.attachEvent('onLoad', function() { getViewport() });
window.attachEvent('onResize', function() { getViewport() });
}

how to get width of screen before every resize on page?

I have this code
$(document).ready(function(){
var oldwidth= $(window).width();
$(window).resize(function(){
var nw= $(window).width();
//compare new and old width
});
});
The problem is the old width is only set during loading of document, new width changes during every resize. I want to get the width just before resizing, so I can check if user is decreasing width or increasing width of screen.

In the resize() handler, update oldwidth with the new width as the very last line of the function.
$(document).ready(function () {
var oldwidth = $(window).width();
$(window).resize(function () {
var nw = $(window).width();
//compare new and old width
oldwidth = nw;
});
});

Resize event detection, loging on stop resize:
function resize_event_analysis()
{
var resized_to;
//On resize events
$(window).resize(function()
{
clearTimeout(resized_to);
resized_to = setTimeout(function() {
var now = new Date();
now.toString('yyyy-MM-dd, hh:mm:ss');;
var dwidth = "Device width = " + window.screen.width;
var swidth = "Window width = " + $(document).width();
console.log("Resize detected successfully - " + now);
console.log(dwidth);
console.log(swidth);
}, 100);
});
Call like i.e.:
$(document).ready(function() {
resize_event_analysis();
});

The previous solution only works the first time you load the page, but if you resize the browser it does not calculate it anymore, so my solution for the whole problem is:
on my master page I get the initial size:
$(document).ready(function () {
var oldWidth = $(window).width();
});
then on the resize event we do this:
$(window).resize(function () {
if ($(window).width() != oldWidth) {
// do whatever we want to do
// update the size of the current browser (oldWidth)
oldWidth = $(window).width();
}
});