We Keep Coding

Make function to animate when in view more flexible

I have some code to animate a couple of numbers when scrolled into view. Everything is working fine. However, currently it only works with ONE set of numbers and tied to ONE div (with an id). I'd like to make it become more flexible, making it work for more than 1 sets of numbers.The DIV ids can be counter1, counter2, counter3 etc.
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter1').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
...
Here's the pen:
https://codepen.io/anon/pen/bQWpjJ
Thanks for you help!

Perhaps you could revise your implementation by first iterating over each counter using $('#counter1, #counter2').each( .. ).
Inside of each iteration, you'd effectively re-use your existing code by setting up a window.scroll() handler for that counter instance.
You'd also move var a = 0 inside of the iteration, so that your code tracks the unique scroll offset for this counter instance.
Finally, you'd want to ensure that you select '.counter-value' elements for the current counter instance of the iteration:
$('#counter1, #counter2').each(function() {
var a = 0;
var counter = $(this);
$(window).scroll(function() {
var oTop = counter.offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value', counter).each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
a = 1;
}
});
})
.spacing {
width:100%;
height: 1280px;
position:relative;
}
.counter {text-align:center}
.counter-value {display:inline-block; padding:20px 40px; margin:0 20px; border:1px solid #ddd; font-family:Arial; font-size:50px; font-weight:bold}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="spacing"></div>
<div id="counter1">
<div class="counter-value" data-count="300">0</div>
<div class="counter-value" data-count="400">100</div>
<div class="counter-value" data-count="1500">200</div>
</div>
<div class="spacing"></div>
<div id="counter2">
<div class="counter-value" data-count="500">100</div>
<div class="counter-value" data-count="600">200</div>
<div class="counter-value" data-count="1700">300</div>
</div>
<div class="spacing"></div>
Here's a working codepen - hope that helps!

How to toggle a div from one button

I can carry this task by using .toggle() in version 1.8 of jquery
but am using /jquery/3.2.1/ on my site and the .toggle() is not working properly
in one of my page am using this in my first section
$(document).ready(function(){
$("#slideBtn").click( function(){
$(".slide-div").animate({left : '0'},"slow");
$(".slide-div").css({"top": "0","z-index": "9"});
$("p").animate({fontSize: '100px'},2000);
$("#slideBtn").fadeOut("slow");
});
$(".closedBtn").click( function(){
$(".slide-div").animate({left:'-820px'},"slow");
$(".slide-div").css({"top": "0","z-index": "9"});
$("p").animate({fontSize: '14px'}, "slow");
$("#slideBtn").fadeIn("slow");
});
});
it works fine but when i have to do the same task by clicking on the same button as it is in my bottom section by clicking it first time it works fine but if i click multiple time it wont work fine so i have issues with this code i need help with this code thank's
Here is the code
$(document).ready(function(){
$("#button").click(function(){
$(".new-box").animate({left : '0'},"slow");
});
$("#button").click(function(){
var left = $(".new-box").css('left');
if(left == '-820'){
$(".new-box").animate({left : '0'},"slow" );
}
else {$("#button").on("click",function(){ $(".new-box").animate({left : '-820px'},"slow");});}
});
});
Here is the example
$(document).ready(function() {
$("#slideBtn").click(function() {
$(".slide-div").animate({
left: '0'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '100px'
}, 2000);
$("#slideBtn").fadeOut("slow");
});
$(".closedBtn").click(function() {
$(".slide-div").animate({
left: '-820px'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '14px'
}, "slow");
$("#slideBtn").fadeIn("slow");
});
});
$(document).ready(function() {
$("#button").click(function() {
$(".new-box").animate({
left: '0'
}, "slow");
});
$("#button").click(function() {
var left = $(".new-box").css('left');
if (left == '-820') {
$(".new-box").animate({
left: '0'
}, "slow");
} else {
$("#button").on("click", function() {
$(".new-box").animate({
left: '-820px'
}, "slow");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="float:left;width:1020px;">
<div class="main" style="width:800px;height: 500px;background-color: #f5f5f5;position:relative;">
<button id="slideBtn">Play</button>
<div class="slide-div" style="width:800px;height: 500px;background-color: aqua;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; ">X</button>
<p style="width:100%;">Hello</p>
</div>
</div>
<div class="showdiv" style="width:800px;height: 500px;background-color: red;position:relative;">
<button id="button">shw</button>
<div class="new-box" style="width:800px;height: 500px;background-color: #f98463;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; "></div>
</div>
</div>
JSFiddle

If you used a debugger on the code, you'd see that left comes back from css with a units value on it (e.g., -810px, not -810). You're also hooking up a click handler within a click handler, which is almost never a good idea.
I wouldn't rely on the return value from css at all; instead, I'd use a flag class (and probably do the animation with CSS, but that's out of scope):
$(document).ready(function() {
$("#button").click(function() {
$(".new-box").animate({
left: '0'
}, "slow");
});
$("#button").click(function() {
var left = $(".new-box").css('left');
if ($(".new-box").hasClass('on-left')) {
$(".new-box").removeClass('on-left').animate({
left: '0'
}, "slow");
} else {
$(".new-box").addClass('on-left').animate({
left: '-820px'
}, "slow");
}
});
});
There I've added a class initially to the element, and then I use it as a flag for what to do when the click occurs.
Live copy:
$(document).ready(function() {
$("#slideBtn").click(function() {
$(".slide-div").animate({
left: '0'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '100px'
}, 2000);
$("#slideBtn").fadeOut("slow");
});
$(".closedBtn").click(function() {
$(".slide-div").animate({
left: '-820px'
}, "slow");
$(".slide-div").css({
"top": "0",
"z-index": "9"
});
$("p").animate({
fontSize: '14px'
}, "slow");
$("#slideBtn").fadeIn("slow");
});
});
$(document).ready(function() {
$("#button").click(function() {
$(".new-box").animate({
left: '0'
}, "slow");
});
$("#button").click(function() {
var left = $(".new-box").css('left');
if ($(".new-box").hasClass('on-left')) {
$(".new-box").removeClass('on-left').animate({
left: '0'
}, "slow");
} else {
$(".new-box").addClass('on-left').animate({
left: '-820px'
}, "slow");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="float:left;width:1020px;">
<div class="main" style="width:800px;height: 500px;background-color: #f5f5f5;position:relative;">
<button id="slideBtn">Play</button>
<div class="slide-div" style="width:800px;height: 500px;background-color: aqua;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; ">X</button>
<p style="width:100%;">Hello</p>
</div>
</div>
<div class="showdiv" style="width:800px;height: 500px;background-color: red;position:relative;">
<button id="button">shw</button>
<div class="new-box on-left" style="width:800px;height: 500px;background-color: #f98463;position:absolute;left:-820px;"><button class="closedBtn" style="float:right;border:1px solid green;border-radius:50%;padding:10px;position:relative;top:0;right:0; "></div>
</div>
</div>

When you call $("selector").click(.. twice like you have, you're assigning two click handlers - so both run at the same time (both run on a single click).
You need to check the state within the click button, eg:
var isshown = false;
var isshown = true;
$("#btn").click(function() {
if (isshown) {
// do your animates here, simple hide/show as example
$("#content").hide();
} else {
$("#content").show();
}
isshown = !isshown;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'>content</div>
<button id='btn'>click</button>
There are many ways to check this, above is an example.

Offset Div From Grid

Above you will find a sketch of what I am trying to achieve. I am working in a 12 column layout. I want the div .row-2 to max out to 10 columns on the right but go all the way to the edge of .main-container on the left.
Below is what I have to work with but keep getting errors.
$('.main-container').once('.row-2').each(function () {
$(window).on('resize', function () {
$('.row-2').each(function () {
self.align($(this));
});
});
});
$(document).ready(function () {
$('.row-2', context).once('.row-2').each(function () {
self.align($(this));
});
});
align: function ($element) {
$element.css({
marginLeft: ''
});
var maxWidth = $element.width();
$element.css({
marginLeft: 'auto'
});
$('.row-2', $element).each(function () {
$(this).css({
maxWidth: maxWidth,
marginLeft: 'auto'
});
});
var offset = $element.offset();
// Use #focus element as wrapping element
offset.left = offset.left - $('.main-container').offset().left;
$element.css({
marginLeft: (offset.left * -1) + 'px'
});
};
.main-container {
max-width:1680px;
width:100%;
height:1000px;
margin:0 auto;
background-color:#cccccc;
}
.row-1, .row-2, .row-3 {
background-color:#f4f4f4;
width:1000px;
margin:0 auto;
height:100px;
margin-bottom:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="main-container">
<div class="row-1"></div>
<div class="row-2"></div>
<div class="row-3"></div>
</div>

Here, working example please check below link.
I have set .row-2 in same container but take different css for .row-2 and .row-1 & .row-3
and .row-2 take 10 columna same you need please check it
https://jsfiddle.net/DineshV/frp1Luzo/
[Here is image with center same as you said. you know showed center because of you have nor resize window ][Check this img]
https://i.stack.imgur.com/sbhlK.png

How to set icon to flicker when clicked

Functionality:
When User navigates from one page to another via interaction with the button, the side-icon from the first page will flicker/blink for quick succession, before the page transits to the next page. The page transition is animated such that the button will have 'drop' effect while the new page will slide and fade in while the old page will slide and fade out.
What has been done:
I have tried using the following:
var isBlink = false;
var selectEffectInterval;
var selectEffectCounter = 0;
if (isBlink) {
isBlink = false;
if (selectEffectCounter == 5) {
selectEffectCounter = 0;
clearInterval(selectEffectInterval);
}
} else {
$('#NewZealandPinPoint').fadeIn();
$('#NewZealandPinPoint').fadeOut();
isBlink = true;
selectEffectCounter++;
}
Issue:
During page transition, I am not able to see the effect. Hence, I would like to ask how is it possible for me to set the side-icon to flicker/blink when the button is interacted by the user
Code:
var isBlink = false;
var selectEffectInterval;
var selectEffectCounter = 0;
function Australia() {
console.log("Australia");
$('#Australia').toggle("drop", {
duration: slideDuration
}, {
easing: 'easeInOutQuart',
queue: false
});
$('#NewZealandPinPoint').hide();
if (isBlink) {
isBlink = false;
if (selectEffectCounter == 5) {
selectEffectCounter = 0;
clearInterval(selectEffectInterval);
}
} else {
$('#NewZealandPinPoint').fadeIn();
$('#NewZealandPinPoint').fadeOut();
isBlink = true;
selectEffectCounter++;
}
$('#Oceania_Page').fadeOut({
duration: slideDuration,
queue: false
});
$('#Oceania_Page').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
$('#Australia_Page').fadeIn({
duration: slideDuration,
queue: false
});
$('#Australia_Page').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeInOutQuart',
queue: false
});
}
<div id="Oceania_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=5; top:0px; left:1921px; ">
<img src="lib/img/Country/Oceania/Background.png" />
<!--Countries-->
<img id="AustraliaPinPoint" src="lib/img/Country/Oceania/AustraliaPinPoint.png" />
<button id="Australia" onclick="Australia()">
<img src="lib/img/Country/Oceania/Country/Australia.png">
</button>
<button id="PageBack" onclick="PreviousPage()">
<img src="lib/img/VideoBackButton.png">
</button>
</div>
<div id="Australia_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:1921px; ">
<img src="lib/im/FootprintsBackground.png" />
<button id="PageBack" onclick="Page()">
<img src="lib/img/VideoBackButton.png">
</button>
</div>

Here's a working mockup of something that works as I assume you want it - note, this is JUST the button part, and there's a piece of code that uses a setTimeout - as noted in the code, rather than using setTimeout, you would use the [complete] callback that jquery has for animation methods
$(function() {
$(".nav").click(function() {
var $curr = $(".nav.current"); // determine the previously selected button
$curr.addClass('blinky'); // add the blinky class
$curr.removeClass('current'); // remove any class associateed with current from previous selected button
$(this).addClass('current'); // add any class associateed with current selection to the button that was just pressed
function animationDone() {
$curr.removeClass('blinky');
}
// do your animation of page content
setTimeout(animationDone, 2500);
// I use a setTimeout just for the delay - what you would do is use the "complete" callback of the jQuery animation method
});
});
.current {
box-shadow:0 0 5px #00ff00;
}
.blinky {
animation-duration: 100ms;
animation-name: blinker;
animation-direction: alternate;
animation-iteration-count: infinite;
}
#keyframes blinker {
0% {
opacity:1.0;
}
100% {
opacity:0.3;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="nav current">Link 1</button><br />
<button class="nav">Link 2</button><br />
<button class="nav">Link 3</button><br />
<button class="nav">Link 4</button><br />

You put the fadeIn inside a function in the fadeOut (or the other way around). Here's a working version:
var isBlink = false,
blink = function($this){
$this.fadeOut( function(){
$this.fadeIn();
if (isBlink) blink($this);
});
}
$("#AustraliaPinPoint").click( function(){
isBlink = !isBlink;
blink($(this));
});
Here's a jsfiddle:
https://jsfiddle.net/mckinleymedia/bz5nkbyq/

Slide out element to right, then back in from left

Consider the following piece of HTML:
<div id="outer">
<div id="inner">
<p id="content">
Some content
</p>
</div>
</div>
I can make #inner slide out to the right from the screen using the following jQuery:
$("#slide").animate(
{
'marginLeft':'100%'
},400,
function(){
$(this).slideUp('fast');
$(this).css("margin-right","100%");
$(this).css("margin-left","0");
}
);
However, how can I make that same element, with new content (from AJAX response), slide back in from the left?
I was thinking about resetting the margins (from margin-left:100% to margin-left:0; margin-right:100%) while it was out of view and then use an animation to slide it in from the left:
$("#slide").animate(
{
'marginRight':'0'
},400,
function(){
$(this).slideDown('fast');
}
);
This slides it back into view, but not from the left of the screen. Any ideas? I got the .slideUp() from a different StackExchange question but don't know why it's needed for a horizontal slide.

Simply reset the margin using .css() method:
$(function() {
$("#outer").click(function() {
$(this).animate({
'marginLeft': '100%',
'opacity': 0
}, 200, function() {
//==================================
//call synchronous ajax here or move this block
//to the ajax done callback function
//some ajax change
$(this).css({
"background": "blue"
}).text("came back with new content");
$(this).css({
'marginLeft': '-100%'
});
$(this).animate({
'marginLeft': '0',
'opacity': 1
}, 200);
//=================================
});
});
});
#outer {
width: 100px;
height: 100px;
display: block;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<p id="content">Click Me</p>
</div>
</div>

Reset the margin using .css, check it out here: https://jsfiddle.net/gdjypc7w/2/
JS
function getSummary(id) {
$.ajax({
type: "GET",
url: 'Your URL',
data: "id=" + id,
success: function (data) {
// the data
$('#summary').html(data);
}
});
}
$("button").click(function () {
$("#inner").animate({
marginLeft: $("body").width()
}, 1000, function () {
//$("#content").text(getSummary(id); Use your id here to retrieve new data
$("#content").text("New content");
$("#inner").css("margin-left", "-100%");
$("#inner").animate({
marginLeft: "0px"
}, 1000);
});
});