I'm currently working on a Counter that shows some stats for my Homepage.
Here's the Script I'm using:
$('.count-1, .count-2, .count-3, .count-4').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 5000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
Now I only want to run this animation if the counter comes in the screen ... So I got this Script:
$(document).ready(function () {
var windowHeight = $(window).height(),
gridTop = windowHeight * -10,
gridBottom = windowHeight * .9;
$(window).on('scroll', function () {
$('.class').each(function () {
var thisTop = $(this).offset().top - $(window).scrollTop();
if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
// run this if .class gets in viewpoint
} else {
// run this else
}
});
});
});
So I put both of 2 scripts together to this:
$(document).ready(function () {
var windowHeight = $(window).height(),
gridTop = windowHeight * -10,
gridBottom = windowHeight * .9;
$(window).on('scroll', function () {
$('.count-1, .count-2, .count-3, .count-4').each(function () {
var thisTop = $(this).offset().top - $(window).scrollTop();
if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 5000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
} else {
}
});
});
});
Now if I scroll down on my page, the counter starts running when it gets in the screen (which is exakly what I wanted) BUT when the counter finishes, the counter starts to count backwards untill .count-1, .count-2 ... is at 1. And even if I scroll up and down again ... the counter still stays at 1. Sometimes the 1 changes to a 2 or 3 but than quickly goes down to a 1 again.
Here's the snippet:
$(document).ready(function () {
var windowHeight = $(window).height(),
gridTop = windowHeight * -10,
gridBottom = windowHeight * .9;
$(window).on('scroll', function () {
$('.count-1, .count-2, .count-3, .count-4').each(function () {
var thisTop = $(this).offset().top - $(window).scrollTop();
if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 5000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
} else {
}
});
});
});
/* just for some scrolling */
#container {
margin-top: 1000px;
margin-bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll down!</p>
<div id="container">
<div class="count-1">200</div>
<div class="count-2">100</div>
<div class="count-3">50</div>
<div class="count-4">4</div>
</div>
Where is the mistake?
Related
I wanted to have a counter that only activates when actually on the screen. I've managed to mangle this together from other examples I've found.
HTML:
<div>Scroll Down</div>
<span class="count">200</span>
CSS:
div {
height:800px;
background:red;
}
h1 {
display:none;
}
Javascript:
$(window).scroll(function() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
}
});
DEMO:
https://jsfiddle.net/76d57vjL/
The problem is, it reaches 200 and then counts back down to 0 but I want it to just stay at 200. I can't seem to figure out whats actually causing it though.
The problem was that you were creating more than 1 animation, so going back to 1 after starting the count, i fixed it with a flag, but probably you could make something with the heights to check that out.
Here's the fix with the flag: https://jsfiddle.net/uc0av8fh/
var flag = true;
$(window).scroll(function() {
$('#scroll-to');
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT-wH) , wS);
if (wS > (hT+hH-wH)){
$('.count').each(function () {
if(!flag) return;
//console.log();
flag = false;
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
return 1;
}
});
});
}
});
I have a big function which has many others functions, (But I can't have all those functions because make a wrong with my others scripts) therefore I only need the functions which make the action which I need; recently I was helped to find a function, but I think which miss other function which Hide the content, and show a button that I need. When I run the script works well, but doesn't show a button and too isn't hidden that bar when you return to the initial position. I tested the big script only for know if there is my mistake and elementally yep.
The big script you can find this here and too the example of what I'm trying to do See the code and example
You can take a look of what I'm trying to do on this image and the problem:
See Picture of the problem
My current script is this, works very well, but miss those two details which are into the big script. Please help me.
// JavaScript Document
;
jQuery(document).ready(function () {
"use strict";
jQuery(window).scroll(function () {
var scrollTop = jQuery(window).scrollTop();
var docHeight = jQuery(document).height();
var winHeight = jQuery(window).height();
var scrollPercent = (scrollTop) / (docHeight - winHeight);
var scrollPercentRounded = Math.round(scrollPercent * 100);
jQuery('#post_indicator').css('width', scrollPercentRounded + '%');
});
jQuery(window).scroll(function () {
if (jQuery('#pp_fixed_menu').val() == 1)
{
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper .above_top_bar').hide();
jQuery('.extend_top_contact_info').hide();
jQuery('.top_bar').addClass('scroll');
jQuery('#post_info_bar').addClass('scroll');
} else if (jQuery(this).scrollTop() < 200) {
jQuery('.header_style_wrapper .above_top_bar').show();
jQuery('.extend_top_contact_info').show();
jQuery('#custom_logo img').removeClass('zoom');
jQuery('#custom_logo img').css('maxHeight', '');
jQuery('#custom_logo').css('marginTop', parseInt(logoMargin) + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingTop', menuPaddingTop + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingBottom', menuPaddingBottom + 'px');;
jQuery('.top_bar').removeClass('scroll');
jQuery('#post_info_bar').removeClass('scroll');
}
} else {
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper').addClass('nofixed');
} else {
jQuery('.header_style_wrapper').removeClass('nofixed');
}
}
});
});
If you want to show button (arrow) you need to add it in your html then you can use this script:
<!-- language: lang-js -->
// JavaScript Document
;
jQuery(document).ready(function() {
"use strict";
jQuery(window).scroll(function() {
var scrollTop = jQuery(window).scrollTop();
var docHeight = jQuery(document).height();
var winHeight = jQuery(window).height();
var scrollPercent = (scrollTop) / (docHeight - winHeight);
var scrollPercentRounded = Math.round(scrollPercent * 100);
jQuery('#post_indicator').css('width', scrollPercentRounded + '%');
});
jQuery(window).scroll(function() {
var calScreenWidth = jQuery(window).width();
if (jQuery(this).scrollTop() > 200) {
jQuery('#toTop').stop().css({
opacity: 0.5,
"visibility": "visible"
}).animate({
"visibility": "visible"
}, {
duration: 1000,
easing: "easeOutExpo"
});
} else if (jQuery(this).scrollTop() == 0) {
jQuery('#toTop').stop().css({
opacity: 0,
"visibility": "hidden"
}).animate({
"visibility": "hidden"
}, {
duration: 1500,
easing: "easeOutExpo"
});
}
});
jQuery('#toTop, .hr_totop').on('click', function() {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
});
jQuery(window).scroll(function() {
if (jQuery('#pp_fixed_menu').val() == 1)
{
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper .above_top_bar').hide();
jQuery('.extend_top_contact_info').hide();
jQuery('.top_bar').addClass('scroll');
jQuery('#post_info_bar').addClass('scroll');
} else if (jQuery(this).scrollTop() < 200) {
jQuery('.header_style_wrapper .above_top_bar').show();
jQuery('.extend_top_contact_info').show();
jQuery('#custom_logo img').removeClass('zoom');
jQuery('#custom_logo img').css('maxHeight', '');
jQuery('#custom_logo').css('marginTop', parseInt(logoMargin) + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingTop', menuPaddingTop + 'px');
jQuery('#menu_wrapper div .nav > li > a').css('paddingBottom', menuPaddingBottom + 'px');;
jQuery('.top_bar').removeClass('scroll');
jQuery('#post_info_bar').removeClass('scroll');
}
} else {
if (jQuery(this).scrollTop() >= 200) {
jQuery('.header_style_wrapper').addClass('nofixed');
} else {
jQuery('.header_style_wrapper').removeClass('nofixed');
}
}
});
});
when you scroll up, the bar not hide again ?? i test here with this small script and its hide it when i scroll up
I want my slider to show "slide 1" after "slide 3" and not that after "slide 3" you are forced to use the return or previous button. I am a leak in javascript so I was wondering if someone could help me out for a sec ;)
And I was wondering how to make this one a width of 100% so it is more or less responsive :)
$(document).ready(function() {
// Your code from above goes here
var sliderWidth = 1280;
var slider = $('#slidiemain');
var sliderCount = $('div', slider).length;
slider.width(sliderCount * sliderWidth);
var currentSlide = 1;
$('a.prev1').click(function () {
if (currentSlide > 1) {
$('#slidiemain').animate({
left: '+=' + sliderWidth
}, 700);
currentSlide -= 1;
}
});
$('a.next1').click(function () {
if (currentSlide < sliderCount) {
$('#slidiemain').animate({
left: '-=' + sliderWidth
}, 700);
currentSlide += 1;
}
});
});
I am not familiar with the slideshow plugin you are using, but this should work:
$(document).ready(function() {
// Your code from above goes here
var sliderWidth = $( window ).width(); // Get the width of browser window
var slider = $('#slidiemain');
var sliderCount = $('div', slider).length;
slider.width(sliderCount * sliderWidth);
var currentSlide = 1;
$('a.prev1').click(function () {
if (currentSlide > 1) {
$('#slidiemain').animate({
left: '+=' + sliderWidth
}, 700);
currentSlide -= 1;
}
});
$('a.next1').click(function () {
if (currentSlide < sliderCount) {
$('#slidiemain').animate({
left: '-=' + sliderWidth
}, 700);
currentSlide += 1;
}
else
{
$('#slidiemain').animate({left: '+=' + (2*sliderWidth)}, 1);
currentSlide = 1;
}
});
});
I would like to replicate the same functionality as at ign.com, where the indicator bar fills up over time. I got it working but I got some sync issues after a while. So i'm open to suggestions to do it from scratch (I'm beginner with all this animation stuff).
This is the code.
function GoProgressBar() {
var $lineStatus = $('.featured-articles-line-status');
$lineStatus.css('width', '0px');
$lineStatus.animate({ width: '694px' }, 12000, 'linear', GoProgressBar);
};
function GoOverlay(width, isLast, currentWidth) {
var $overlayLine = $('.status-overlay');
if (isLast) {
$overlayLine.css('width', '0px');
return;
}
if (currentWidth) {
$overlayLine.css('width', currentWidth);
$overlayLine.animate({ width: width }, 700);
} else {
$overlayLine.css('width', '0px');
$overlayLine.animate({ width: width }, 700);
}
};
function ShowNextElement() {
var $elements = $('.element'),
$overlayLine = $('.status-overlay'),
$liElements = $('#elements li'),
width;
if (currentElement === elements[elements.length - 1]) {
currentWidth = $overlayLine.width() + 'px',
width = currentWidth + $($liElements[(elements.length - 1)]).outerWidth() + 'px';
GoOverlay(width, true, currentWidth);
currentElement = elements[0];
$elements.hide();
$(currentElement).fadeIn(1000);
return;
}
i = elements.indexOf(currentElement) + 1;
var currentTab = $liElements[(i - 1)],
currentWidth = $overlayLine.width();
if (currentWidth) {
width = currentWidth + $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, currentWidth);
} else {
width = $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, false);
}
currentElement = elements[i];
$elements.hide();
$(currentElement).fadeIn(1000);
}
Thanks!
http://jqueryui.com/progressbar/
You could try this..
There are more features in addition to this,check it out.
Might come useful :)
There are a wealth of ways in which you could do this.
You should have some kind of controller to manage the show and hide.
var Application = {
show : function() {
jQuery('.application-overlay').stop().animate({ top: 40 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 1000},500);
},
hide : function() {
jQuery('.application-overlay').stop().animate({ top: -1200 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 200},500);
}
};
Then you have your triggers : Application.show();
jQuery(document).ready(function() {
jQuery('.cf-speakers .span2 a').hover(function() {
jQuery('span',this).stop().animate({ opacity: 1.0 },100);
}, function() {
jQuery('span',this).stop().animate({ opacity: 0.0 },100);
});;
jQuery('.apply-now').click(function(e) {
Application.show();
e.stopPropagation();
e.preventDefault();
});
jQuery('body').click(function(e) {
var application = jQuery('.application-overlay');
if( application.has(e.target).length === 0)
Application.hide();
});
jQuery('.gallery a').click(function(e) {
var src = jQuery(this).attr('href');
jQuery('.main-container img').hide().attr('src', src).fadeIn('fast');
jQuery('.gallery a').each(function() {
jQuery(this).removeClass('active');
});
jQuery(this).addClass('active');
e.stopPropagation();
e.preventDefault();
});
});
Your css would of course come into play also but that can be left to you!
This should give you an example of what you need .. But you're already on the right track, sometimes there is merit in reusing other people code too you know! :)
I'm building a site which is a single scroll with smoothscrolls and some more JS for some feature across the page.
On Google Chrome, this seems to work for me with no issues at all; although a few friends have mixed results. On Safari, there seems to be a few issues but, most of all, none of the smooth scrolling seems to work (most of the JS) until you are past the 'landing slide'
I have tried to debug this and check the web inspector console, but no errors are appearing.
Can anyone help?
My JS code is here: http://goo.gl/rcvJe and the site I am building here: http://goo.gl/0vQUe
Many thanks in advance,
R
// Resizing each slide height per height of window
$(document).ready(function() {
if ( $(window).width() > 700 ) {
$(document).ready(function() {
var height = $(window).outerHeight() + 50;
$('.each-slide').outerHeight(height);
});
$(window).resize(function() {
var height = $(window).outerHeight() + 50;
$('.each-slide').outerHeight(height);
});
}
if ( $(window).width() > 700 ) {
$(document).ready(function() {
var height = $(window).outerHeight() - 199;
$('.first-slide').outerHeight(height);
});
$(window).resize(function() {
var height = $(window).outerHeight() - 199;
$('.first-slide').outerHeight(height);
});
}
});
// Initialise the smooth scrolling on anchors
$(document).ready(function() {
$('a.smooth-scroll-no-offset').smoothScroll({
easing: 'swing',
speed: 500
});
});
$(document).ready(function() {
$('a.smooth-scroll').smoothScroll({
easing: 'swing',
speed: 500,
offset: 100
});
});
// Fitvid
$(document).ready(function(){
$('.video-container').fitVids();
});
// Remove arrow hint when near bottom
/*$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 700 ) {
$('.continue-down').fadeOut();
}
else {
$('.continue-down').fadeIn();
}
});*/
// Ajax subscribe form
$(function () {
$('#subForm').submit(function (e) {
e.preventDefault();
$.getJSON(
this.action + "?callback=?",
$(this).serialize(),
function (data) {
if (data.Status === 400) {
alert("Error: " + data.Message);
} else {
$('#subForm input[type=submit]').animate({opacity:0}).delay(2000).animate({opacity:1});
$('.confirmation-message').animate({opacity:1}).delay(2000).animate({opacity:0});;
$('#subForm').find('input[type=text]').val('');
}
});
});
});
// Some simple colours on hovers
$(document).ready(function() {
$('.menu-navigation-desktop ul li:nth-child(2) a').hover(function()
{ $('.site-intro a:nth-of-type(1)').css({'color':'#69B6D7','border-bottom':'1px solid'}); },
function () { $('.site-intro a:nth-of-type(1)').css({'color':'#333333','border-bottom':'0'}); }
);
$('.menu-navigation-desktop ul li:nth-child(3) a').hover(function()
{ $('.site-intro a:nth-of-type(2)').css({'color':'#A396C0','border-bottom':'1px solid'}); },
function () { $('.site-intro a:nth-of-type(2)').css({'color':'#333333','border-bottom':'0'}); }
);
$('.menu-navigation-desktop ul li:nth-child(4) a').hover(function()
{ $('.site-intro a:nth-of-type(3)').css({'color':'#777777','border-bottom':'1px solid'}); },
function () { $('.site-intro a:nth-of-type(3)').css({'color':'#333333','border-bottom':'0'}); }
);
});
// Contact form styles and triggers
$(document).ready(function(){
var $c=$('.menu-navigation-desktop ul li:nth-child(5) a').css('background-color');
$('.contact-form').css('background-color',$c);
$('.menu-navigation-desktop li a.contact-form-action').click(function() {
$('.contact-form').toggle();
});
});
// Animations
$(document).ready(function() {
$('.map-icon').addClass('animated pulse');
});
// Mobile navigation
$(document).ready(function() {
$('.navigation-trigger').click(function() {
$('.menu-navigation-mobile ul').slideToggle('fast');
$('span', this).text($('span', this).text() == 'navigatedown' ? 'navigateup' : 'navigatedown');
});
});
// Design process slider
$(document).ready(function() {
var unslider = $('.design-process-slider').unslider({
delay: false,
keys: true,
dots: true,
fluid: true
});
});
$(document).ready(function() {
$('.design-process-slider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider.data('unslider')['next']();
} else {
unslider.data('unslider')['prev']();
};
});
});
// Sustainability slider
$(document).ready(function() {
var unslider2 = $('.sustainability-slider').unslider({
delay: false,
keys: true,
dots: false,
fluid: true
});
});
$(document).ready(function() {
$('.sustainability-slider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider2.data('unslider')['next']();
} else {
unslider2.data('unslider')['prev']();
};
});
});
// Testimonial slider
$(document).ready(function() {
var unslider3 = $('.testimonial-slider').unslider({
delay: false,
keys: true,
dots: false,
fluid: true
});
});
$(document).ready(function() {
$('.testimonial-slider-arrow').click(function(event) {
event.preventDefault();
if ($(this).hasClass('next')) {
unslider3.data('unslider')['next']();
} else {
unslider3.data('unslider')['prev']();
};
});
});
// Map tip hovers
$(document).ready(function() {
$('.map-icon.one').hover(
function () {
$('.map-tip.one').fadeIn();
},
function () {
$('.map-tip.one').fadeOut();
}
);
$('.map-icon.two').hover(
function () {
$('.map-tip.two').fadeIn();
},
function () {
$('.map-tip.two').fadeOut();
}
);
$('.map-icon.three').hover(
function () {
$('.map-tip.three').fadeIn();
},
function () {
$('.map-tip.three').fadeOut();
}
);
$('.map-icon.four').hover(
function () {
$('.map-tip.four').fadeIn();
},
function () {
$('.map-tip.four').fadeOut();
}
);
});
// Testimonial circle cycles
$(document).ready(function() {
$('.testimonial-container').cycle();
});
//
$(document).ready(function() {
$('.menu-navigation-desktop ul li').click(function() {
$('.menu-navigation-desktop ul li').removeClass('active-slide');
$(this).addClass('active-slide');
});
});
$(document).ready(function() {
var sections = $('.each-slide-section-container'),
links = $('.menu-navigation-desktop ul li a'),
lis = $('.menu-navigation-desktop ul li');
$(window).scroll(function() {
var currentPosition = $(this).scrollTop();
links.removeClass('selected');
lis.removeClass('active-slide');
sections.each(function() {
var top = $(this).offset().top,
bottom = top + $(this).height();
if (currentPosition >= top && currentPosition <= bottom) {
var link = $('a[href="#' + this.id + '"]');
link.addClass('selected');
link.parent().addClass('active-slide');
}
});
});
});
$(document).ready(function() {
$('.each-slide .design-spread-container .design-spread-element').hover(
function () {
$(this).animate({
opacity: 1
})
},
function () {
$(this).animate({
opacity: 0
})
}
);
});
This issue with smoothScroll solved my problem.
https://github.com/kswedberg/jquery-smooth-scroll/issues/29