Execute counter script when element is scrolled to on webpage - javascript

I'm completely new to javascript. I'm trying to execute a counting script but I only want it to start when you scroll to the element on-screen (so you can see the counting). Currently, my code currently only works on page load. Can somebody please help me? Thanks.
Here is the html code element:<span class="count">100</span>
here is the script that currently works on page load:
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});

You could use something like this:
$element = $('.count');
$(window).scroll(function() {
var hT = $element.offset().top,
hH = $element.outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT + hH - wH)) {
$element.each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
});
What it does is validate the current scroll offset against the element offset in the page. Hope it helps.

Ok I just found a solution someone else had done. I'm sure there is a simpler script possible but this one works like a charm. I edited the SPAN element like so:
<span class="timer count-title count-number" data-to="100" data-speed="5000"></span>
I then used the updated Feb 2 javascript code found # Bootstrap counter start on display. Hope this helps others looking for a scroll-to activated counter.

Related

jQuery activate function when user scrolls to specific section

I have been using progressbar.js to animate path fills, which is going quite well, however I have ran into a issue where the animation / function is playing as soon as the user loads the page.
The plan is for the function to run when the user scrolls to the section where its contained.
JSFiddle - https://jsfiddle.net/y12e8uks/1/
I have tried using $(window).scroll event, however im having a few issues implementing that into the existing function.
Any help would be great on this!
Thanks.
Try with this:
var bar = new ProgressBar.Path('#heart-path', {
easing: 'easeInOut',
duration: 1400
});
$(window).scroll(function() {
var hT = $('#container').offset().top,
hH = $('#container').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'linear',
step: function (now) {
$(this).text(Math.ceil(now));
$(this).append("%");
}
});
});
}
});

Stop/reverse animation on mouse off (baraja jquery plugin)

I've implemented the baraja jquery plugin for a section on a 'web app' that I need to create.
Rather than the plugin spreading the cards on the click of a button, I've opted to alter the script and spread out the cards on hover. On the face of it this works but if you hover over the cards and back off quickly before the animation is finished the cards will stay open. And then when you hover over the 'deck' they close. I've created a codepen below to show this:
http://codepen.io/moy/pen/OPyGgw
I've tried using .stop(); but it doesn't seem to have an impact on the result. Can anyone help me with this?
Additionally I'd like the deck to be open on page load, then close after a second or 2. I tried this with $( document ).ready() including the baraja.fan call but that didn't trigger it - any ideas?
this one really tickled me ;) tried several things, but - as already told - the plugin doesn't expect to get the close animation call faster, then the opening animation will run.
so finally i build you the following.
- opening the fan, right at document ready
- created a timeout for the mouseleave, to wait for the opening animation duration, before closing it - you will have a 400ms delay when mouseleave the element, but it will close, even when you've been to fast...
$(document).ready(function () {
if ($("#baraja-el").length) {
var $el = $('#baraja-el');
baraja = $el.baraja();
}
//initial open
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
$('.baraja-container').addClass('open');
// navigation
$('#baraja-prev').on('click', function (event) {
baraja.previous();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1000") {
$(this).addClass('visited');
}
});
});
$('#baraja-next').on('click', function (event) {
baraja.next();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1010") {
$(this).addClass('visited');
}
});
});
$('.baraja-container').hover(function (event) {
if(!$(this).hasClass('open'))
{
$(this).addClass('open');
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
}
}, function (event) {
curBarCon = $(this);
setTimeout(function(){
curBarCon.removeClass('open');
baraja.close();
}, 400);
});
$('.baraja-container li').click(function () {
$(this).addClass('visited');
});
});
since i fiddled in your codepen, you should have the working version here: http://codepen.io/moy/pen/OPyGgw
but... it's really no perfect solution. i'd suggest to get another plugin or rework baraja to get callback functions, which would test if the animation is currently running and dequeue them if needed.
rgrds,
E

jQuery ScrollTop add to this script

