I'm using the code below to scroll through different divs after a timed period. However, the page keeps sliding back to bottom div when manually scrolling back up.
Is there a way to use this code but override the automatic slide back, where I can manually scroll to any div without it jumping back to the bottom before I finish reading what is in that div.
<style id="compiled-css" type="text/css">
#scroller {
overflow-y:scroll;
padding:0;
margin:0
border:1px solid #eee;
width:100%;
height:500px;
}
</style>
<body>
<div id="scroller">
<div style="width:50%;height:50%;background:#ff0000"></div>
<div style="width:50%;height:50%;background:#00ff00"></div>
<div style="width:50%;height:100%;background:#0000ff"></div>
<!--div style="width:50%;height:50%;background:#ff00ff"></div>
<div style="width:50%;height:50%;background:#ffff00"></div-->
</div>
Status: <span id="status">1</span>
<script type="text/javascript">
var scrollingUp = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0) {
$('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 500 }, 'slow');
}
}
</script>
Took me a while for this to figure it out.
Basically, you make it run on a class and set a function with timeout so that after the scrolling animation, function removes that class from a div. That way when it wants to run again it doesn't have anything to run on. And scrolling stops.
Hope this helps.
var scrollingUp = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0) {
$('.scroller').delay(2000).animate({ scrollTop: $(".scroller").scrollTop() + 500 }, 'slow');
}
};
setInterval(function(){ $("#scroller" ).removeClass("scroller"); }, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style id="compiled-css" type="text/css">
#scroller {
overflow-y:scroll;
padding:0;
margin:0
border:1px solid #eee;
width:100%;
height:500px;
}
</style>
<body>
<div id="scroller" class="scroller">
<div style="width:50%;height:50%;background:#ff0000"></div>
<div style="width:50%;height:50%;background:#00ff00"></div>
<div style="width:50%;height:100%;background:#0000ff"></div>
<!--div style="width:50%;height:50%;background:#ff00ff"></div>
<div style="width:50%;height:50%;background:#ffff00"></div-->
</div>
Status: <span id="status">1</span>
Related
When I click a link to an element ID, I want it to animate, like the first ID fade out and the new one that's being scrolled to fades in.
OR
I want to animate scroll to the other one. I've looked around on here and on other sites, including google searches, and I haven't found anything that works with my code. I understand I'll need jquery etc, everything I've tried hasn't worked so I've removed all the JS.
If anyone could help it would be greatly appreciated, thank you!
Also if there's a simpler solution to having the content in the middle with no scroll bar so each section loads faster but stays in the middle I'd love to know. I'm pretty new to all this it's really confusing. And I haven't got much of a clue about JavaScript yet.
Thank you.
CSS:
* {
margin:0;
padding:0;
text-decoration:none;
box-sizing:border-box;
font-family:tahoma;
overflow:hidden;
}
body {
background: url(http://www.visionpharmacy.org.uk/assets/img/main/22.jpg) no-repeat;
height:100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.wrapper {
width:960px;
max-width:100%;
margin:0 auto;
position:relative;
height:100vh;
z-index:1;
}
.wrapper > #welcome, #contact {
background:rgba(250,250,250,0.8);
padding:40px;
margin-top:15vh;
height:80vh;
}
header {
position:fixed;
width:100%;
max-width:100%;
height:10vh;
background:white;
z-index:2;
}
header > h1 {
font-family:sans-serif;
font-size:2em;
padding:0 0 0 20px;
line-height:70px;
font-weight:600;
color:black;
float:left;
}
nav {
float:right;
line-height:10vh;
padding:0 20px 0 0;
}
a[name="backtotop"] {
font-size:1em;
color:black;
}
a[name="backtotop"]:hover {
color:lightseagreen;
transition:0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
HTML:
<!doctype <!DOCTYPE html>
<html lang="en">
<head>
<title>Company Name</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/scroll.js"></script>
<meta charset="UTF-8">
<meta name="language" content="English">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Company Name</h1>
<nav>
Home - Contact
</nav>
</header>
<main>
<div id="first" class="wrapper">
<div id="welcome">
testing 1, 2
<a name="backtotop" href="#">Back to top</a>
</div>
</div>
<div class="wrapper">
<div id="contact">
More testing?
<a name="backtotop" href="#">Back to top</a>
</div>
</div>
</main>
</body>
</html>
JS Fiddle:
https://jsfiddle.net/5nwudmhc/
try this:
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Then you should add the #contact (or any #IDhere for that matter) to the link you want the user to click.
And add id="contact" (or any id="IDhere" for that matter) to the element you want to scroll to.
EDIT:
okay, so the not scrolling part is due to the fact that the overflow is hidden (overflow: hidden;), when you remove that, it'll work, but the background will also move up, so in the body element in the CSS you need to add background-attachment: fixed; to the body element aswell, now the problem is that the content at the top of the page is not readable because of the navbar, the content is still there. But I guess you can fix that yourself. I'll provide a final snippet: https://jsfiddle.net/64vmo586/
i think something like this would work to animate the scrolling:
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
var scrollhere = target.offset().top;
$('html, body').animate({
scrollTop: scrollhere
}, 1000);
}
});
Then you need to have the same href as the div ID where you want it to scroll, for instance:
Contact
will scroll to
<div id="contact">
If you want to change the speed of the animation, you can change that number just and the end of the function. in the example i have set to 1000ms ( equals to 1s)
I'm trying to make horizontal scrolling effect using two buttons, left and right. But I can't sort it out. I managed to scroll to next element but then scrolling stops and I can't scroll to another element.
$(document).ready(function(){
$("#left").click(function(){
$(".wrap").animate({scrollLeft: 0}, 1000);
return false;
});
var item_width = $('.label').outerWidth();
$("#right").click(function(){
$(".wrap").animate({scrollLeft: item_width}, 1000);
return false;
});
});
You need to keep track of your current index. You have shifted right once (the width of item_width), but the second time you need to animate scrollLeft: item_width*2, the third item_width*3, etc.
set a variable in your document ready that starts at 0, and its incremented or decremented when you click on either right or left, and then change 0 and item_width to item_width * index
Uhm i'm not sure you can use "{scrollLeft: item_width}" for element different to body o window... but if you can do this change part your script:
{scrollLeft: item_width}
to
{scrollLeft: "+="+item_width}
JS:
$(document).ready(function(){
var item_width = $('.label').css("width");
$("#left").on("click",function(){
if(parseInt($(".wrap").css("margin-left")) == 0) return;
$(".wrap").animate({marginLeft: "+="+item_width}, 1000);
return false;
});
$("#right").on("click",function(){
$(".wrap").animate({marginLeft: "-="+item_width}, 1000);
return false;
});
});
For example you can use this
html:
<div id="right">></div>
<div id="left"><</div>
<div class="wrap">
<div class="label"></div>
<div class="label"></div>
<div class="label"></div>
</div>
css:
body{
margin:0;
padding:0;
}
.wrap{
overflow:hidden;
float:left;
width:903px;
height:200px;
position:relative;
}
.label{
display:block;
float:left;
width:300px;
background-color:red;
border-left:solid 1px black;
position:relative;
height:200px;
}
#right,#left{
position:absolute;
background-color:purple;
color:white;
top:100px;
width:20px;
height:20px;
margin-top:-10px;
text-align:center;
line-height:20px;
display:block;
z-index:2;
cursor:pointer
}
#right{
right:0;
}
see the example here:
http://jsfiddle.net/u3hB8/4/
Ok so I wanted to practice some jQuery and to do it I thought I would make the animation that Jay-Z uses on his new album commercials, he has a bar over his name and it slides left while also disappearing. On top of that I wanted the text to fadeOut, fadeIn, and then fadeOut again to give it a flashing effect before it disappeared. Can someone help me with this :l, I got the layout done but the jQuery just wont work..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magna Carta</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bar').delay(800).css('padding-left', 0+'px');
$('#main p').fadeOut('slow' function(){
$('#main p').fadeIn('slow' function(){
$('#main p').fadeOut('slow');
});
});
});
</script>
<style type="text/css">
body {
background-color:#f2f2f2;
margin:0px;
padding:0px;
}
#main {
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -150px;
text-align:center;
}
#main p {
font-family:Admisi Display SSi;
font-size:64px;
}
#bar {
padding-left:180px;
height:25px;
background-color:black;
position:absolute;
z-index:2;
margin-top:87px;
margin-left:61px;
}
</style>
</head>
<body>
<div id="main">
<center>
<div id="bar"></div>
</center>
<p>JAY-Z</p>
</div>
</body>
</html>
You need to use the animate function here (before you were just setting the padding-left to 0, which happens immediately) and you have to fix your fadeOut and fadeIn callback functions:
$(document).ready(function () {
$('#bar').delay(800).animate({
'padding-left':0
}, 1000, function () {
// Animation complete.
$('#bar').delay(800).css('padding-left', 0 + 'px');
$('#main p').fadeOut('slow', function () {
$('#main p').fadeIn('slow', function () {
$('#main p').fadeOut('slow');
});
});
});
});
Demo: http://jsfiddle.net/BjBry/1/
I saw a fiddle. When cursor is hovering over it, it animates from bottom to top.
How could I change it, so that on click, it would animate from right to left, and after that, the content would be hidden? When the content is hidden, there would be a button, where I could click to have the content show up again.
HTML
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<p>Hover over red div please!!</p>
</body>
</html>
CSS
.wrapper{
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
margin-top:200px;
color:white;
}
jquery
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){ $(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});
and here is the fiddle http://jsfiddle.net/qGVfp/
There's 2 changes you need to make. First adjust the stylesheet so the moving div is off to the left instead of the bottom:
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
left:-200px;
color:white;
}
And then change the javascript to react to clicks, be based on width and modify the left property. Note, there is a toggle method that behaves a lot like hover, but it's getting removed from jQuery, so you have to have a boolean that tracks state.
$(document).ready(function(){
var width = $(".inner").width();
var toggle = true;
$(".wrapper").click(function(){
if(toggle) {
$(".inner").stop().animate({left:0},1000);
} else {
$(".inner").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
Here's an updated fiddle: http://jsfiddle.net/qGVfp/30/
.wrapper2{
background-color:blue;
width:400px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner2{
width:200px;
height:200px;
position:absolute;
background-color:black;
margin-left:400px;
color:white;
}
$(".wrapper2").hover(function(){
$(".inner2").stop().animate({marginLeft:200},1000);
//alert(innerHeigth)
},function(){
$(".inner2").stop().animate({marginLeft:400},1000);
});
});
http://jsfiddle.net/bighostkim/vJrJh/
You are basically there just need to change a few things around.
HTML
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<button id="btn">click</button>
</body>
</html>
CSS
.wrapper {
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner {
width:200px;
height:100px;
position:absolute;
background-color:black;
left:200px;
color:white;
}
SCRIPT
var hidden = true;
$(document).ready(function(){
$("#btn").click(function() {
if(hidden) {
$(".inner").stop().animate({left:0}, 1000);
hidden = false;
}
else {
$(".inner").stop().animate({left:200},1000);
hidden = true;
}
});
});
Here is a fiddle to show this: http://jsfiddle.net/qGVfp/31/
I have two DIV
one on the right the the other on the left side
I'm looking for a code that give me link and by clicking on this link both divs will expand to 100% (mean that one of them will slide down) and by click again they will return back to be side by side
I tried this:
<style>
#container {
width:100%;
height:500px;
}
#left {
width:45%;
height:500px;
float: left;
}
#right {
width:45%;
height:500px;
float: left;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<div id="container">
<div id="left">
LEFT
</div>
<div id="right">
RIGHT
</div>
</div>
<script>
$('#container').click(function(){
if (parseInt($('div#right').css('right'),10) < 0) {
// Bring right-column back onto display
$('div#right').animate({
right:'0%'
}, 1000);
$('div#left').animate({
width:'45%'
}, 600);
} else {
// Animate column off display.
$('div#right').animate({
right:'-45%'
}, 600);
$('div#left').animate({
width:'100%'
}, 1000);
}
});
</script>
You can use jQuery toggle, for your puspose.
Have a look at this Example