Develop Reference

How to automatically scroll(horizontally) with pause on each div?

setInterval(function scroll() {
$(".box_auto").each(function(i, e) {
$("html, body").animate({
scrollTop: $(e).offset().top
}, 500).delay(500);
});
setTimeout(function() {
$('html, body').animate({
scrollTop: 0
}, 5000);
}, 4000);
return scroll;
}(), 9000);
.auto_scroll_top {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-top: 1.2rem;
}
.auto_scroll_top .box_auto {
display: inline-block;
min-width: 400px;
height: 200px;
background-color: orange;
border-radius: 10px;
margin: 0 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="auto_scroll_top">
<div class="box_auto"></div>
<div class="box_auto"></div>
<div class="box_auto"></div>
<div class="box_auto"></div>
</div>
I am trying to make a website clone and one of the things I have to do is the following.
I have many divs(boxes) in a horizontal position which you can scroll.I want it to scroll automatically on each div(to jump from one div to the next, and at the end to repeat itself)
So it should be something like div1 pause.. div2 pause.. etc.
Any ideas how to do it?

Here's an example which is fully commented. I added some numbers to your div so you can see whats going on. I found a nice answer here https://stackoverflow.com/a/45388452/5604852 which I then adapted using setInterval() to work through the collection (https://javascript.info/settimeout-setinterval#setinterval).
The code is fully commented so should be explanatory.
// Starting index
let auto_index = 0;
// Total number of divs
let total = document.getElementsByClassName('box_auto').length;
// Set interval
let timerId = setInterval( function() {
// Increase index
auto_index = auto_index + 1
// Check if index is above total
if (auto_index > total - 1 ) {
// Reset if it is
auto_index = 0;
}
scrollTo(auto_index);
}, 2000); // 2000 = 2 seconds
// Adapted from this answer:
// https://stackoverflow.com/a/45388452/5604852
// Using .scrollIntoView
// Adding smooth and center for design reasons
function scrollTo(item) {
document.getElementsByClassName('box_auto')[item].scrollIntoView({ behavior: 'smooth', block: 'center' });
};
.auto_scroll_top{
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
margin-top: 1.2rem;
}
.box_auto{
display:inline-block;
min-width:300px;
height:200px;
background-color: orange;
border-radius: 10px;
margin:0 5px;
}
.box_auto {
font-size: 150px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="auto_scroll_top">
<div class="box_auto">1</div>
<div class="box_auto">2</div>
<div class="box_auto">3</div>
<div class="box_auto">4</div>
</div>

Jquery scrolltop with prev next not scrolling properly

I'm trying to setup jquery scrolltop with previous and next button, so that the user can scroll within a scrollable div.
I came across this post LINK and was trying to setup for my application, but it doesn't seems to scroll to the top of the next/previous div.
Could anyone point out where the problem is and perhaps a solution to it? Any input would be appreciated, thanks.
CSS:
.image_holder {
display: block;
height: 100%;
}
.section{
position: relative;
height: 80vh;
background: rgba(255, 226, 57, 0.0);
overflow-y: scroll;
margin: 0 auto;
border: #000000 solid thin;
}
HTML:
<div class="page_scroller">
<ul >
<li class="list-unstyled col-lg-6 bg-primary">Up</li>
<li class="list-unstyled col-lg-6 bg-primary">Down</li>
</ul>
</div>
<div class="section" >
<div id="highlight-1" class="current image_holder">A</div>
<div id="highlight-2" class="image_holder ">B</div>
<div id="highlight-3" class="image_holder ">C</div>
<div id="highlight-4" class="image_holder ">D</div>
</div>
Jquery:
var scrollTo = function(element) {
console.log(element);
$('.section').animate({
scrollTop: element.offset().top
}, 500);
}
$('.next').click(function(event) {
event.preventDefault();
var $current = $('.section > .image_holder.current');
var $next = $current.next().first();
if ($next.length!=0) {
$current.removeClass('current')
$next.addClass('current');
scrollTo($next);
}
});
$('.prev').click(function(event) {
event.preventDefault();
var $current = $('.section > .image_holder.current');
var $prev = $current.prev().first();
if ($prev.length!=0) {
$current.removeClass('current')
$prev.addClass('current');
scrollTo($prev);
}
});
My JSFiddle

I think it's actually working as intended: it scrolls to the section, but it scrolls based on the top edge of the viewport, not based on the overflowed div.
Try replacing
$('.section').animate({
scrollTop: element.offset().top
}, 500);
with
$('.section').animate({
scrollTop: element.position().top
}, 500);

get offset then make position absolute

Hello People what I need is get offset for any section then make position of all sections is absolute:
the problem that all sections return with 0px of offset
$(document).ready(function () {
$('section').each(function (index, element) {
var $this = $(this);
$this.css('top', $this.offset().top + 'px');
$this.css('position', 'absolute');
});
})
section {
width: 100%;
height: 400px;
background-color:#ff5b74;
}
.section-2{
height:500px;
background-color:#00ff6b;
}
.section-3{
background-color:#5066e9;
}
.section-4{
background-color:#ff6a00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>

The problem is that for each section you set the position absolute which makes it out of the flow before you change the remaining sections. so the remaining sections will ignore the space taken by this section and fill it.
That's why they all take the same top position
You need to set the absolute position after you complete setting the top position for all sections, meaning outside the loop function.
$(document).ready(function() {
$('section').each(function(index, element) {
var $this = $(this);
$this.css('top', $this.offset().top + 'px');
});
$('section').css('position', 'absolute');
})
section {
width: 100%;
height: 400px;
background-color: #ff5b74;
}
.section-2 {
height: 500px;
background-color: #00ff6b;
}
.section-3 {
background-color: #5066e9;
}
.section-4 {
background-color: #ff6a00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>

The problem you are facing is as soon as you are in the each loop and set the first element to position: absolute; it will lose it's height cause it is position: absolute; Or that's what position: absolute; does. It takes element out of the flow.
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. Information from here here
Sooo to accomplish you need to set the height by the height and the position of the previous element.
$(this).prev().offset().top + $(this).prev().outerHeight()
I left the console.log() there if you are interested to see the different values.
$(document).ready(function () {
$('section').each(function (index, element) {
// console.log(
// $(this).offset().top,
// $(this).outerHeight(),
// ($(this).offset().top + $(this).outerHeight()),
// ($(this).prev().offset().top + $(this).prev().outerHeight())
// );
$(this).css('top', $(this).prev().offset().top + $(this).prev().outerHeight() + 'px');
$(this).css('position', 'absolute');
});
})
section {
width: 100%;
height: 400px;
background-color:#ff5b74;
}
.section-2{
height:500px;
background-color:#00ff6b;
}
.section-3{
background-color:#5066e9;
}
.section-4{
background-color:#ff6a00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>

<style>
section {
width: 100%;
height: 400px;
background-color:#ff5b74;
}
.section-2{
height:500px;
background-color:#00ff6b;
}
.section-3{
background-color:#5066e9;
}
.section-4{
background-color:#ff6a00;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
<section class="section-4"></section>
<script>
$(document).ready(function () {
$('section').each(function (index, element) {
var $this = $(this);
if (index != 0) {
$this.css('top', (Number($this.offset().top)+Number($('.section-'+(Number(index)+1)).height())) + 'px');
}
$this.css('position', 'absolute');
});
})
</script>

Img resize on scroll

How can i resize a logo( es width: 100px ) in a header on mouse scrolling?
$('.logo').scroll(function() {
$(this).width(100);
$(this).off(); //removes the handler so that it only resizes once...
})
.header {
background-color: black;
}
.logo {
height:100px;
width: 100%;
background-image: url("http://unika.myarmah.it/skin/frontend/sns_simo/default/images/logo.png");
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo"></div>
</div>

Just use javascript:
Why? - Because its just as short as using jQuery.
Update #1 -
after seeing the comments to the previous answer from the author, I have adjusted my example to include animation and reset when at the top of the page. Again - just use javascript, and for better performance benefits use CSS classes so that all paints are done in one cycle.
Update #1 jsfiddle - https://jsfiddle.net/113dn29z/16/
var logo = document.querySelector('.logo');
var handleResize = function(e) {
if (document.body.scrollTop === 0) {
logo.classList.remove("resize");
} else {
logo.classList.add("resize");
}
};
document.addEventListener('scroll', handleResize);
<div class="header">
<div class="logo">
</div>
</div>
body {
height: 9999px;
overflow: auto;
}
.header {
background-color: black;
}
.logo {
margin-top: 200px;
height:100px;
width: 100%;
background-color: red;
background-repeat: no-repeat;
transition: width 0.2s ease;
}
.logo.resize {
width: 100px;
}
old jsFiddle example - https://jsfiddle.net/113dn29z/10/

var logoHasResized = false;
$(document).on('scroll', function (e) {
if (window.scrollY == 0) {
$('.logo').animate({'width': '100%'}, 250);
logoHasResized = false;
} else if (logoHasResized == false) {
$('.logo').animate({'width': 100}, 250);
logoHasResized = true;
}
});
edit: Since you want it to go back when you scroll to the top of the page, i've added in a check to see if the animation has happened, as you don't want it to fire constantly.

Display div when certain sections are in view with jquery / javascript and scrollify

I have a website page with four sections which are 100% width and height, and I'm using scrollify so the browser window always snaps to a section.
I have a fixed header that I want to display only while either of the middle two sections (#b and #c) are in view.
I'd like for this header to fade in and fade out. It should be gone by the time section #a or #d is snapped to.
I'm a novice at writing Javascript, so a fully functional solution which works with my code snippet would be much appreciated.
$(function() {
$.scrollify({
section: "section",
easing: "swing",
scrollSpeed: 500,
offset: 0,
scrollbars: true,
before: function() {},
after: function() {},
afterResize: function() {}
});
});
body {
width: 100%;
margin: 0;
}
#header {
background: rgba(0, 0, 0, 0.8);
z-index: 1;
width: 100%;
height: 50px;
position: fixed;
top: 0;
left: 0;
}
section {
width: 100%;
height: 100vh;
}
#a {
background: #aaa;
}
#b {
background: #bbb;
}
#c {
background: #ccc;
}
#d {
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/0.1.11/jquery.scrollify.min.js">
</script>
<div id="header">
</div>
<section id="a">
</section>
<section id="b">
</section>
<section id="c">
</section>
<section id="d">
</section>

You can use before event of scrollify. In this event you should get a current slide with the method $.scrollify.current(); You can find all available methods here! And depending on your slide you can hide or show your header.
Simply use if (){} else {} construction.
Example:
if (currentSlide != 1 || currentSlide != 3) {
header.show();
} else {
header.hide();
}
or just add some class to header
if (currentSlide != 1 || currentSlide != 3) {
header.addClass('is-shown');
} else {
header.removeClass('is-shown');
}
https://jsfiddle.net/2Lo92L6s/

You can solve it by jquery.you have to capture section load event and check the section id.if its is #a or #d you have to use:
if(id == "a" or id == "b")
{
$("#header").hide();
}
else{
$("#header").show();
}