I am using the following snippet to resize a canvas element successfully. I need it to resize a canvas element on page load and not require user interaction to fire the windowResize() function.
(function($){
$(window).resize(function(){
windowResize();
});
})(jQuery);
function windowResize(){
stage.canvas.width = window.innerWidth;
stage.canvas.height = window.innerHeight;
var test = (window.innerHeight/500)*1;
exportRoot.scaleX = exportRoot.scaleY = test;
}
Just call windowResize in jQuery-loaded.
$(function(){
function windowResize(){
stage.canvas.width = window.innerWidth;
stage.canvas.height = window.innerHeight;
var test = (window.innerHeight/500)*1;
exportRoot.scaleX = exportRoot.scaleY = test;
}
....
$(window).resize(function(){ windowResize(); });
windowResize();
}); // end $(function(){});
Just modify your snippet to:
$(window).on('resize load', windowResize);
This will invoke windowResize() at both load and resize.
Related
I'm trying to get the div to resize when the window is resized. With the following code i get "this.fullScreen is not a function" If i remove the window resize it works fine but obviously doesn't resize with the window. Am I thinking about this the wrong way?
var PE = {};
PE.functions = {
fullScreen: function fullScreen() {
var fullScreen = $('.full-screen'),
navbarHeight = $('.navbar').height(),
windowHeight = $(window).height(),
windowWidth = $(window).width();
fullScreen.css({
width: windowWidth,
height: windowHeight - navbarHeight
});
},
fullScreenResize: function screenResize() {
$(window).resize(function(){
this.fullScreen();
});
}
};
$(document).ready(function() {
PE.functions.fullScreenResize()
});
In fullScreenResize, the call to this.fullScreen(), this is not necessarily the PE.functions object because the callback function passed to resize has a different this. To remedy, bind the callback function to the current this:
fullScreenResize: function screenResize() {
$(window).resize(function() {
this.fullScreen();
}.bind(this));
}
Or replace this.fullScreen() with the full object path PE.functions.fullScreen().
I am using this javascript to make two child div's the same height in their parent div:
$(function(){
var leftHeight = $('.leftblock').height();
var rightHeight = $('.rightblock').height();
if (leftHeight > rightHeight){ $('.rightblock').css('height', leftHeight); }
else{ $('.leftblock').css('height', rightHeight); }
});
When I resize the window one of the divs is getting a lot longer again but now the javascript doesn't work anymore. I placed the exact same script again in the window resize function and that solves the problem!
$(window).resize(function(){ // same script as above again });
My question; is there a cleaner way so I can just use the script once but refresh or trigger the script again on window resize?
Sure, declare a function and use it in both handlers:
function resizeDivs() {
var leftHeight = $('.leftblock').height();
var rightHeight = $('.rightblock').height();
if (leftHeight > rightHeight){ $('.rightblock').css('height', leftHeight); }
else{ $('.leftblock').css('height', rightHeight); }
}
$(resizeDivs);
$(window).resize(resizeDivs);
You can declare function and call it whenever you want.
Try using function :
function check(){
var leftHeight = $('.leftblock').height();
var rightHeight = $('.rightblock').height();
if (leftHeight > rightHeight){
$('.rightblock').css('height', leftHeight);
} else {
$('.leftblock').css('height', rightHeight);
}
}
$(function(){
check();//calling function on window load
$(window).resize(function(){
check();//calling function on window resize
});
});
I'm new to js. Please, don't kick painfully.
I have this code
window.onresize=function() {alert(1);};
When I resize any browser`s window, this function fires twice. Why? And how to rewrite this code that code will fire once.
Thanx in advance.
You need a timeout to bundle the resize events.
var res;
window.onresize=function() {
if (res){clearTimeout(res)};
res = setTimeout(function(){console.log("resize triggered");},100);
};
live Example
This event will fire multiple times in different browsers (some once you've finished the the resize, others during).
One way to get around this is to wait a certain amount of time (say half a second) after the event fires, to see if there are further updates. If not, you can proceed with the alert.
e.g.
var resizeTimer;
window.onresize = function(){
if (resizeTimer){
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function(){
alert(1);
}, 500);
};
See it work on this fiddle.
To prevent function from "firing" the same result more than once when user resize
var doc = document; //To access the dom only once
var cWidth = doc.body.clientWidth;
var newWidth = cWidth; //If you want a log to show at startup, change to: newWidth = 0
window.onresize = function (){
newWidth = doc.body.clientWidth;
if(cWidth != newWidth){
cWidth = newWidth;
console.log("clientWidth:", cWidth); //instead of alert(cWidth);
};
};
I propose other solution because I don't like the timeouts,
`var resized;
window.onresize = function () {
if(resized){
resized = false;
}
else{
resized = true;
alert('resize');
}
};`
How can I call for this(or any) JS function to be run again whenever the Browser window is resized?
<script type="text/javascript">
function setEqualHeight(e) {
var t = 0;
e.each(function () {
currentHeight = $(this).height();
if (currentHeight > t) {
t = currentHeight
}
});
e.height(t)
}
$(document).ready(function () {
setEqualHeight($(".border"))
})
</script>
You can use the window onresize event:
window.onresize = setEqualHeight;
You can subscribe to the window.onresize event (See here)
window.onresize = setEqualHeight;
or
window.addEventListener('resize', setEqualHeight);
This piece of code will add a timer which calls the resize function after 200 milliseconds after the window has been resized. This will reduce the calls of the method.
var globalResizeTimer = null;
$(window).resize(function() {
if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
globalResizeTimer = window.setTimeout(function() {
setEqualHeight();
}, 200);
});
You use jquery, so bind it using the .resize() method.
$(window).resize(function () {
setEqualHeight( $('#border') );
});
I have a script that calculates the height of a div and returns it as a style. But when you rotate mobile-devices the height changes, so I need a way to reload it. How can I accomplish this?
<script type="text/javascript">
window.onload = function() {
var height = document.getElementById('id').offsetHeight;
document.getElementById('id').style.marginTop = height + 'px';
}
</script>
Make a function out of it and call that on both load and resize. No need to reload your page, just call the code again:
<script type="text/javascript">
function calcHeight() {
var height = document.getElementById('id').offsetHeight;
document.getElementById('id').style.marginTop = height + 'px';
}
window.onload = calcHeight;
window.resize = calcHeight;
</script>
You can create a function:
function setHeight() {
var height = document.getElementById('id').offsetHeight;
document.getElementById('id').style.marginTop = height + 'px';
}
That you can call onload:
window.onload = function() {
setHeight();
// Other actions when window is loaded
}
And onresize:
window.onresize = function(event) {
setHeight();
// Other actions when window is resized
}
This should do the job.