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>
Related
here are my codes for decreasing the width of an selected element(class = "life_bar"), but as my attached pictures show, I want it to decrease its width from left or right( let's do left as example), but it always goes from both side, what should I do?
here are jQuery codes
$(function () {
var timmer;
gocount();
function gocount(){
timmer = setInterval(function () {
var life_bar_width = $(".life_bar").width();
life_bar_width -= 100;
$(".life_bar").css( {width: life_bar_width,
left: '-50px'})
},1000);
}
});
here are css codes
.life_bar{
width: 500px;
height: 10px;
background: crimson;
margin: 100px auto;
}
here are html codes
<body>
<div class="life_bar"></div>
</body>
using translate negative on X every interval tick:
$(function () {
var timmer;
gocount();
let counter = 1
function gocount(){
timmer = setInterval(function () {
var life_bar_width = $(".life_bar").width();
life_bar_width -= 100;
$(".life_bar").css({
width: life_bar_width,
left: '-50px',
transform: `translate(${-50*counter}px)`
})
counter++
},1000);
}
});
.life_bar{
width: 500px;
height: 10px;
background: crimson;
margin: 100px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="life_bar"></div>
I want a panel to show up for five seconds after a button is clicked....
Then if the user click on the panel (uses it...) the panel continues showing up,otherwise it hides for inactivation.
So the panel can increase its lifespan if the user uses it (click or hover on it)...otherwise it just fadeOut
What am I doing wrong?
I tried to use clearTimeout but it ends up in a wierd behaviour snippet. I tried reseting with booleans the code but as well...I couldnt make it work the way is expected
let ShowPanel = 0;
$('.ShowPanel5Seconds').on("click", function() {
ShowPanel = 1;
$(".Panel").show();
setTimeout(function() {
$(".Panel").fadeOut();
}, 5000)
});
//clicking hoverin on the panel
$('.Panel,.container').on("click", function(event) {
if (1 == ShowPanel) {
$('.ShowPanel5Seconds').trigger("click");
}
});
.container{
position:relative;
width:300px;
height:300px;
border:1px solid blue;
margin:10px
}
.Panel {
display: none;
position:absolute;
top:10px;
left:10px;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="container">
<div class="Panel">I'm the panel...click me to continue living</div>
</div>
An alternative, that works as expected is to keep a timeout variable with the time left to display the div.
let timeleft = 0;
function hide_or_not() {
timeleft = timeleft - 1;
if (timeleft <= 0) {
$(".Panel").fadeOut();
}
setTimeout(hide_or_not, 1000);
}
$('.ShowPanel5Seconds').on("click", function() {
$(".Panel").show();
if (timeleft <= 0) {
timeleft = 5;
hide_or_not();
}
});
//clicking hoverin on the panel
$('.Panel').on("click", function(event) {
timeleft = timeleft + 1;
});
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<scri
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
Note: The code is made to be readable, not exactly optimal.
You are overcomplicating it. Just show/extend time in one go
let panel = $('.Panel'),
panelTimer;
function showAndExtendPanel(){
panel.stop(true,true).show();
clearTimeout(panelTimer);
panelTimer = setTimeout(killPanel, 5000)
}
function killPanel(){
panel.fadeOut();
}
$('.ShowPanel5Seconds, .Panel').on("click", showAndExtendPanel);
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
You can control this by addClass, removeClass() and :not() selector
// on button click show/fadeOut the panel but not the panel with class hover
$('.ShowPanel5Seconds').on("click", function() {
$(".Panel:not(.hover)").show();
setTimeout(function() {
$(".Panel:not(.hover)").fadeOut();
}, 5000)
});
// when hover over the panel add class hover and remove it when unhover and trigger the button click
$('.Panel:not(.hover)').hover(function(event){
$(this).addClass('hover');
} , function(){
$(this).removeClass('hover');
$('.ShowPanel5Seconds').click();
});
.Panel {
display: none;
background: red;
height: 100px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
<div class="Panel">I'm the panel...click me to continue living</div>
I have an Iframe that loops through an array of published Google sheets. Is there a way that I can have the iframe scroll down over time to display all the data from the published URLs?
Ideally, I would like to get the results sheets to start from the top and over 30 seconds, scroll down to the bottom, then when at the bottom, switch to the next results sheet. This would then continually loop from Site 1 to Site 5.
Here is my code:
var sites = [
"https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=0&single=true",
"https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=1991236368&single=true",
"https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=205619546&single=true",
"https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=1480439822&single=true",
"https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=1101347808&single=true"
];
var currentSite = sites.length;
$(document).ready(function() {
var $iframe = $("iframe").attr("src", "https://docs.google.com/spreadsheets/d/1Gd4eYAukSIvU0VS_zt37TWNiKi15-lB3V8f5AA3IXJU/pubhtml?gid=0&single=true");
setInterval(function() {
(currentSite == 1) ? currentSite = sites.length - 1: currentSite = currentSite - 1;
$iframe.attr("src", sites[currentSite]);
}, 10000);
});
iframe {
height: 768px;
width: 1024px;
border: 2px solid gray;
}
body {
width: 1024px;
length: 768px;
background-color: #C9C9C9;
margin: 0 auto;
}
#heading-wrapper {
margin: 0 auto;
background-color: #FF6600;
border: 2px solid black;
text-align: center;
width: 1024px;
}
#heading-wrapper h1 {
font-family: Arial;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<head>
<title>Live Results</title>
</head>
<body>
<div id="heading-wrapper">
<h1>Live Results</h1>
</div>
<iframe></iframe>
</body>
I don't even know if it is possible to have it scroll slowly down.
Take a look at
iframe.contentWindow.scrollTo(x, y);
You could create a function that calls that periodically with an incremented y scroll amount.
use set interval and change the scrollTop property of your containing element:
setInterval(changeScrollPosition, 50); // every 50 milliseconds
function changeScrollPosition(el)
{
var currentTop = el.scrollTop;
el.scrollTop = currentTop + howMuchYouWantToScrollBy;
}
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.
i am having a hard time trying to animate this box, so the changes go smooth, but i just cannot figure out how to keep everything together. Help would be really appreciated. (already tried with 'switchClass') Here is the whole code:
<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<style>
#box {
position: relative;
margin: auto;
padding: auto;
display: block;
width: 167px;
height: 167px;
}
#box .item {
position: relative;
margin: 0;
display: block;
width: 100%;
height: 33%;
cursor: pointer;
}
#box .over {
height: 84%;
}
#box .other {
height: 8%;
}
#top {
background: red;
}
#mid {
background: green;
}
#bot {
background: blue;
}
</style>
<script>
function anim(item) {
$('.item').attr('class', 'item other');
$('#' + item.id).attr('class', 'item over');
}
function clean() {
$('.item').attr('class', 'item');
}
</script>
<div id='box' onmouseout="clean()">
<div id='top' class='item' onmouseover='anim(this)'></div>
<div id='mid' class='item' onmouseover='anim(this)'></div>
<div id='bot' class='item' onmouseover='anim(this)'></div>
</div>
edit: this code is running just fine, but its just an example of final output (just some animations needed)
Maybe this is not super cool, but seems to do job:
var $items = $('.item').on({
mouseover: function () {
$items.removeClass('over other');
$items.stop().filter(this).animate({height: '84%'}, function () {
$(this).addClass('over');
})
.end().not(this).animate({height: '8%'}, function () {
$(this).addClass('other');
});
},
reset: function() {
$items.removeClass('over other').stop().animate({height: '33%'});
}
});
$('#box').mouseout(function() {
$items.trigger('reset');
});
http://jsfiddle.net/dfsq/4vnkh/1/
If you want to animate the change, please take a look at jQuery animate
Something like this:
$('.item').mouseenter(function() {
$('.item').animate({
height: 80%
}, 500, function() {
// Animation complete.
});
});
$('.item').mouseleave(function() {
$('.item').animate({
height: 33%
}, 500, function() {
// Animation complete.
});
});
in this case you don't need onmouseout or onmouseover
If your animation is based solely on CSS class attributes why not use CSS3 hover pseudo-selector?
Example:
.box {
width: 200px;
}
.box:hover {
width: 400px;
}
<div class="box">Hover over me!</div>
Additional: Response to comments
If you are looking for custom animation duration you can use a callback function with a duration for the initial function call. Here's an example:
$('#div').animate({
width: '200px',
color: 'blue'
}, 5000, function() {
// Animation finished after 5 seconds.
alert("Animation complete!");
});
Addition #2
Your problem child is this little guy:
$('.item').attr('class', 'item other');
This sets each box to 8% height and THEN expands the primary animating box. Remove this and your #box will remain the same height throughout all animations!