I'm trying to simulate scroll using jquery and I technically can, It just feels really rough and awkward.
JS:
$(document).ready(function(){
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta / 120 > 0) {
movePage();
}
});
var page1top = 0;
function movePage() {
page1top = page1top - 1;
// page1 is the page that i want to move up when people scroll down.
$('#page1').css('top': page1top + '%');
}
});
HTML:
<div id='container'>
<div id='page1'></div>
</div>
CSS:
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
z-index: -100;
}
#page1 {
width: 100%;
height: 500%;
z-index: 0;
}
I'm just wondering how I would make this smooth. No plugins please, thanks.
You're looking for jquery animate. Check fiddle for demonstration.
$('.to-target').click(function(){
$('html, body').animate({
scrollTop: $("#target").offset().top
});
});
.box {
width: 100vw;
height: 100vh;
}
.long {
background-color: aqua;
}
.short {
background-color: beige;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
<div class="long box">
<button class="to-target">Go to Target</button>
</div>
<div id="target" class="short box">
</div>
</div>
Replace .css() with .animate() and scroll to the selector you want smoothly:
$target = $('#someEl');
$('html, body').animate({
scrollTop: $target.offset().top
}, 200);
Related
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>
So basically I'd like to remove the class from header after the user scrolls down a little and add another class to it. Trying to figure out the simplest way of doing this but I can't make it work here is the code
$(function() {
var $sectionBox = $(".J_section-box"),
$navbarBox = $(".J_nav-bar-con"),
navHeight = $(".J_nav-bar-con").height();
$(window).on("scroll", function() {
$(window).scrollTop() >= $sectionBox.offset().top - navHeight ? $navbarBox.addClass("J_fixNavbar") : $navbarBox.removeClass("J_fixNavbar")
});
});
For simplicity, I would suggest to use toggleClass, what makes it a bit easier and better to maintain.
$(function() {
var $navbarBox = $(".J_nav-bar-con");
var navHeight = $(".J_nav-bar-con").height();
$(window).on("scroll", function() {
$navbarBox.toggleClass("J_fixNavbar", $(this).scrollTop() >= $(".J_section-box").offset().top - navHeight);
});
});
.content {
width: 100%;
height: 10000px;
}
.J_nav-bar-con {
width: 100%;
height: 100px;
background: gray;
position: fixed;
top: 0;
}
.J_section-box {
width: 100%;
height: 100px;
margin-top: 200px;
}
.J_fixNavbar {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="J_nav-bar-con"></div>
<div class="J_section-box"></div>
<div class="content"></div>
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.
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
/* overflow: hidden;*/
}
.inline-wrapper{
width: 400%;
height: 100%;
font-size: 0;
position: relative;
}
.inline-blocks{
display: inline-block;
width: 25%;
height: 100%;
vertical-align: top;
position: relative;
}
>.inline-blocks:nth-child(1){
background-color: #000;
}
.inline-blocks:nth-child(2){
background-color: blue;
}
.inline-blocks:nth-child(3){
background-color: red;
}
.inline-blocks:nth-child(4){
background-color: green;
}
How can I slide them without ID?
In fact this is the work of the slider. But I can not understand the logic.
Want to understand how flipping without ID.
We must check the blocks and give them Ńurrent class.
Auto Slide
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
jQuery:
(function () {
var numDivs = $('.inline-wrapper').children().length; //Count children ELements
var counter = 1;
function slide(time, counter) {
var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element
var position = $currentDiv.position(); //get position of next element
if (numDivs > 1) {
$('html,body').animate({
scrollLeft: position.left
}, time / 2); //Animate to next element
}
};
$('.inline-blocks').on('click', function () {
counter = counter + 1;
slide(2000, counter);
});
})();
DEMO
I want to create scroll to section like nexus5 website https://www.google.com/nexus/5/
i.e. one button doing all. Click on one button it takes you down to different sections and when it reaches last ID it scrolls all the way up back.
JS
if(window.location.hash !=""){
var scrollIdPrev = "#"+$(""+ window.location.hash +"").prev(".slide").attr("id")+"";
var scrollIdNext = "#"+$(""+ window.location.hash +"").next(".slide").attr("id")+"";
$('html, body').animate({
scrollTop: $(""+window.location.hash+"").offset().top
}, 2000,function(){
window.location.href=scrollId;
$(".previous").attr("data-target",scrollIdPrev);
$(".next").attr("data-target",scrollIdNext);
});
}
$('.next').click(function(){
var scrollId = "#"+$(""+ $(this).attr("data-target") +"").next(".slide").attr("id")+"";
$('html, body').animate({
scrollTop: $(""+scrollId+"").offset().top
}, 2000,function(){
window.location.href=scrollId;
$(".previous").attr("data-target",scrollId);
$(".next").attr("data-target",window.location.hash);
});
});
$('.previous').click(function(){
var scrollId = "#"+$(""+ $(this).attr("data-target") +"").prev(".slide").attr("id")+"";
$('html, body').animate({
scrollTop: $(""+scrollId+"").offset().top
}, 2000,function(){
window.location.href=scrollId;
$(".next").attr("data-target",scrollId);
$(".previous").attr("data-target",window.location.hash);
});
});
HTML
<div class="move">
<div class="previous" data-target="#one">UP</div>
<div class="next" data-target="#one">DOWN</div>
</div>
<section class="slide" id="one">First</section>
<section class="slide" id="two">Second</section>
<section class="slide" id="three">Third</section>
<section class="slide" id="four">Fourth</section>
CSS
section{
height: 400px;
border: 1px solid black;
}
.move{
position: fixed;
bottom: 0;
right: 0;
}
.previous, .next
{
background: red;
height: 20px;
width: 70px;
margin-bottom: 5px;
cursor: pointer;
}
Fiddle
I have achieved some functionality but not all.
Just use the scrollIntoView() function everytime you want to scroll to the next element.
Just have an array of elements you want to go to and just save the pointer in a global variable.
window.scroll=0;
window.navigationpoints=['id1','id2','id3'];
$('.next').click(function(){
if(window.scroll<window.navigationpoints.length){
document.getElementById(window.navigationpoints[window.scroll]).scrollIntoView();
window.scroll++;
}else {
document.getElementById(window.navigationpoints[0]).scrollIntoView();
window.scroll=1;
}
});