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?
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 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 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 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
I'm not understanding something about variables in javascript. I am trying to change/calculate "offset" (with the variable "theOffset") either before the localScroll function occurs, or more preferably when you resize the window. None of the instances below work, accept for the "//initialize offset".
How do I get the variable "theOffset" inside "$.localScroll" to change?
jQuery(function( $ ){
//initialize offset
var windowWidth = $(window).width();
if (windowWidth < 900) {
theOffset = 0;
} else {
theOffset = ($(window).width() - 900) / -2;
}
$(window).resize(function() {
//calculate offset
var windowWidth = $(window).width();
if (windowWidth < 900) {
theOffset = 0;
} else {
theOffset = ($(window).width() - 900) / -2;
}
});
$.localScroll({
target: '#content',
queue:true,
duration:1500,
hash:true,
stop:true,
onBefore:function( e, anchor, $target ){
//calculate offset
var windowWidth = $(window).width();
if (windowWidth < 900) {
theOffset = 0;
} else {
theOffset = ($(window).width() - 900) / -2;
}
},
offset: {top:0, left: theOffset,
onAfter:function( anchor, settings ){
if (windowWidth < 900) {
theOffset = 0;
} else {
theOffset = ($(window).width() - 900) / -2;
}
}
});
});
If need to know, I am centering a div container to the window with the offset in a fancy side scrolling website ;)
You could declare a myOffset object that will be passed by reference to offset: You can also refine the almost quadruplicated function into a single named function:
var myOffset = {top: 0, left: theOffset};
function calcOffset() {
var windowWidth = $(window).width();
if (windowWidth < 900) {
myOffset.left = 0;
} else {
myOffset.left = (windowWidth - 900) / -2;
}
}
calcOffset();
// note leaving off the () will pass the function as a parameter instead of calling it
$(window).resize(calcOffset);
$.localScroll({
target: '#content',
queue: true,
duration: 1500,
hash: true,
stop: true,
onBefore: calcOffset,
offset: myOffset,
onAfter: calcOffset
});
declare theOffset outside the jquery function
var theOffset = 0;
jquery( function ( $ ) {
} )
I think your problem is here:
offset: {top:0, left: theOffset,
First off, you are missing a trailing }.
Secondly, you are doing what is called "passing by value" - the value that is sent when you call $.localscroll() is actually a copy of the value specified in theOffset.
Which version of localScroll are you using? I downloaded the latest source I could find, which was 1.2.7, and I see nothing about offset anywhere.
There is no immediate way I can think of addressing your problem without seeing the localScroll source. Sometimes authors of jQuery plugins like this provide a means of updating options. If that is not the case, you may have to modify the localScroll source to grab the offset value via a function callback instead of via an object property:
offset: {top:0, left: function() { return theOffset; } }
Note that the above will not work without modifying the localScroll source to get this data via a function call instead of options property.
Note that in the above example, if you call setupSomeGlobals() again, a new closure (stack-frame!) is created. The old gLogNumber, gIncreaseNumber, gSetNumber variables are overwritten with new functions that have the new closure. (In JavaScript, whenever you declare a function inside another function, the inside function(s) is/are recreated again each time the outside function is called.)