I think the question is pretty much self explanatory...
I've got a script that is drawing some graphics across the window. Currently, if I resize the window (like taking it full screen) the script continues to affect only the windows' initial size. It should rerun, responding to the new dimensions.
I've tried adding this to my script.
$(window).resize(function() {
});
It did run whenever I resized it... but ONLY when I resized it! No more on load... as it also should.
I think I'm on the right path, but what am I missing?
Codepen here.
drawingFunction function(){
// your drawling code;
}
$(window).resize(function() {
console.log('window is resized');
drawingFunction();
});
$( document ).ready(function() {
drawingFunction(); // for onload
});
function drawStuff() {
// move here the drawing code ............
};
// call it where the loading process is
drawStuff();
// call it on resize , too
$(window).resize(function() {
drawStuff();
});
To call on loading
If you are using jQuery:
$(function(){
drawStuff();
})
if not, try this.
window.onload = function(){
drawStuff();
}
All is ok, but when I maximize or restore window, resize event is fired 2 times. When I press F11 in Firefox to go fullscreen, browser's toolbar is sliding up slowly and resize event is fired up to 40 times. My proposal is to use delay:
var timeout;
$(window).resize(function() {
clearTimeout(timeout);
timeout = setTimeout(onResizeOnly, 500);
});
function onResizeOnly()
{
//your code here
}
In the tag :
<body onresize="drawStuff()">
IMHO, it's the easiest way.
Related
I have this 2 pieces of code
function fixFooter() {
var wrapper = $('#disqus_wrapper').height();
if ( wrapper > 200 ) {
$(window).trigger('resize');
}
};
var element = $('#disqus_wrapper');
new ResizeSensor(element, function() {
fixFooter();
});
The expected effect is that the window will resize every time the div#disqus_wrapper changes height. (to fix comments and footer overlapping)
Well the code works, but only once after the page loads. I need it to resize each time the div changes in height. I tried switching the trigger('resize') function with an alert and everything works perfectly. Any idea why the trigger('resize') only works once and how can I fix it?
Update ;
The html is just this because I am loading the Disqus comment system
<div id="disqus_wrapper"><div id="disqus_thread"></div></div>
For detecting the div height change I am using this library
https://github.com/marcj/css-element-queries (the ResizeSensor.js)
You need to call your function fixFooter() in window resize event.
$( window ).resize(function() {
fixFooter();
});
I'm designing a responsive website and am using media queries to handle the responsiveness. However along with the CSS I want to disable certain jQuery click functions at a certain window width.
Right now I can do this successfully on page load but I want to also be able to do it assuming the user resized the window.
(paragraph 3) So for example if the user starts off with a really big window on his/her computer and he/she resizes it to be a very small window he/she should not be able to activate the click functions anymore. Conversely if a user starts off with a very small window on his/her computer and resizes it to be very big he/she should be able to activate the click functions.
I have tried multiple solutions but none seem to work.
Basically I want to make some clickable objects not clickable anymore or at least have them click and do nothing at a certain window width.
Simply checking at page load and no other time makes it so that what should happen in paragraph 3 doesn't happen.
$(document).ready(function(){
if($(window).width() > 992){
$('#portclick').click(function(){
$('#pagecont').slideToggle(500);
$('#icons').slideToggle(500);
})}})
$(document).ready(function(){
if($(window).width() > 992){
$('#name').click(function(){
$('#projects').slideToggle(500);
})}})
I tried remove the id attribute that I'm using to call the function on at certain window widths and readd them at the width but this doesn't seem to work either. Removing the id doesn't seem to disable to click function at all.
And my most recent solution which comes the closest is just to bind the click function to window resize. So far this works but it is extremely buggy so when you get to a width where the click function works and you try clicking it will do the toggle function about 100 times before it stops. But it does sustain the condition described in paragraph 3.
$(document).ready(function() {
$(window).resize();
});
$(window).resize(function(){
if($(window).width() > 992){
$('#portclick').click(function(){
$('#pagecont').slideToggle(500);
$('#icons').slideToggle(500);
})}
else return})
$(window).resize(function(){
if($(window).width() > 992){
$('#name').click(function(){
$('#projects').slideToggle(500);
})}
else return})
Does anybody have an idea for a working solution that would work flawlessly like css media queries do? I don't think this is that complicated of a problem to work around so I'm hoping for some good answers! Thank you guys so much in advance!
Several problems here. First, resize fires almost constantly while the window is moving, so don't actually trigger anything on that. Second, you should only bind your event handlers once (or if you must bind more than once, make sure you clear out the old ones.) You can simplify thusly:
$(document).ready(function() {
var isLargeWindow;
$(window).on('resize', function() {
isLargeWindow = $(this).width() > 992;
});
$('#whatever').on('click', function(e) {
if (isLargeWindow)
// do large window stuff
else
// do small window stuff
});
});
My simplest way of doing that is not using the resize event at all just attach
the click event and add an early return term if the window size doesn't suite your needs.
Example code:
$('#portclick').click(function(){
winWidth = $(window).width();
/* You can add an height value too */
winHeight = $(window).height();
if ( winWidth < 992 ) return;
/* Youe Code Executes */
});
If you want the if statement to be called after the resize has happened then do something like this:
http://jsfiddle.net/sLk5ro6c/1/
$(window).resize(function (e) {
window.resizeEvt;
$(window).resize(function () {
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function () {
doneresizing();
}, 250);
});
});
function doneresizing() {
if ($(window).width() > 500) {
// DO SOMETHING HERE
alert('example');
}
}
This way the code won't be called every time during the resizing of the window
I want a website to execute a certain jquery script (which allows me to stretch the height of a vertical menu to the height of my browser window) when the page loads and when it is resized.
So I have written a jquery of this kind:
jQuery(document).ready(function ($) {
$(window).on('resize', function() {
<code to execute>
}).trigger('resize');
});
My problem is that this code works well when somebody loads the page or when he resizes it, but it doesn't work when one hits the refresh button. How could I make the code work also in that case?
Thank you in advance for your help.
Try this:
var myFn = function() { console.log('hello world') };
jQuery(document).ready(function ($) {
myFn();
$(window).on('resize', function() {
myFn();
});
});
jQuery(document).ready(function ($) {
function Resize(){
$(window).on('resize', function() {
<code to execute>
}).trigger('resize');
}
});
call this Resize() whenever you need. Either on load or on click.
It turned out that the way I described in my own question was more than right. It worked perfectly well that way, even onRefresh. What was not making my script work properly was the fact that one of the variables I was using would change after the page had finished loading, so when I was hitting "refresh", it would give a different value than in the beginning.
So for every user of stackoverflow.com, please note that whenever you want to set an event onLoad, onResize AND onRefresh, the easiest and best possible way is:
jQuery(document).ready(function ($) {
$(window).on('resize', function() {
<code to execute>
}).trigger('resize');
});
In fact, what glortho was suggesting could work, but that was using another variable, and in my humble opinion, that would make the whole thing a little more redundant.
Thank you everybody for your help and for reading.
I want to set div#top height equals image height. I wrote:
$(document).ready(function() {
setTopHeight();
});
/*
* window resizing
*/
$(window).resize(function() {
setTopHeight();
});
/*
* setting #top height by banner height
*/
var setTopHeight = function() {
var bannerHeight = $('#banner-image').height();
$('#top').height(bannerHeight + 'px');
};
It works on resize, but doesn't at reload. I've tried sth like this:
$(document).ready(function() {
setTimeout(function() {
setTopHeight();
}, 50);
});
and it works, but of course it's not solution. Can somebody tell me why console.log returns 0?
$(document).ready(function() {
console.log($('#banner-image').height());
});
.ready won't work because your image has not been loaded yet. use .load
$(document).ready fires when the DOM is ready, but the image might still be downloading - so no height yet. You might use jQuery load on the image.
$('#banner-image').on('load', function () {
setTopHeight();
})
The jQuery .load() acts as an event handler. .load() is a shortcut for .on('load, function(){}). It will be triggered once the image/element if fully loaded.
Example 1:
$('#banner-image').load(setTopHeight);
Example 2
$('#banner-image').load(function(){
setTopHeight();
});
Example 3
$('#banner-image').on('load', setTopHeight);
Try .load() instead .ready()
$(window).load(function() {
setTopHeight();
});
The image load is in a second HTTP round after your document. so you need listen to image load
$('#banner-image').load(setTopHeight);
I need to run a script every time a table is resized (whenever the user resizes the browser window). Does anyone know how this can be done?
function myFunction() {
alert('resized');
}
window.onresize = myFunction;
window.onresize = function(){alert('test');}
If you use Jquery,
$(window).resize(function() {
alert("test now");
});