Let's say I have to find out the window width, the code will be:
$(window).width();
and if I want it to become a global variable i just have to declare its name:
var windowWidth = $(window).width();
The result will be the window's width.
But I need that variable to change when things happens, for example when I resize the window:
$(window).resize(function(){
var windowWidth = $(window).width();
});
How can I extrapolate this variable in order to override the one before?
I can override the variable before putting the function i need in the .resize(function(); but in this way my code confusionary and I need just a variable to use it in other functions outside the resize function, for example a .click(function)
$(document).ready(function(){
var w = $(window).width();
$(window).resize(function(){
var w = $(window).width();
//click function goes here.
});
});
how if I want that the function above will become a whole new variable? without putting a new function in it?
the problem with your code is that you have var twice. every time you use var you create a new variable. so just leave out the second one like this:
$(document).ready(function(){
var w = $(window).width();
$(window).resize(function(){
w = $(window).width();
//click function goes here.
});
});
I do something similar for my projects:
var winWidth, winHeight;
function setWinSize(){
winWidth = $(window).width();
winHeight = $(window).height();
//note I'm not using the var suffix again
}
//then we set the new values on document ready and on window resize
$(document).ready(function(){
setWinSize();
})
$(window).resize(function(){
setWinSize();
})
function myCustomFunction(){
//I can now use my vars here
}
Related
I have a simple code, which by clicking shows the actual size of window (width and height) but I want to do this without clicking, for example when I change the size of window i want to changed the size automatically and displayed.
thanks.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">show the window size</button>
<p id="demo"></p>
<script>
function myFunction() {
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
}
</script>
</body>
</html>
You can try this
window.addEventListener('resize',myFunction)
DEMO
You could do this.
window.onresize = myFunction;
just add following function for this
window.onresize = function(event) {
myFunction();
};
Since you tagged jQuery in this post, I'm going to assume you use it in your page.
Ideally, you don't want to fire your function every time the window resize event is fired, but after the resize completes. This involves the use of a debounce function...
There are multiple implementations out there in the world (for example, the debounce from underscore.js) but here's a simple implementation that should do the trick:
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
myFunction(); // call your function
}, 250); // in this case 250 milliseconds between events is required
})
.resize(); // call the resize event on page load to get your initial values
Sorry for my Bad language skills.
I rewrite this question 10 times. But still hard to express my question...
My Question
I hope to know how to transit js code to newly opened window.
My situation
I have opening new window event and window resizing event js code
//When user click <a id="new-window">new window</a>, new window come up.
$('#new-window').click(function (){
var videoWidth = $(window).width()/2;
var videoHeight = videoWidth/5*3;
var windowWidth = videoWidth + 20;
var windowHeight = videoHeight + 20;
var w = window.open('', '', 'width=' + windowWidth + ', height=' + windowHeight);
//$(#video) is the
var html = $("#video").clone().attr({
"width" : videoWidth,
"height" : videoHeight
});
$(w.document.body).html(html);
event.preventDefault();
});
function videoFit() {
var videoScreen = $(window).width();
$('#video').css({'width': videoScreen, 'height':videoScreen/5 * 3});
}
$( window ).resize(function(){
videoFit();
});
But when I open developTool(chrome) in new window, there are no js files and css files which I put in the parent window.
following code just adjusted to parent window.
Is there any solution to transit js code?
Thank you for read my questions.
This question already has answers here:
How to get the image size (height & width) using JavaScript
(33 answers)
Closed 7 years ago.
I want to get a image's width when a page loaded. Because the image's width is used to judge some conditions, the logic like this:
var width = $('img').width();
var height = $('img').height();
if(width > height){
//do fn1
}else{
//do fn2
}
Here is a link to simulate my problem. I knew if use function setTimeout delay to
get image width is available but it's not precise.
This is the example given in the jQuery documentation:
... a page with a simple image:
<img src="book.png" alt="Book" id="book">
The event handler can be bound to the image:
$( "#book" ).load(function() {
// Handler for .load() called.
});
As soon as the image has been loaded, the handler is called.
http://api.jquery.com/load-event/
Here's more on the topic that will help you out:
How to get image size (height & width) using JavaScript?
Or if you are awesome, you could create the image element, add a source, and do something when it's loaded. No jQuery needed.
var image = new Image();
image.onload = function() {
alert('image loaded');
};
image.src = 'image/image.jpg';
object.onload=function(){
var width = $('img').width();
height = $('img').height();
};
You can try this onload function.
You should check image width and height after image is loaded.
With JQuery you can check page load like this:
$('img').load(function() {
var width = $('img').width();
var height = $('img').height();
if(width > height){
console.log(1);
}else{
console.log(2);
}
});
JS BinExample Here
I have an event listener that looks like:
window.addEventListener("resize", function(data){
console.log(data);
// Do something
});
Is there anyway to get the before resize innerWidth / innerHeight in the above callback function? I went through the data object in the above code and didn't find anything there.
I ended up saving the old width value every time a browser resize event happened. Code looks like:
var initialWidth = window.innerWidth;
window.addEventListener("resize", function(){
// Do something with 'initialWidth'
initialWidth = window.innerWidth;
});
In the above, I save the browser width on page load. Then, every time the browser gets resized, I save the new browser width at the end of the callback function.
You can't, you have to store previous height/width in some variables. Just put it in variables on page load and then you can access it in this method. There is nothing like bofore resize.
read this
Just add something to track the last resize event values:
var windowSize = (function () {
var lastWidth = 0, lastHeight = 0;
window.addEventListener('resize', function (data) {
// do something with last values
...
console.log(lastWidth);
console.log(lastHeight);
...
lastWidth = window.innerWidth;
lastHeight = window.innerHeight;
});
return { width: lastWidth, height: lastHeight };
})();
Now, you can use the windowSize object outside the closure to find what the current window size is, and internally within the closure you can act upon the previous size of the window before updating lastWidth and lastHeight.
Hope this helps!
I fire a function on jQuery(document).ready() and on jQuery(window).load(). Both the same function. It is supposed to fire an image resize script.
However, sometimes, when the server is slow to respond, the script doesn't fire at all when the page is done loading.
I've been having this problem for quite a while now, and, maybe it's overkill, but by now, I call the function as shown below, in both the document ready and the window load:
jQuery('img', '.background').each(function(){
jQuery(this).load(function(){
jQuery(this).resizeImage();
});
});
The function it calls is:
jQuery.fn.resizeImage = function() {
console.log('fired');
var bgImg = jQuery(this);
/* get img sizes */
var imgwidth = bgImg.width();
var imgheight = bgImg.height();
/* get window sizes */
var winwidth = jQuery(window).width();
var winheight = jQuery(window).height();
/* get the ratio, checks wether window is bigger or smaller than the image */
var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight;
/* checks the difference */
var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight;
/* if you want the entire image to always fit the screen, change the > to < */
if(heightdiff>winheight) {
bgImg.css({
width: winwidth+'px',
height: heightdiff+'px',
marginLeft: '-'+winwidth/2+'px'
});
} else {
bgImg.css({
width: widthdiff+'px',
height: winheight+'px',
marginLeft: '-'+widthdiff/2+'px'
});
}
};
Using the console.log, I found that the function doesn't fire at all.
Can anyone point me in the right direction as to why this might not work?
Guess you're miss using the this
jQuery('img', '.background').each(function(){
var $self = $(this);
$self.load(function(){
$self.resizeImage();
});
});
Solved it myself.
The issue was in the following:
jQuery(window).load(function(){
jQuery('img', '.background').each(function(){
jQuery(this).load(function(){
jQuery(this).resizeImage();
});
});
});
Due to the double load (jQuery(window).load and jQuery(this).load) the code didn't execute at all. Since when the window is loaded, the images are already loaded as well.