We Keep Coding

How to make this button scroll through multiple divs?

For example im trying to make a scroll button that would scroll down multiple divs.
This is some example code of what i mean.
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
I know how to make the button scroll too just one div but i cant figure out how to make the button first scroll to 1 then 2 then 3 and etc.
Here is the code for the button
<section id="scrolldownButton" class="button">
<span></span>Scroll
</section>
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
Try it:
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500, 'linear');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<section id="scrolldownButton" class="button">
<span></span>Scroll
</section>

To achieve this you can set a class on the current active element, then use next() to find the element to scroll to the next time the button is clicked. Once you reach the end of the elements you want to scroll through you can go back to the start. Note that I added a common content class to the div elements to make this more reliable. Try this:
$(function() {
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
var $target = $('.content.active').next('.content');
if ($target.length == 0)
$target = $('.content:first');
$('.active').removeClass('active');
$target.addClass('active');
$('html, body').animate({
scrollTop: $target.offset().top
}, 500, 'linear');
});
});
.content {
height: 250px;
}
#scrolldownButton {
position: fixed;
top: 20px;
right: 50px;
}
.active {
background-color: #EEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="content active">1</div>
<div id="2" class="content">2</div>
<div id="3" class="content">3</div>
<div id="4" class="content">4</div>
<div id="5" class="content">5</div>
<section id="scrolldownButton" class="button">
Scroll
</section>

How to make an element scroll between two points [duplicate]

This question already has answers here:
Stop div scrolling once it reaches another div
(2 answers)
Closed 5 years ago.
I need to heading to scroll with the user, however only between two points. So scroll from its starting position with the user, to a certain position (above the contact us container) and then back with the user up.
Here is the current code used, this allows the heading to scroll until a certain point as required however does not scroll back up when the user scrolls up.
HTML:
<div id="header" class="row">
<div class="col-sm-5">
<h1 id="scrollwith">Our Services.</h1>
</div>
<div class="col-sm-6 col-sm-offset-1">
<img src="images/backdroppattern.png" style="width: 100%; height: 3000px;">
</div>
</div>
</div>
<div id="contact-container">
<div class="row">
<div class="col-sm-12">
<a class="contact-link" href="#"><h2>Contact us ➔</h2></a>
</div>
</div>
</div>
JS:
$(document).ready(function(){
var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed'
});
}
});
};
$('#scrollwith').followTo(2700);
});

All credits to this answer goes to #MicronXD from the post here.
jQuery.fn.extend({
followTo: function(elem, marginTop) {
var $this = $(this);
var $initialOffset = $this.offset().top;
setPosition = function() {
if ($(window).scrollTop() > $initialOffset) {
if (elem.offset().top > ($(window).scrollTop() + $this.outerHeight() + marginTop)) {
$this.css({
position: 'fixed',
top: marginTop
});
}
if (elem.offset().top <= ($(window).scrollTop() + $this.outerHeight() + marginTop)) {
$this.css({
position: 'absolute',
top: elem.offset().top - $this.outerHeight()
});
}
}
if ($(window).scrollTop() <= $initialOffset) {
$this.css({
position: 'relative',
top: 0
});
}
}
$(window).resize(function() {
setPosition();
});
$(window).scroll(function() {
setPosition();
});
}
});
$('#scrollwith').followTo($('#contact-container'), 0);
#contact-container {
background: red;
height: 900px;
}
#scrollwith {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="row">
<div class="col-sm-5">
<h1 id="scrollwith">Our Services.</h1>
</div>
<div class="col-sm-6 col-sm-offset-1">
<img src="images/backdroppattern.png" style="width: 100%; height: 3000px;">
</div>
</div>
<div id="contact-container">
<div class="row">
<div class="col-sm-12">
<a class="contact-link" href="#">
<h2>Contact us ➔</h2>
</a>
</div>
</div>
</div>

Jquery 'mouseenter' doing nothing

This is the jquery
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
layer.on('mouseenter', function() {
$(this).animate({'transform' : 'scale(0.8)'}, 'slow');
});
layer.on('mouseleave', function() {
$(this).animate({'transform' : 'scale(1)' }, 1000);
});
});
This is the html
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<%= image_tag "233HHH.jpg", class: 'img-profile' %>
</div>
</div>
</div>
It's in rails hence the image_tag.. but I don't understand why nothing is happening when mouse hovers over.

