I am trying to change the width of a div element on window resize but due to the resize function the width of the element is always 0 in the end
function resizeUploadField() {
var uploadInputField = $('.input-append');
var uploadSelectButton = $('.btn-file');
var uploadRemoveButton = $('.fileupload-exists');
if (uploadRemoveButton.length) {
}
console.log(uploadInputField.width());
uploadInputField.width(uploadInputField.width() - uploadSelectButton.outerWidth() - 2);
console.log(uploadInputField.width());
}
$(document).ready(function() {
var windowWidth = $(window).width();
resizeUploadField();
$(window).resize(function(event) {
console.log($(event.target).width());
if ($(event.target).width() != windowWidth) {
resizeUploadField();
windowWidth = $(event.target).width();
}
});
The resizeUploadField function seems to work properly since the field is properly resized when called in onDocumentReady
Maybe someone can give me a hint what is going wrong
Try to redeclare the windowWidth = $(window).width(); inside the resize() function.
E.g.
$(document).ready(function() {
var windowWidth = $(window).width();
resizeUploadField();
$(window).resize(function(event) {
windowWidth = $(window).width();
console.log($(event.target).width());
if ($(event.target).width() != windowWidth) {
resizeUploadField();
windowWidth = $(event.target).width();
}
});
});
Hope it helps.
Related
I am fairly new to jQuery/javascript and I have a quick question, probably very simple but I can't seem to figure it out.
I want to change a variable value when the window width has changed. The reason I'm doing it with jQuery is that I can't alter the width or height via css.
This is my code:
<script type="text/javascript">
var jwheight = 390,
windowSize = $(window).width();
$(window).resize(function(){
if (windowSize < 992) {
jwheight = 39;
}
})
player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);
</script>
So I want to change the height (jwheight) when the window width is smaller than 992px.
All help would be appreciated, thank you.
your windowSize is outside the resize function, so it will always have the same value. You should use the width inside the function as follows:
<script type="text/javascript">
var jwheight = 390;
$(window).resize(function(){
if ($(window).width() < 992) {
jwheight = 39;
}
})
player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);
</script>
Check the $(window).width() value inside the resize event, and resize the player depending on the result.
You would want to calculate the height depending on the width, then compare that to the current height so that you don't call player.resize when there isn't actually a size change:
var jwheight = 390;
$(window).resize(function(){
var newHeight = $(window).width() < 992 ? 39 : 390;
if (newHeight != jwheight) {
jwheight = newHeight;
player.resize(800, jwheight);
}
})
player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);
I am wondering how I can use Javascript to get a windows size and then set (really clear) an HTML ID with it.
I am currently working on a site that has a "default" navigation ID of "access" which I want to blank out if the windows size is less than 800 px wide.
This is the page I am working on and if the ID is cleared I can then setup the mobile navigation to work with bootstrap.
`window.onload = function() {
var w = window.innerWidth;
if(w < 800) {
document.getElementById('access').removeAttribute('id');
}
}
window.onload = function() {
var w = window.innerWidth;
if(w < 800) {
document.getElementById('access').removeAttribute('id');
}
}
window.onresize = function() {
var w = window.innerWidth;
if(w < 800) {
document.getElementById('access').removeAttribute('id');
}
}
Use
var w = window.innerWidth;
to get the width of the page.
and then,
window.onload = function() {
if(w < 800) {
document.getElementById('access').removeAttribute('id');
}
}
You probably want to add this functionality in resize too.
EDIT: put the code in window.onload
Based on the comment,
window.onload = function() {
var accessElem = document.getElementById('access');
var updateAccess = function() {
var w = window.innerWidth;
if(w < 800) {
accessElem.removeAttribute('id');
}
else {
accessElem.setAttribute('id', 'access');
}
};
window.onresize = updateAccess; // call updateAccess on resize
updateAccess(); // call once on load to set it.
};
Also, in my opinion, adding/removing id is not a great idea.
I have a little problem with a jQuery function. I need to add a margin to some element when the window.width is < 580px and i need to remove it when the window.width is larger. Here is the problem, the first part of the function work well, not the second.
var Wwidth= $(window).width();
if ( Wwidth < 582) {
$( window ).resize(function() {
var nWwidth=$( document ).width();
var marginL = (nWwidth - 292)/2;
$('.hub-item').css('margin-left',marginL +'px');
});
}
else {
$( window ).resize(function() {
$('.hub-item').css('margin-left','0px');
});
}
I have no mystakes in the console but the margin are not to 0.
Thanks u all!
EDIT :
Correct code :
$(window).resize(function() {
var Wwidth= $(this).width();
if (Wwidth < 582) {
var nWwidth=$( window ).width();
var marginL = (nWwidth - 292)/2;
$('.hub-item').css('margin-left',marginL +'px');
}
else {
$('.hub-item').css('margin-left','0px');
}
});
Thanks all!
You need to put your if statement within the $(window).resize() function, and recalculate Wwidth every time:
$(window).resize(function() {
var Wwidth = $(this).width();
if (Wwidth < 582) {
...
}
else {
...
}
});
I have this code
$(document).ready(function(){
var oldwidth= $(window).width();
$(window).resize(function(){
var nw= $(window).width();
//compare new and old width
});
});
The problem is the old width is only set during loading of document, new width changes during every resize. I want to get the width just before resizing, so I can check if user is decreasing width or increasing width of screen.
In the resize() handler, update oldwidth with the new width as the very last line of the function.
$(document).ready(function () {
var oldwidth = $(window).width();
$(window).resize(function () {
var nw = $(window).width();
//compare new and old width
oldwidth = nw;
});
});
Resize event detection, loging on stop resize:
function resize_event_analysis()
{
var resized_to;
//On resize events
$(window).resize(function()
{
clearTimeout(resized_to);
resized_to = setTimeout(function() {
var now = new Date();
now.toString('yyyy-MM-dd, hh:mm:ss');;
var dwidth = "Device width = " + window.screen.width;
var swidth = "Window width = " + $(document).width();
console.log("Resize detected successfully - " + now);
console.log(dwidth);
console.log(swidth);
}, 100);
});
Call like i.e.:
$(document).ready(function() {
resize_event_analysis();
});
The previous solution only works the first time you load the page, but if you resize the browser it does not calculate it anymore, so my solution for the whole problem is:
on my master page I get the initial size:
$(document).ready(function () {
var oldWidth = $(window).width();
});
then on the resize event we do this:
$(window).resize(function () {
if ($(window).width() != oldWidth) {
// do whatever we want to do
// update the size of the current browser (oldWidth)
oldWidth = $(window).width();
}
});
consider this example:
/**/
var sizes;
$(window).resize(function() {
var viewportWidth = $(window).width();
//var viewportHeight = $(window).height();
if (viewportWidth > 1024) {
sizes = '320';
} else if (viewportWidth < 1024) {
sizes = '300';
}
}); /**/
jQuery(document).ready(function($) {
console.log(sizes);
$('#full_width_anything_slider').anythingSlider({
delay: sizes
});
});
how can i have access to the sizes var inside the other method?
right now it doesn't work
thanks
sizes has no value associated with it when your document onReady function executes. In fact it will not have a value until your onResize function executes.
as long as the posted code is not wrapped in a function your declaration is global.
However if your viewportWidth is exactly 1024 sizes is never set. so do something like this:
sizes won't have a value until resize is called so set the value when you declare it and reset it when the window is resized
var sizes = $(window).width() <= 1024 ? '300' : '320';
$(window).resize(function() {
var viewportWidth = $(window).width();
sizes = $(window).width() <= 1024 ? '300' : '320';
});
be aware that global variables in general is a bad idea. In your case you might as well do
$(function() {
$('#full_width_anything_slider').anythingSlider({
delay: $(window).width() <= 1024 ? '300' : '320';
});
});
note the first part of the code will not really work with the way you are using it since, the value is passed to anythingSlider when the document is loaded and will not change when the window is resized (it's a value not a reference). The second part won't solve this problem either but repeating the code in window.resize like below will
var setupSlider = function()
$('#full_width_anything_slider').anythingSlider({
delay: $(window).width() <= 1024 ? '300' : '320';
});
});
$(function(){
setupSlider();
});
$(window).resize(setupSlider);
You are correctly declaring a global variable, however what you are passing into anythingSlider is a snapshot of what the value is, not a reference to a variable that contains that value. Changing the global variable will not change the delay of anythingSlider unless you re-initialize anythingSlider with the new value every time you change it (on resize)
It doesn't need to be global anyway.
$(window).resize(function() {
var sizes = '0';
var viewportWidth = $(window).width();
//var viewportHeight = $(window).height();
if (viewportWidth >= 1024) {
sizes = '320';
} else if (viewportWidth < 1024) {
sizes = '300';
}
$('#full_width_anything_slider').anythingSlider({
delay: sizes
});
});
$(document).ready(function(){
$(window).trigger("resize");
});
Note however i can't find any documentation on re-initializing this plugin or changing it's options, I'm not sure if this is the correct way to re-initialize it.
This isn't very good practice... but:
/**/
$(window).resize(function() {
updateSize();
}); /**/
function updateSize() {
var viewportWidth = $(window).width();
//var viewportHeight = $(window).height();
if (viewportWidth > 1024) {
sizes = '320';
} else if (viewportWidth <= 1024) {
sizes = '300';
}
}
jQuery(document).ready(function($) {
updateSize();
console.log(sizes);
$('#full_width_anything_slider').anythingSlider({
delay: sizes
});
});
I assume (and hope) you'll be using sizes at a later time as well?