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.
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 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.
When i resize browser the it gives multiple alerts. I used "return false" not working.
If I used unbind()/unbind('resize') then it works but it creates an other problem- the resize() function stops working from second time browser/window resize.
My code-
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
alert($(".myclass").parent().width());
$(window).bind('resize',function() {
alert($(".myclass").parent().width());
});
});
</script>
<section class="myclass"></section>
This is not an issue with jQuery, but on the browser's implementation of resize.
Depending which browser you use it may trigger intermediate resizes, or a resize when your mouse is released only.
Because the resize triggers everytime the browser changes.
If you are resizing 100 pixels it can trigger up to 100 times.
Something like this should work and trigger only once you stopped resizing the window:
var resizing = false, stopedResizing = true;
$(window).bind('resize',function() {
if(!resizing){
console.log("started resizing. Width = " + $(".myclass").parent().width());
resizing = true;
}
stopedResizing = false;
setTimeout(function(){
if(!stopedResizing){
stopedResizing = true;
setTimeout(function(){
if(stopedResizing && resizing){
resizing = false;
console.log('Stoped resizing. Width = ' + $(".myclass").parent().width());
}
}, 500);
}
}, 500);
});
You could do something like:
$(document).ready(function(e) {
alert($(".myclass").parent().width());
var lastTime = 0;
$(window).bind('resize',function() {
var currentTime = new Date().time();
if(currentTime > lastTime + 5000)
alert($(".myclass").parent().width());
lastTime = currentTime;
});
});
...so that it will only fire on resizes at least 5 seconds apart. Normally though, you'd want to act when resizing stops, not when it starts.
This code fires ones on mouseover of the window after the a resize event as occurred.
$(document).ready(function() {
var windowResized = false;
function callFunction() {
console.log("I am called once after window resize");
}
$(window).mouseover(function() {
if (windowResized == true) {
callFunction();
windowResized = false;
}
})
$(window).resize(function() {
windowResized = true;
});
})
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') );
});