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
Related
I'm using jquery to resize an image on a mobile website: http://www.loiristorantino.com.br/mobile
On browser, if you resize your screen, it works fine but on mobile it's not working. Here's the code that I'm using:
var $inner = $('.inner');
var height = parseInt($inner.height()) + parseInt($inner.css('top'));
$('.tumb-img-border').css('height', height);
var doit;
function resizedw(){
var $inner = $('.inner');
var height = parseInt($inner.height()) + parseInt($inner.css('top'));
$('.tumb-img-border').css('height', height);
}
window.onresize = function() {
clearTimeout(doit);
doit = setTimeout(function() {
resizedw();
fontResuze();
}, 100);
};
I think it's something related with Jquery but I don't know how to change it to javascript.
Can you guys help me with this issue?
Ok, so I found the solution by myself. Since I got this resize function on google, this solution might help others. I just changed the following line and it worked:
//var height = parseInt($inner.clientHeight());// + parseInt($inner.css('top'));
var newheight = $('.inner').height();
$('.tumb-img-border').css('height', newheight);
I'd like to draw a line that connects two circles, but when the window is being re-sized, the distance between the two circles changes therefore the height of the line image should change accordingly. Here is what I have now but it only does it once when the page loads, but I want the image height to be dynamically changing as the window is being re-sized:
function getDistance(id1, id2){
distX = id1.offsetLeft - id2.offsetLeft;
distY = id1.offsetTop - id2.offsetTop;
distance = Math.sqrt(distX*distX + distY*distY);
return distance;
console.log(distance);
}
var myImage = new Image(50, 100);
myImage.src = 'images/line.png';
myImage.height = getDistance(circle1, circle2);
document.getElementById("line").appendChild(myImage);
You have to add an event listener to the window resize event.
Add the following snippet on the end of your code:
window.addEventListener('resize', function(){
myImage.height = getDistance(circle1, circle2);
}, false);
Doing this way instead of assigning an event on window.onresize allows binding multiple functions to the event.
You can also use jQuery if you have it loaded on your site:
$(window).bind('resize',function(){/*code*/});
Try this:
var myImage = new Image(50, 100);
myImage.id = 'line-image';
myImage.src = 'images/line.png';
document.getElementById("line").appendChild(myImage);
window.onresize = function() {
document.getElementById('line-image').height = getDistance(circle1, circle2);
}
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!
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
}