We Keep Coding

jQuery animtion stops when user scrolls

I'm using multiple number elements on my site which are counting up after hitting the visible area of the viewport.
That part works until the user manually scrolls the page. If the user scrolls up or down, the animation stops for a second and repeats when the user don't scroll anymore. It looks very buggy.
If I try to replicate the problem in a fiddle, the same code always works without the "stuttering"?
jQuery(function($) {
$(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i, el) {
function visPx() {
var H = $(this).height(),
r = el.getBoundingClientRect(),
t = r.top,
b = r.bottom;
return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
}
visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
$(".fig-number").inViewport(function(px) {
// if px>0 (entered V.port) and
// if prop initNumAnim flag is not yet set = Animate numbers
if (px > 0 && !this.initNumAnim) {
this.initNumAnim = true; // Set flag to true to prevent re-running the same animation
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 10000,
step: function(now) {
$(this).text(Math.ceil(now));
}
});
}
});
});
html,
body {
height: 100%;
}
.spacer {
height: 100%;
width: 100%;
display: block;
background: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spacer">
scroll down
</div>
<div class="number-box">
<h1 class="fig-number">1000</h1>
<h1 class="fig-number">1500</h1>
</div>
<div class="spacer">
scroll down
</div>
<div class="number-box">
<h1 class="fig-number">2000</h1>
<h1 class="fig-number">2500</h1>
</div>
<div class="spacer">
scroll down
</div>
<div class="number-box">
<h1 class="fig-number">3000</h1>
<h1 class="fig-number">3500</h1>
</div>
The working fiddle (same code): https://jsfiddle.net/JSCray/r7g0vn93/3/

Using Left and Right navigation button to select different div frames

Functionality:
Users have the freedom to navigate between the 2 frames available for a picture shot. Hence, in the first frame, when the user clicks on the "Right" button; the "Left"button is hidden, the second frame will fadeIn while the first frame will fadeOut. Furthermore, when users are in the second frame and needs to navigate back to the first frame, the user will click on the "Left" button; the "Right" button will then be hidden, the second frame will fadeOut while the first frame will fadeIn.
What has been done:
I have created the 2 frame <div>s and also the method call for the left button and the right button.
Issue:
In the first frame, the left arrow is still hidden, as I have set the class="hidden" for the left arrow. However, when the user navigates to the second frame, the left arrow is still "hidden" while the right arrow is still "shown" when it should be hidden.
Hence, how do I set the conditional check for the 2 frames, such that when the user navigates to the second frame, the "right" arrow is hidden and only the "left arrow is showing", while in the first frame, the "right" arrow is showing and the "left" arrow is hidden.
function Left() {
$('#Photoframe02').fadeOut({
duration: slideDuration,
queue: false
});
$('#Photoframe02').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
$('#Photoframe01').fadeIn({
duration: slideDuration,
queue: false
});
$('#Photoframe01').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
}
function Right() {
$('#Photoframe01').fadeOut({
duration: slideDuration,
queue: false
});
$('#Photoframe01').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
$('#Photoframe02').fadeIn({
duration: slideDuration,
queue: false
});
$('#Photoframe02').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
}
//I think this is a wrong method call to check frame, as both IDs are different
function CheckFrame(page) {
if ($("#Photoframe01").turn("page") = 2) {
// If the page we are currently on is not the first page, reveal the back button
$("#LeftSide").removeClass("hidden");
$("#RightSide").addClass("hidden");
console.log("RoleModels LeftSide is shown");
}
}
.hidden {
display: none;
}
<div id="Active_Camera" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=5; top:0px; left:0px; ">
<img id="Photoframe01" class="hidden" style=" position:absolute; width:1920px; height:1080px; z-index:5; top:0px; left:0px;" src="lib/img/Photoframe01.png" />
<img id="Photoframe02" style=" position:absolute; width:1920px; height:1080px; z-index:5; top:0px; left:1921px;" src="lib/img/Photoframe02.png" />
<button id="LeftButton" onclick="Left()">
<img style="width: 250px; height:250px" src="lib/img/Nav/Left.png">
</button>
<button id="RightButton" onclick="Right()">
<img style="width: 250px; height:250px" src="lib/img/Nav/Right.png">
</button>
</div>

I have solved my own issue.
I have employed the method of having an Index attached to each navigation button. Secondly, I have put the available frames into an array, such that it can be called from a list. Hence, I find this method to be simpler and cleaner.
var selectedFrameIndex = 1;
var framelist = ["Photoframe01.png", "Photoframe02.png", , "Photoframe03.png", , "Photoframe04.png"];
function selectFrame(flag) {
if (flag == "1") {
selectedFrameIndex--;
} else if (flag == "2") {
selectedFrameIndex++;
}
if (selectedFrameIndex <= 0) {
selectedFrameIndex = framelist.length;
} else if (selectedFrameIndex > framelist.length) {
selectedFrameIndex = 1;
}
$("#Photoframe").attr("src", "lib/Photoframe0" + selectedFrameIndex + ".png");
}
<div>
<img id="Photoframe" class="hidden" style=" position:absolute; width:1920px; height:1080px; z-index:6; top:0px; left:0px; display: inline-block; " src="lib/Photoframe01.png" />
<table cellspacing="0" cellpadding="0" width="1080" id="photo_stream">
<tr>
<td width="1080">
<canvas id="canvas" width="1920" height="1080" style="position:absolute; z-index:5; top:0; left:0; margin:auto; display:none;"></canvas>
<button id="CameraActiveButton" onclick="TakePicture()">
<img src="lib/img/PAGE04/SNAPNOW.png">
</button>
<button id="LeftButton" onclick="selectFrame('2')">
<img style="width: 250px; height:250px" src="lib/img/PAGE04/Nav/Left.png">
</button>
<button id="RightButton" onclick="selectFrame('1')">
<img style="width: 250px; height:250px" src="lib/img/PAGE04/Nav/Right.png">
</button>
</td>
</tr>
</table>
</div>

CSS Slide Down and Slide Up on document click

I have a issue here. I'm trying to do the slideUp and slideDown equivalent in CSS3 transitions but also want when document is clicked the div element slides up.
Here is the code
http://jsfiddle.net/RK8FZ/2/
HTML
<div id="main">
<div id="search-content">
<input type="search" placeholder="Search"/>
<input type="submit" />
</div>
<section class="wrapper">
<span id="toggle-search">Search</span>
</section>
</div>
Here is the CSS code
#main #search-content { position: relative; max-height: 0; overflow: hidden; transition: all .3s linear; background: #FFF; opacity: 0;}
#main #search-content.open { max-height: 200px; opacity: 1; }
Here is the jquery code
function toggleSearch() {
$('#toggle-search').on('click', function(event){
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text( $(this).text() === "Search" ? "Close" : "Search" );
})
$('#search-content').on ('click', function(e) {
e.stopPropagation();
});
$(document).on('click', function() {
if( $('#search-content').hasClass('open') ) {
$('#search-content').removeClass('open');
}
});
}
Can anyone figure this thing out? What it is happening is that it triggers the open and the close at the same instante.

Working DEMO
I guess this is what you need
$(function () {
toggleSearch();
})
function toggleSearch() {
$('#toggle-search').on('click', function (event) {
event.stopPropagation();
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text($(this).text() === "Search" ? "Close" : "Search");
})
}
$(document).on('click', function (e) {
$('#toggle-search').text('Close');
$('#search-content').removeClass('open');
});
$('#search-content').on('click', function (e) {
e.stopPropagation();
});

$(document).on('click', function () {
if ($(this).addClass('search-open')) {
$('#search-content').removeClass('open');
}
});
What are you checking in if condition? If you wan to check if search-open class exists then you can use
if ($(.search-open').length > 0)

javascript: fade div in on button click, then on 2nd button click fade out?

can someone help i am trying to get a div to fade in when a user clicks a button/div.
then on the second click i want the div to fade out again, i want this script to be repetitive/repeat.
here's what i am using to fade the div in:
<script>
$('.submit_review').click(function () {
if ($('.submit_review').is(":visible")) {
$('.review_submit_box').delay(400).fadeIn(300);
}
});
</script>
here's what i have tried to do to get it to fade in and out on button click, but i need a push in the right direction thanks.
<script>
$('.submit_review').click(function () {
if ($('.submit_review').is(":visible")) {
$('.review_submit_box').delay(400).fadeIn(300);
} else if ( $('.submit_review').click(function () {
$('.review_submit_box').is(":visible")) {
$('.review_submit_box').fadeOut(300);
}
});
</script>
html:
<div class="reviews_section">
<div class="submit_review"><div class="
submit_review_text">Submit a Review</div></div>
<div class="review_submit_box"></div>
</div>
<div class="reviews_section2">
<?php include('includes/mod_profile/mod_reviews/mod_reviews.php'); ?>
</div>

Why not simply use jQuery's fadeToggle http://api.jquery.com/fadeToggle/
You could toggle the fade in/out on click and that would reduce your code to a couple of lines
EDIT:
Here's some code
$('.submit_review').click(function() {
$('.review_submit_box').fadeToggle(300)
})

Rather than to check if is(:visible) just add a hidden class to the div and check if it exsits.
$(function() {
$('#divvy').addClass('hidden').hide();
$('#button').click(function() {
if ($('#divvy').hasClass('hidden')) {
$('#divvy').removeClass('hidden').fadeIn(1000);
}
else {
$('#divvy').addClass('hidden').fadeOut(1000);
}
});
});
<div id="divvy">
I will appear and then fade!
</div>
<input type="button" value="Click me" id="button" />
jsfiddle: http://jsfiddle.net/j7HTY/1/

Try this http://jsfiddle.net/gabrieleromanato/cX88R/
var test = $('#test'),
$in = $('#in'),
out = $('#out'),
toggle = $('#toggle'),
to = $('#to');
$in.click(function() {
test.fadeIn(1000, function() {
alert('Complete');
});
});
out.click(function() {
test.fadeOut(1000, function() {
alert('Complete');
});
});
toggle.click(function() {
test.fadeToggle(1000, function() {
alert('Complete');
});
});
to.click(function() {
test.fadeTo(1000, 0.5, function() {
alert('Complete');
});
});

Here is a method using javascript and css3
The keyframes (there are 3 of them for each method, supporting webkit, firefox and standard) and they define our start and end states.
The class (fade-in, fade-out) assigns what kind of animation we will perform. Which is: do the keyframes matching the class, using ease-in animation and only do it once and remain at the last keyframe.
The class one just demonstrates how we can give different delays to different elements.
Finally, we have two buttons (Fade and Fade Out). Each has an "click" event listener attached. When clicked they swap the class on the div so that the animation is performed.
CSS
#-webkit-keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
#keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes fadeOut {
from {
opacity:1;
}
to {
opacity:0;
}
}
#-moz-keyframes fadeOut {
from {
opacity:1;
}
to {
opacity:0;
}
}
#keyframes fadeOut {
from {
opacity:1;
}
to {
opacity:0;
}
}
.fade-out {
opacity:1;
-webkit-animation:fadeOut ease-in 1;
-moz-animation:fadeOut ease-in 1;
animation:fadeOut ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-out.one {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
HTML
<button id="in">Fade In</button>
<button id="out">Fade Out</button>
<div id="myDiv" class="fade-in one">Some text</div>
Javascript
var myDiv = document.getElementById("myDiv");
document.getElementById("in").addEventListener("click", function () {
myDiv.className = myDiv.className.replace(/fade-out/, "").trim() + " fade-in";
}, false);
document.getElementById("out").addEventListener("click", function () {
myDiv.className = myDiv.className.replace(/fade-in/, "").trim() + " fade-out";
}, false);
On jsfiddle

My method involved checking for the indexes of the div and button elements by using the jquery selector.
I used index() to get the position of the elements with the class name ".review_submit_box" and have it fade out if it doesnt have the same index as the calling ".submit_review" button.
The number of divs with the class name ".review_submit_box" have to be the same number as the buttons with the class name ".submit_review" to work properly without issues. And also matching indexes for the right button to call the right box. This is sorted in arranging the html. (i.e. to make the first button in a class of buttons call the first div in a class of divs which has the same index/position as the calling button )
To make it automatic, you can make another function to fade out all divs and fade in the div with an index matching a variable with a value that iterates and has a timeout to call the function repeatedly.
My Solution was better meant for carousels and not review boxes, hope it helps.
HTML
<div class="review_submit_box">
<div>
<h2>BEST DESIGN</h2>
</div>
</div>
<div class="review_submit_box">
<div>
<h2>BEST SERVICES</h2>
</div>
</div>
<div class="review_submit_box">
<div>
<h2>BEST EQUIPMENT</h2>
</div>
</div>
<div id="controls-div">
<button class="submit_review">SHOW</button>
<button class="submit_review">SHOW</button>
<button class="submit_review">SHOW</button>
</div>
JQUERY
//GLOBAL VARIABLES
var activeCarouselIndex = 0;
//FADE OUT OTHER DIVS AND FADE IN THE DIV WITH SAME INDEX AS CALLING BUTTON
$( ".submit_review" ).on('click',function(event){
var carouselBtnIndex = $(this).index();
alert("You have clicked button with index: "+carouselBtnIndex );
activeCarouselIndex = carouselBtnIndex;
$( ".review_submit_box" ).each(function() {
if( $(this).index() !== activeCarouselIndex ) {
$(this).fadeOut(900);
} else {
$(this).fadeIn(900);
}
});
});
//SET AUTOMATIC SLIDING
slideCarousels();
function slideCarousels() {
$( ".review_submit_box" ).each(function() {
if( $(this).index() !== activeCarouselIndex ) {
$(this).fadeOut(900);
}
});
$( ".review_submit_box" ).eq(activeCarouselIndex).fadeIn(900);
activeCarouselIndex++;
if (activeCarouselIndex >= $( ".review_submit_box" ).length) {activeCarouselIndex = 0}
setTimeout(slideCarousels, 2000); // Change every 2 seconds
}

Jquery Text Animation customization help needed

I have this jquery sliding text animator. If you look at the example(http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/), the active text that flies in disappears again after it has made its entrance. I would like each animated text to stay there after appearing and wait until all the text has appeared, then all text should disappear and restart again.(so basically instead of each text disappearing after flying in, it should stay visible only until the last text element has appeared, then restart all over)
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('.container .flying-text').css({
opacity: 0
});
$('.container .active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 4000);
var int = setInterval(changeText, 5000);
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) $nextText = $('.container .flying-text:first');
$activeText.animate({
opacity: 0
}, 1000);
$activeText.animate({
marginLeft: "-100px"
});
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}
});​
</script>
CSS
.container{
width:500px;
margin:0 auto;
color:#FFF;
overflow:hidden;
}
.flying-text{
margin-left:-100px;
color: #fff;
}
HTML
<div class="container">
<div class="flying-text active-text">I believe</div>
<div class="flying-text">I can</div>
<div class="flying-text">Fly</div>
</div>
Thank You for any help

You need to move the fade out code that runs each time.
function changeText() {
var $activeText = $(".container .active-text");
var $nextText = $activeText.next();
if ($activeText.next().length == 0) {
$nextText = $('.container .flying-text:first');
// To fade all out _ MOVED FROM OUTSIDE THIS IF
var $allText = $(".container div");
$allText .animate({
opacity: 0
}, 1000);
$allText .animate({
marginLeft: "-100px"
});
}
$nextText.css({
opacity: 0
}).addClass('active-text').animate({
opacity: 1,
marginLeft: "250px"
}, 3000, function() {
$activeText.removeClass('active-text');
});
}​
Here is a jsfiddle to illustrate.
UPDATE
Based on some comments, I updated the fiddle to show how you could use jQuery UI effects.