a couple of people kindly helped me yesterday with a jQuery issue on a scrollTop function but I now have another small issue. Below is the fiddle for the js. I need to get the js to bounce the content back to the top instead of scrolling back up to the top.
Here is the JS, fiddle below it.
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop('scrollHeight'),
easing: 'linear'
}, {
duration: speed,
easing: 'linear', // <--- here
complete: function () {
$(this).animate({
scrollTop: 0
}, {
duration: speed,
easing: 'linear', // <--- here
complete: speed
});
}
});
}
speed = 8000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
fiddle
I need the speed to remain as linear but the scroll to reset to the top once it gets to the bottom. Any help would be amazing! Thanks in advance people :)
Here is an updated fiddle: http://jsfiddle.net/tsb5pj49/4/
Instead of animating it back to the top, you can just set the scrollTop to 0 using the same function. Additionally, if you store the setInterval in a variable then you can clear it and start it again when the animation completes and the scrollTop is reset. Like so:
// When DOM is fully loaded
jQuery(document).ready(function ($) {
var speed = 8000,
scrollInterval;
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop('scrollHeight'),
easing: 'linear'
}, {
duration: speed,
easing: 'linear', // <--- here
complete: onScrollingComplete
});
}
function startScrolling() {
scroll( speed );
scrollInterval = setInterval(function () {
scroll(speed)
}, speed * 2);
}
function onScrollingComplete() {
$( this ).scrollTop( 0 );
clearInterval( scrollInterval );
startScrolling();
}
startScrolling();
});
Hope this helps

Update DIV contents with current jQuery Cycle slide

I'm having difficulties updating the contents of a DIV with the current slide of my jQuery Cycle slideshow.
Here is the slider function, it currently will output the current slide as an alert (and works).
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
alert("Current slide " + opts.currSlide);
}
});
The DIV is as follows:
<div id="test">Hello</div>
And the code I'm trying to use (to replace the end of the code above):
$(function (curr, next, opts) {
var test = document.getElementById("test");
test.innerHTML = opts.currSlide;
});
Any thoughts on why the DIV does not update with the current slide #?
Unfortunately, nothing happens. I'm still learning my way around JS, so any pointers are much appreciated! Thank you for your time.
That variable in opts object (opts.currSlide) is not defined outside of the cycle function/plugin
so you would have to pass it to the function
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
getCurrSlide(opts.currSlide);
}
});
}):
function getCurrSlide(curr){
$("#test").html(curr);
}
OK. I have made a fiddle and there are a few thing to note. First your action added to the initial cycle will be removed when you hit your buttons. Here I have made the initial cycle do what you want and have added a button that you might use to get a 'snapshot' Note the selector to get only the currently visible image.
the meat:
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast',
before: function (curr, next, opts) {
$('#testNum').html("Current slide " + opts.currSlide);
var $img = $("#slideshow img:visible").clone();
$("#test").html('').append($img); }
});
// The button will work after you click fast,slow, or reverse.
// The reason for that is the .cycle function above replaces it
// as fast as you can see it.
$("#btnCopy").on("click",function(){
var $img = $("#slideshow img:visible").clone();
$("#test").html('').append($img);
});

jquery autoscroll plugin not firing

I am sure my issue is a result of my inexperience in jquery and javascript. I am trying to use an autoscroll jquery plugin. I just stares at me when I click the link that is supposed to activate the scroll. Can someone help? Here is what I have:
I have called the relevant scripts in the head tag.
In at the end of my body tag I have this:
<script type="text/javascript">
$(document).ready(function() {
$("a.hello").click(function () {
$("#text").autoscroll("toggle", {
start: {
step: 50,
scroll: true,
direction: "down",
pauseOnHover: true
},
delay: 5000,
ffrw: {
speed: "fast",
step: 100
}
});
});
});
</script>
Then, I am trying to fire the script using an anchor, like this:
start/stop
The id of the div that I want to 'pause on hover' is "text".
The source and instructions of this plugin is found here. Thanks.
EDIT:
The function that calls some html from other files based on form selects and puts it into the <div id="text"></div>.
function clickMe() {
var book = document.getElementById("book").value;
var chapter = document.getElementById("chapter").value;
var myFile = "'files/" + book + chapter + ".html'";
$('#text').load(myFile + '#source')
}
You forgot to wrap the code inside a
$(document).ready(function() {
..
});

Categories

Resources