Develop Reference

I have a bug in my vertical content slider

My content slider doesn't always slide to the showing hash when i click on either of the buttons. i found out how to do this by watching this video Zhttps://www.lynda.com/jQuery-tutorials/Create-Interactive-Animated-Timeline-jQuery/124092-2.htmlZ (copy inbetween the Z's) then i learned the left and right slider controls on https://www.youtube.com/watch?v=XrBuo3BZXlU&t=538s. however, my code seems to have a bug that sometimes stops it from going to the next or previous slide. heres the code
$('.right').click(function(event) {
$('#showing').removeAttr('id').attr('id','wasShowing');
$('#wasShowing').next().attr('id','showing');
$('#wasShowing').removeAttr('id');
}
https://jsfiddle.net/w3tkmhdn/1/
Can anyone see the problem with my code?

You need to update the scrollLeft part
$('.content-carousel').animate({
scrollLeft: '+=' + $showing.offset().left
}, 800, );
https://jsfiddle.net/w3tkmhdn/2/
for both left and right, for left, $showing.offset().left returns negative value so the += works as is.

Toggle between two loops

As a way to learn more about jQuery, I'm trying to make a function that will scroll to the bottom of the page, back to the top and then start again in an infinite loop.
so far I have got this
var scroll = $(document).scrollTop();
setInterval(function(){
scroll += 5;
$(document).scrollTop(scroll);
}, 10);
This will scroll to the bottom of the page.
When it hits the bottom it needs to set a flag, maybe var direction = 1
where 1 is down and 0 is up.
Now I need to add something like
if(direction){
// scroll down
} else {
// scroll up
}
So I the IF would constantly check the value of direction and increment the scroll var by either += 5 or -=5
Does that sound logical or is there a much simpler way to achieve this?
EDIT
Here is a working version of somethinghere's suggestion
https://jsfiddle.net/Panomosh/evkxou3e/

You should use jQuerys callback to create an infinitely recursing function. Just add a function after the declaration in your animate function, and then call the same function, but invert the passed boolean.
Also, animate will do this incrementing very nice and smoothly for you!
function scrollTopOrBottom(top){
if(top) $("body, html").animate({scrollTop: 0}, function(){
scrollTopOrBottom(false);
});
else $("body, html").animate({scrollTop: $("document").height()}, function(){
scrollTopOrBottom(true);
});
}
scrollTopOrBottom(false);
Update: As mentioned, this could create a * * ahem * * Stack Overflow, but the question is not concerned with that at this point. If you want to be safe, use a stop() after each $("body, html") statement to stop the call from proceeding if another one is in progress, therefore deferring overflow.
Note: You could also wrap the if statement in {} but since it's one statement I find it a bit more legible, more sentence-like than code-like. But thats preference.

You could set the value of direction to be either 1 to scroll down or -1 to scroll up.
Then when changing the value of scroll you can do something like:
scroll += 5 * direction;

Swiper slider. Prepeding one slide and simulating transition to it

I want to achieve a specific behaviour with this awesome JS slider (Swiper) using its complete API, but I am out of luck until the moment... Need some help with this:
Current situation:
Only one slide at the beginning.
What I want each time I click a button is:
The dynamic creation of a new slide BEFORE the first one in each case --> Easy thing, with the prepend() method of Swiper API :)
But (and here is the problem) I want the final users to have the sensation of being just loading the preceding slide, i.e., clicking the button and seeing the swipe transition towards left...
I want this "rare" behaviour because my slider has to show several hundreds of slides, and loading all of them at a time from the beginning results in an extremely slow page load since it has to download hundreds of images...
Thanks in advance.

I finally got it working, like this:
Once the button (with class="prev") is clicked:
$(document).on('click', '.prev', function() {
// If it is the first slide...
if (mySwiper.activeIndex == 0) {
// Slide content
var slide = '<p>New slide</p>';
// Creation of the slide (it instantly moves to index 0 --> the new slide)
mySwiper.prependSlide(slide);
// And then instant (speed = 0) swipe to slide with index 1
// (the one we were watching before creating the new...)
mySwiper.swipeTo(1, 0, false);
// Finally, we implement the visual transition to new slide (index 0)
mySwiper.swipePrev();
}
});
I hope it helps somebody.
Thanks.

While Scrolling: if scrollTop() equals to or reaches a value execute event

I'm trying to fire an event when scrolling down to a certain point/value and execute again when scroll back up and down again.
I tried:
$(window).scroll(function(){
var sTop = $(this).scrollTop();
if(sTop == 300){
//execute event - failed
}
});
The above does not fire anything with the both mousewheel and dragging the scrollbar. but when I changed the condition to greater than or equal to, the event is being executed but multiple times when scrolling further down.
if(sTop >= 300){
//execute event - success
}
I also tried changing the condition value and some times the event is being fired.
if(sTop == 333 /* or 431, 658, etc. */){
//execute event - sometimes success
}
Here is my test fiddle.
Could it be that scroll() function sometimes skips a value if you scroll fast?
Can someone explain the issue and help me with a workaround on how to trigger an event when the $(window).scrollTop() == 'value'. Thanks

You're facing this issue because there are no guarantees that scrolling will be done in increments of 1. For example, some scroll wheels increment in values of 30. This means that you'd get a scroll event on 30, 60, 90, etc.
The best way to test if scrolling has reached your limit is to see if it has gone past the point you're wanting, then resetting the scroll to the precise point you're wanting. So you'd do:
if(sTop >= 300){
$(window).scrollTop(300);
}
Here's an updated link to your JSFiddle with a working example: http://jsfiddle.net/bC3Cu/4/
If you take a look at unit of increment in scrollable areas / divs in javascript? it describes how to set it to where you can override the scroll increment. Using that method, you should be able to predict how many units the user has scrolled without preventing them from scrolling further down the page.

Why does .animate to scrollTop jump to 0 before animating?

I am playing with Parallax scrolling like on that nike site. So I have been using scrollTop to determine the user's vertical position on the page and then I've been adjusting element's positions based on the changes to that value.
Here I round the scrollTop value and log it. I'll show the log later.
var distance = 60*(Math.round($(window).scrollTop()/60));
console.log(distance);
Then, on click, I call this function which scrolls to the scrollTop value that I've passed it.
function goTo(n){
console.log('begin animating');
$('html,body').animate({scrollTop: n},2000);
}
Here's the problem, the scroll top value jumps to 0 before animating.
So I'll be halfway down the page and it logs:
begin animating
0
6240
6180
6120
// etc...
The way I'm positioning stuff relies on the accuracy of the scrollTop value. So my question is:
How can I keep the scrollTop value from jumping to 0 before going through with the animation?
Let me know if theres any more info needed.
Heres the live version of the site: http://theblueeyeguy.com/moon/Illumination/
(click 'Next' then 'Prev' to break it)

Probably because you're using a link with href="#".
Add return false; to your onclick attribute.
< Prev |