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);
Related
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.
I'm trying to write a script that will fix a DIV if the screen is a certain width. This is what I have so far, but the logic is not correct and I'm not sure how to write it.
var controller = new ScrollMagic();
var w = $(window).width();
if(w >= 500) {
var sidebar = new ScrollScene()
.triggerHook("0")
.setPin("#sidebar-pin")
.addTo(controller);
}
$(window).on('resize',function(){
if(w < 500) {
controller.removePin("#sidebar-pin",true);
} else {
var sidebar = new ScrollScene()
.triggerHook("0")
.setPin("#sidebar-pin")
.addTo(controller);
}
});
http://jsfiddle.net/gtowle/jxoewzoo/
The logic I'm aiming for is:
On page load, if the the window width is greater than 500, do A. If not, do nothing.
On window resize, if the window width becomes less than 500, do B, and if it becomes greater than 640, do A.
I think my problem is that I'm not sure how to trigger #2 once the window is resized.
The first problem is that you only calculated the window's width once (on page load).
It isn't updated, once you resized.
That's why the whole resize logic doesn't have any effect.
Another mistake you made was calling the removePin method on the controller.
It's a scene method.
Lastly your logic would create a new scene every time instead of updating the existing one.
So here's how you properly achieve your desired logic:
var controller = new ScrollMagic();
var sidebar = new ScrollScene({triggerHook: 0})
.addTo(controller);
// page load
if($(window).width() >= 500) {
sidebar.setPin("#sidebar-pin");
}
// resize
$(window).on('resize',function(){
var w = $(window).width();
if(w < 500) {
sidebar.removePin("#sidebar-pin",true);
} else if (w >= 640) {
sidebar.setPin("#sidebar-pin");
}
});
And here's your fiddle: http://jsfiddle.net/jxoewzoo/1/
hope this helps,
J
Instead use css mediaqueries for something like this.
The js code for onscroll:
var otherwise = true
if(w < 500) {
Do B;
otherwise = false;
}
if(w > 640) {
Do A;
otherwise = false;
}
If(otherwise) {
var sidebar = new ScrollScene()
.triggerHook("0")
.setPin("#sidebar-pin")
.addTo(controller);
}
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?
I have this jQuery code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$( document ).ready( function() {
var $body = $('body'); //Cache this for performance
var setBodyScale = function() {
var scaleFactor = 0.35,
scaleSource = $body.width(),
maxScale = 600,
minScale = 30;
var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('body').css('font-size', fontSize + '%');
}
$(window).resize(function(){
setBodyScale();
});
//Fire it when the page first loads:
setBodyScale();
});
</script>
But I want to activate this jQuery code only if #media only screen and (min-width : 1025px) and (max-width : 2048px) not after that and not before that.
before 1024px and after 2048px the script should not do anything.
I don't think it is possible to get the #media configuration from javascript.
What you can is obtain the document's width and check its value:
var docWidth = $(document).width();
if (docWidth > 1024 && docWidth < 2048) {
// execute your function
}
I don't know if it required, but if the user resize the window, you might also need to bind to the resize event:
$(window).resize(function(event) {
//execute your function
});
d.
Use the jquery resize event :
$(window).resize(function() {
// Check here the width
width = $(document).width();
if (width > 1024 && width < 2048) {
// do your code
}
});
I think you can do what you want with this