transform is not a property that can be animated using jQuery.
You can use transition to set the animation properties like
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
layer.on('mouseenter', function() {
$(this).css({
'transform': 'scale(0.8)'
});
});
layer.on('mouseleave', function() {
$(this).css({
'transform': 'scale(1)'
});
});
});
.project-layer1 {
transition: all ease 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<img src="//placehold.it/64" />
</div>
</div>
</div>
There is no need to use scripting for this effect, you can just use the :hover css rule
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
});
.project-layer1 {
transition: all ease 1s;
}
.project-layer1:hover {
transform: scale(0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<img src="//placehold.it/64" />
</div>
</div>
</div>

Jquery Animate six image horizontally in line path

i have created image animation with 3 image in which , initially only 1 image displayed then after animation of 1st image complete then same with second at a time only two image i have to display and if 3rd image come then i have to hide first image , i want this type of animation for all 6 images but i am stuck after 4th image , help me to resolve this or suggest me any other js that can make my work done.many thanks.
here is my fiddle : js fiddle
Following is code :
HTML
<div style="float:left;position: relative;left: 300px" id="b">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_chart_track_number_one-128.png" class="image1">
</div>
<div style="float:left;position: relative;display: none;" id="b1">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/track_number_two_circle-128.png" class="image2">
</div>
<div style="float:left;position: relative;display: none;" id="b2">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/three_top_chart_track-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b3">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_number_four_track_chart_circle-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b4">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_five_chart_track_list-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b5">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/number_six_circle_chart_list_track-128.png" class="image3">
</div>
JS
$(document).ready(function() {
$("#b").animate({left: "-=300"},2000);
$("#b").animate({left: "+=80"}, 1000);
var counter = 1;
setInterval(function()
{
++counter;
console.log(counter);
if(counter=='2')
{
}
else if(counter=='7')
{
$("#b").animate({left: "-=80"},1000);
}
else if(counter=='4')
{
$("#b1").fadeIn('slow');
$("#b1").animate({left: "+=300"},2000);
$("#b1").animate({left: "-=280"}, 1000);
}
else if(counter=='8')
{
console.log('enter');
$("#b2").fadeIn('slow');
$("#b2").animate({left: "+=300"},2000);
$("#b2").animate({left: "-=500"}, 1000);
}
else if(counter=='11')
{
console.log('enter');
$("#b").animate({left: "-=300"}, 1000);
$("#b1").animate({left: "-=260"}, 1000);
$("#b2").animate({left: "-=0"}, 1000);
//$("#b").hide('1000');
}
}, 1000); });

Seems like a pain to add all that animation code for each element, especially if you decide to add more in the future. How about having a recursive function like this:
$(document).ready(function () {
var $first = $('.number').first();
slider($first, true);
function slider($first, firstPass) {
var $second = $first.next();
var $third = $second.next();
if (firstPass) {
$first.fadeIn('slow');
$first.animate({ left: "0" }, 2000, function () {
$first.animate({ left: "80px" }, 1000, function () {
loop();
});
});
} else {
loop();
}
function loop() {
$second.css('left', '120px').fadeIn('slow');
$second.animate({ left: "400px" }, 2000, function () {
$first.delay(500).animate({ left: "0" }, 1000);
$second.animate({ left: "150px" }, 1000, function () {
// If there is no third element, we can stop here.
if ($third.length > 0) {
$third.css('left', '250px').fadeIn('slow');
$first.delay(2500).animate({ left: "-600px" }, 1000, function () {
$first.fadeOut();
});
$second.delay(3000).animate({ left: "-300px" }, 1000, function () {
$second.fadeOut();
});
$third.animate({ left: "550px" }, 2000, function () {
$third.animate({ left: "80px" }, 1000, function () {
// Start again and set the third element as the new first.
slider($third, false);
});
});
}
});
});
}
}
});
.number {
position: absolute;
display: none;
}
#b {
left: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="number" id="b">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_chart_track_number_one-128.png" class="image1">
</div>
<div class="number" id="b1">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/track_number_two_circle-128.png" class="image2">
</div>
<div class="number" id="b2">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/three_top_chart_track-128.png" class="image3">
</div>
<div class="number" id="b3">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_number_four_track_chart_circle-128.png" class="image3">
</div>
<div class="number" id="b4">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_five_chart_track_list-128.png" class="image3">
</div>
<div class="number" id="b5">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/number_six_circle_chart_list_track-128.png" class="image3">
</div>

I see that the code only handles first three circles (seconds 1-11).
Further animation is provided by adding cases for later seconds.
Here is the fiddle that adds one case to show you that circle "4" is indeed displayed. But I believe it is upto you to make the final solution of it.
relevant code section is:
else if (counter == '14') {
console.log('enter 14');
$("#b3").fadeIn('slow');
$("#b").animate({
left: "0"
}, 1000);
$("#b1").animate({
left: "30"
}, 1000);
$("#b2").animate({
left: "60"
}, 1000);
$("#b3").animate({
left: "200"
}, 1000);
//$("#b").hide('1000');
}

animation is not working as expected

I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is
when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.
on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %
I am trying this code .
my html is
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
my js is
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>

This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/
JS
var action = 1;
$("#show-tag").click(function () {
if ( action == 1 ) {
$("#tag-div" ).animate({'width':'0%',});
$('#tags-left').animate({'width':'90%'});
action = 2;
} else {
$("#tag-div" ).animate({'width':'45%',});
$('#tags-left').animate({'width':'45%'});
action = 1;
}
});
CSS
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
overflow:hidden; /* This property is added just to hide overflowing content */
}

first of all .. put left and right div in same div and in css
CSS
.col-md-12 {
white-space: nowrap;
overflow: hidden;
height:200px;
}
and you can use animate() method in js
JS
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//$('#tags-left').css('width','0%');
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').animate({'width':'45%'},500);
} else {
$('#tags-left').animate({'width':'100%'},500);
}
});
});
DEMO HERE
you can just play around that to get the exact action you need

Optimized #Nilesh Mahajan's answer.
Found a problem with it when clicking on the button continuously.
// Caching
var $tagsLeft = $('#tags-left'),
$tagDiv = $('#tag-div');
var tagLeftWidth,
tagDivWidth;
$("#show-tag").on('click', function () {
var $this = $(this);
$this.prop('disabled', true).addClass('disabled'); // Disable the button
tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
tagDivWidth = $tagDiv.width() ? '0%' : '45%';
$tagDiv.animate({
'width': tagDivWidth
}, function() {
$this.prop('disabled', false).removeClass('disabled'); // Enabling button
});
$tagsLeft.animate({
'width': tagLeftWidth
});
});
Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/

Try this html:
<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>
and this javascript:
$("#show-tag").click(function (e) {
if($("#tag-right").width() == 0) {
$("#tag-left").animate({
width: '0'
});
$("#tag-right").animate({
width: '90%'
});
} else {
$("#tag-left").animate({
width: '90%'
});
$("#tag-right").animate({
width: '0'
});
}
});
jsfiddle