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.)
Related
How would I go about removing a function if a certain browser is detected ?
Here is the function and the detection:
function parallaxIt(e, target, movement) {
var $this = $("#app");
var relX = e.pageX - $this.offset().left;
var relY = e.pageY - $this.offset().top;
TweenMax.to(target, 1, {
x: (relX - $this.width() / 2) / $this.width() * movement,
y: (relY - $this.height() / 2) / $this.height() * movement,
z: 0.01,
rotation:0.01
});
}
var version = detectIE();
if (version === false) {
//Do Nothing
} else if (version >= 12) {
//Remove Function
} else {
$("#iefix").attr({href : "/static/css/app-iefix.css"});
//Remove Function
}
So when any IE is detected I want to remove the function parallaxIt() or break it so It doesn't work any ideas?
Kind Regards
(the detect part of the code is obviously a small snippet of the full code so it's easier for you folks to read instead of going through the full code)
At least for me in Chrome v71 (Windows 10), deleting the function does not do anything (it keeps existing). But you can re-assign it to become a no-op function:
function parallaxIT() {
console.log("inside parallaxIT");
}
// delete
delete window.parallaxIT;
console.log("parallaxIT was 'deleted', does it still show output:");
parallaxIT();
console.log("=====");
// re-assign
window.parallaxIT = function() {} // no-op function
console.log("parallaxIT was re-assigned, does it still show output:");
parallaxIT();
console.log("=====");
I'm looking to implement something similar to this in an AngularJS directive:
https://github.com/geniuscarrier/scrollToTop/blob/master/jquery.scrollToTop.js
It's fairly straightforward, when you are not at the top of the page it will fade in a button to scroll to the top:
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$this.fadeIn();
} else {
$this.fadeOut();
}
});
However I'm having a hard time finding how to get the current scroll location in Angular. I'd rather not have to use jQuery just for this single thing.
$window.pageYOffset
This is property from service $window
I don't believe there's anything in Angular to get the scroll position. Just use plain vanilla JS.
You can retrieve the scrollTop property on any element.
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop
document.body.scrollTop
Fiddle for you: http://jsfiddle.net/cdwgsbq5/
Inject the $window into your controller and you can get the scroll position on scroll
var windowEl = angular.element($window);
var handler = function() {
console.log(windowEl.scrollTop())
}
windowEl.on('scroll', handler);
Fiddle
Adaptation from another stackoverflow answer
You can use like as polyfill
here a link
function offset(elm) {
try {return elm.offset();} catch(e) {}
var rawDom = elm[0];
var _x = 0;
var _y = 0;
var body = document.documentElement || document.body;
var scrollX = window.pageXOffset || body.scrollLeft;
var scrollY = window.pageYOffset || body.scrollTop;
_x = rawDom.getBoundingClientRect().left + scrollX;
_y = rawDom.getBoundingClientRect().top + scrollY;
return { left: _x, top: _y };
}
You can use
angular.element(document).bind('scroll', function() {
if (window.scrollTop() > 100) {
$this.fadeIn();
} else {
$this.fadeOut();
}
});
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 {
...
}
});
So, I've got a function animateSection() that animates two elements, #awards and #twitter.
I want to make it so that if a user resizes the browser
function animateSection() {
var $checker = $(window).width(),
$twitter = $('#jstwitter'),
$awards = $('#awards');
var distance = 20,
duration = 500;
if($checker > 1140) {
$twitter.fadeIn(duration, function() {
$awards.fadeIn(duration);
});
}
else {
$(window).resize(function(){
// here is where I run into trouble...
if($checker > 1140) {
$twitter.animate({left: distance}, duration);
$awards.animate({right: distance}, duration);
}
});
}
}
When you're first run the function you're storing $(window).width() in a local variable, $checker, then on resize you're checking that variable. It's not going to change! Try replacing:
if ($checker > 1140) {
with:
if ($(window).width() > 1140) {
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?