on function start(){ my javascript I want my slideshow to be like when It start, It would wait for 2s, then It should go to (slide2) first with setTimeout(slide2, 2000); without waiting for so long with '8 second' from }, 8000);.
then It would go to (slide3) with setTimeout(slide3, 4000); (It means wait for 2s per slide) then (slide3) at the last slide, It should go back to (slide1) to star loop again.. //Code-on-JsFiddle//
or any simple way to write javascript loop you would like to suggest.
var div = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
var u = -100;
function slide1(){
box.style.marginLeft = '0';}
function slide2(){
box.style.marginLeft = '-100px';}
function slide3(){
box.style.marginLeft = '-200px';}
function start() {
setTimeout(function() {
setTimeout(slide2, 2000);
setTimeout(slide3, 4000);
setTimeout(slide1, 6000);
start();
}, 8000);
}
start();
body { margin:0; padding:0;}
.content { width: 100px; height:60px; margin:5px 0px;
overflow:hidden; white-space:nowrap; background: lightgray;
display: inline-block; position: relative;
border:2px solid black; }
.box { width: 100px; height: 50px; display: inline-block;
position: relative; border:1px solid black; margin:0px;
background:lightblue; transition: all 0.5s ease; }
.button { padding:5px; border:1px solid black; background:pink;
display:inline-block; }
<body>
<div class='content'>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
</div>
<br/>
<div class='button' onclick='slide1();'>1</div>
<div class='button' onclick='slide2();'>2</div>
<div class='button' onclick='slide3();'>3</div>
</body>
I think your approach with multiple functions is not a good idea. Keeping as much of your code as possible, this re-write is a lot more expandable.
var div = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
var u = -100;
var slideIdx = 0;
var delay;
function slide(idx){
//console.log("slide, slideIdx:["+ slideIdx +"], idx:["+ idx +"]");
if (delay){
clearTimeout(delay);
delay=null;
}
if (idx){
slideIdx = (idx > 2) ? 0 : idx;
} else {
slideIdx++;
}
slideIdx = (slideIdx > 2) ? 0 : slideIdx;
box.style.marginLeft = (-100 * slideIdx) +"px";
delay = setTimeout(slide,2000);
}
delay = setTimeout(slide,2000);
.content {box-sizing:border-box;width:100px;height:60px;margin:5px 0px;
overflow:hidden;white-space:nowrap;background:lightgray;
display:inline-block;position:relative;border:2px solid black}
.box {box-sizing:border-box;width:100px;height:50px;display:inline-block;position:relative;
border:1px solid black;margin:0px;background:lightblue;
transition: all 0.5s ease}
.button { padding:5px; border:1px solid black; background:pink;
display:inline-block;}
<body>
<div class='content'><div
class='box'>1</div><div class='box'>2</div><div
class='box'>3</div></div>
<br/>
<div class="button" onclick="slide(0)">1x</div>
<div class="button" onclick="slide(1)">2x</div>
<div class="button" onclick="slide(2)">3x</div>
</body>
Related
After the first mouse over this text, it should move by 200px to the right, after another mouse over the text returns to its starting position (200px to the left).
This is my code:
$(function() {
var small = true;
$('div').click(function() {
small = !small;
if (small) var properties = {
left: '0px'
},
"slow";
else properties = {
left: '100px'
}, "slow"
};
$('.box').stop().animate(properties, 250);
});
});
Use onmouseover and then toggle class to right and set margin-left in css
For animation use transition: all .5s ease;
function func(){
$('.left').toggleClass("right");
}
div{
background-color:blue;
width:150px;
transition: all .5s ease;
}
.right{
margin-left:200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="func()" class="left">try me</div>
You have a type erro in your if else block , just remove the "slow" , and
annimation work :
See snippet :
$(function() {
val = 0;
var properties;
$('div').mouseover(function() {
if(val<200) val+=100;
else val =0;
properties = {
left: val+'px'
}
$('.box').stop().animate(properties, 250);
});
});
.box {
background-color: red;
display: block;
width: 50px;
height: 50px;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border:1px solid black">hover here</div>
<span class="box">Box</span>
You can also achive this using css transition (by removeing addin class)
See below snippet :
$(function() {
$('div').mouseover(function() {
if($('.box').hasClass("left100px"))
$('.box').toggleClass("left100px").addClass("left200px");
else if ($('.box').hasClass("left200px"))
$('.box').toggleClass("left200px");
else $('.box').toggleClass("left100px");
});
});
.box {
background-color: red;
display: block;
width: 50px;
height: 50px;
position:absolute;
transition: all .25s ease;
left:0;
}
.left100px{
left:100px;
}
.left200px{
left:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border:1px solid black">hover here</div>
<span class="box">Box</span>
maybe below program will help you
$(function() {
var i = 0;
var value;
$('div').mouseover(function() {
if(i<200){
i+=200;
}
else {i =0;}
value = {
left: i+'px'
}
$('div').stop().animate(value, 1000);
});
});
div {
background-color: green;
display: block;
width: 100px;
height: 100px;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div >hover mouse corsor here</div>
I am trying to get 900 dots to fade in one after the other. My current code generates them from one single div and then assigns a number class to them.
$(document).ready(function(){
function generate() {
var circle = $('.circle');
var container = $('#container');
for (var i = 0; i <= 900; i++) {
circle.clone().attr('class', 'circle ' + i).appendTo(container);
}
}
generate();
});
<style>
#container {
width: 1250px;
margin:0 auto;
max-width:1770px;
height: 670px;
overflow:hidden;
background-color:pink;
position:relative;
}
.circle {
border-radius: 50%;
width: 10px;
height: 10px;
background-color:#8AB5DC;
margin:10px;
float:left;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id="container">
<div class="circle">
</div>
</div>
Does this work for you:
$(document).ready(function () {
function generate() {
var duration = 400;
var delayFactor = 40;
var circle = $('.circle');
var container = $('#container');
for (var i = 0; i <= 900; i++) {
circle.clone().attr('class', 'circle ' + i).appendTo(container).hide();
}
$('.circle').each(function (index) {
$(this).delay(index * delayFactor).fadeIn(duration);
});
}
generate();
});
#container {
width: 1250px;
margin:0 auto;
max-width:1770px;
height: 670px;
overflow:hidden;
background-color:pink;
position:relative;
}
.circle {
border-radius: 50%;
width: 10px;
height: 10px;
background-color:#8AB5DC;
margin:10px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
<div class="circle"></div>
</div>
Play with the duration and delayFactor values. Hope this helps.
I am creating an image slider and using a JavaScript timer to advance to the next picture. When the user clicks on the forward or back button (see picture below) the time the slide is displayed decreases greatly. I need help making the buttons advance the slide and reset the timer and the same time. I am attaching my JavaScript, HTML, and CSS to cover my code thoroughly.
My JavaScript:
var imageShown = 1;
var total = 7;
function autoplay() {
var image = document.getElementById('picture');
imageShown = imageShown + 1;
if(imageShown > total){imageShown = 1;}
if(imageShown < 1){imageShown = total;}
picture.src = "Images/img"+ imageShown +".jpg";
console.log("Pic Changed");
}
window.setInterval(autoplay, 5000);
function pic(x) {
var image = document.getElementById('picture');
imageShown = imageShown + x;
if(imageShown > total){imageShown = 1;}
if(imageShown < 1){imageShown = total;}
picture.src = "Images/img"+ imageShown +".jpg";
console.log("Button clicked");
window.clearInterval(autoplay);
window.setInterval(autoplay, 5000);
}
My HTML:
<img src="Images/img1.jpg" id="picture" >
<div class="left_div"><img onClick="pic(-1)" class="left_click" src="Images/left.png"></div>
<div class="right_div"><img onClick="pic(+1)" class="right_click" src="Images/right.png"></div>
</div>
My CSS:
margin:0px;
}
#imageslider {
height:700px;
width:1000px;
margin: 50px auto;
position:absolute;
border-radius:4px;
overflow:hidden;
padding-right: 5000px;
padding-top: 1000px;
}
#picture {
height:750px;
width:1000px;
position:relative;
padding-top: 50px
}
.left_div {
height: 750px;
width: 150px;
position: absolute;
top: 250px;
left: 0px;
}
.right_div {
height: 750px;
width: 150px;
position: absolute;
top: 250px;
right: 0px;
}
.left_click {
height:50px;
width:50px;
position:absolute;
top:40%;
left:20px;
opacity:0;
transition: all .2s ease-in-out 0s;
}
.right_click {
height:50px;
width:50px;
position:absolute;
top:40%;
right:20px;
opacity:0;
transition: all .5s ease-in-out 0s;
}
.left_div:hover .left_click {
opacity:0.6;
}
.right_div:hover .right_click {
opacity:0.6;
}
.left:hover .left1
You should use clearInterval as following:
clearInterval(autoplay);
or as
window.clearInterval(autoplay);
I think that you might be trying to reset the interval incorrectly
http://www.w3schools.com/jsref/met_win_clearinterval.asp this gives an example of how to reset a function set to an interval in javascript
I have loading bar in specific div, that is 700px from top of the page. JavaScript for loading bar is working fine, but it is triggered at the start page, and when I reach to specific div, bar is already loaded, what I want is to start loading when I reach to that div. Please, help.
JavaScript:
<script>
$('.numberprogress[data-percentage]').each(function () {
var progress = $(this);
var percentage = Math.ceil($(this).attr('data-percentage'));
$({countNum: 0}).animate({countNum: percentage}, {
duration: 5000,
easing:'linear',
step: function() {
// What todo on every count
var pct = '';
if(percentage == 0){
pct = Math.floor(this.countNum) + '%';
}else{
pct = Math.floor(this.countNum+1) + '%';
}
progress.text(pct) && progress.siblings().children().css('width',pct);
}
});
});
</script>
HTML:
<div class="middle>
<div class="progress"><div class="numberprogress" data-percentage="80"></div>
<div class="progressbar"><div class="progresspercent"></div></div></div>
</div>
CSS:
.progress{
float:left;
width:300px;
height:50px;
color:#FFF;
background-color:#38B1CC;
margin-top:5px;
border-radius:4px;
font-family: sans-serif;
text-align:center;
font-size:0.8em;
}
.numberprogress{
float:left;
height:18px;
width:18%;
color:white;
font-size:14px;
text-align:center;
background: rgba(0,0,0,0.13);
padding: 9px 0px;
border-radius:4px;
margin:5px;
}
.progressbar{
margin-left:0px;
float:right;
border-radius:10px;
margin:5px;
height:10px;
width:75%;
background: rgba(0,0,0,0.13);
margin-top:18px;
overflow: hidden;
}
.progresspercent{
height:100%;
float:left;
background-color:white;
border-radius:10px;
}
.middle{
height:600px;
width:auto;
font-family:Bizon;
}
Instead of load it on DOM ready or onload event, you should load it when it reach that specific div.
if ($(document).scrollTop() >= $('.target-div').offset().top) {
Your function
}
To add on #Syahrul answer, here is a working example:a working example
$(document).scroll(function () {
$('.numberprogress[data-percentage]').each(function () {
if ($(document).scrollTop() >= $(this).offset().top) {
animateProgress($(this));
}
});});
I've been messing around with my slider and I got it to slide by itself. The problem is, there is no way you can manually view the slides. I would like to add navigation dots on the bottom so you can skim through the slides without having to view them as the slider goes along. If you could help me with this it would be greatly appreciated.
My slider html:
<div id="slider-container">
<div style="position: relative">
<div class="slide"><img id="slide_1" src="images/slide_1.jpg"/></div>
<div class="slide"><img id="slide_2" src="images/slide_2.jpg"/></div>
<div class="slide"><img id="slide_3" src="images/slide_3.jpg"/></div>
<div class="slide"><img id="slide_4" src="images/slide_4.jpg"/></div>
<div class="slide"><img id="slide_5" src="images/slide_5.jpg"/></div>
<div class="slide"><img id="slide_6" src="images/slide_6.jpg"/></div>
</div>
</div>
My slider css:
.slide-container {
display:block;
}
.slide {
top:0;
width:760px;
height:420px;
display:block;
position:absolute;
transform:scale(0);
transition:all .7s;
}
.slide img {
width:100%;
height:100%;
border-radius:6px;
border:1px solid #95ca1a;
}
My slider javascript:
$(document).ready(function() {
(function (){
var count = $(".slide > img").length;
var current = 1;
var sliderNext = 2;
$("img[id^='slide_']").fadeOut(0);
$("#slide_" + current).fadeIn(300);
var loop = setInterval(function() {
$("#slide_" + current).fadeOut(300);
$("#slide_" + sliderNext).fadeIn(300);
(sliderNext >= count) ? sliderNext = 1 : sliderNext++;
(current >= count) ? current = 1 : current++;
}, 3000)
})()
});
Here's an example of what I mean by nav dots:
CSS Slider - Codepen
First create list of dots, you can do it manually by creating list of "li" tags or can create it via jQuery.
here is code
<ol>
<li></li>
<li></li>
<li></li>
</ol>
number of "li" element should match with number of images
then have following css
#slider-container {
position:relative;
overflow:hidden;
width:100%;
height:380px;
display:inline-block;
}
.slide {
top:0;
width:100%;
display:inline-block;
}
.slide img {
width:100%;
height:100%;
border-radius:6px;
border:1px solid #95ca1a;
}
/******* css of dots ****/
ol{
list-style= none;
width:100%;
}
ol li{
background: #888;
border-radius: 50%;
display: inline-block;
width:20px;
height:20px;
cursor: pointer;
}
then add following jQuery stuff
$('ol li').bind('click', function(){
var index = $(this).index() + 1;
$(".active").fadeOut(300);
$("#slide_" + index).fadeIn(300);
$(".slide").removeClass("active");
$("#slide_" + index).addClass("active");
});
this code will hide active image and shows selected image
here is Fiddle example
hope it will help you
Here is a carousel script I wrote for a project. This allows you to click forward and backward and also on the dots. It's also dynamic so if you have 1 image, there are no dots or scroll bars, if you have 2 images there are the bars to go right and left but no dots, once you have three or more images the dots will be applied.
JsFiddle
HTML
<div class="carousel-container">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="carousel-image-holder">
<img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg" />
<img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg" />
<img src="http://blog.metrotrends.org/wp-content/uploads/2013/09/childPoverty.jpg" />
<img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg" />
</div>
</div>
<div class="clear"></div>
<div class="carousel-buttons-container">
<ul></ul>
</div>
CSS
.clear{clear:both;}
.carousel-container{
width: 600px;
height: 360px;
float: left;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.right-arrow{
width: 60px;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
right: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.left-arrow{
width: 60px;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
left: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.carousel-image-holder{
height:360px;
width: 2400px;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
}
.carousel-image-holder img{
width: 600px;
float: left;
margin: 0;
padding: 0;
display: inline-block;
}
.carousel-buttons-container{
width: 600px;
text-align: center;
margin: 15px 0 0 0;
padding: 0;
}
.carousel-buttons-container ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.carousel-buttons{
background-color: #dddddd;
height: 18px;
width: 18px;
border-radius: 50%;
display: inline-block;
margin: 0 10px 0 0;
padding: 0;
cursor: pointer;
}
.carousel-buttons:last-of-type{
margin: 0;
}
.active{
background-color: #e67e22;
}
JQUERY
$(".left-arrow").hide();
var numImgs = $('div.carousel-image-holder img').length;
var addId = numImgs;
if(numImgs == 2){
var clicked = 0;
imgCount = numImgs-2;
}else if(numImgs <= 1){
$(".right-arrow").hide();
}else{
var clicked = 1;
imgCount = numImgs-1;
}
if(numImgs > 2){
for (var i=0; i<numImgs; i++){
$("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>');
var addId = addId - 1;
}
}else{
}
$(".carousel-buttons").click(function(){
var findIdClicked = $(this).attr("id");
var splitString = findIdClicked.split("carousel")
var findTheNumb = splitString[1];
$(".carousel-buttons").removeClass("active");
$(this).addClass("active");
clicked = parseInt(findTheNumb);
var adjustNumberforSlide = findTheNumb-1;
$(".carousel-image-holder").animate({"left": -(600*adjustNumberforSlide)+"px"});
console.log(clicked);
if(findTheNumb == 1){
$(".left-arrow").hide();
$(".right-arrow").show();
}else if (findTheNumb == numImgs){
$(".right-arrow").hide();
$(".left-arrow").show();
}else{
$(".right-arrow").show();
$(".left-arrow").show();
}
});
$(".carousel-buttons-container").find("li").first().addClass("active");
$(".right-arrow").click(function(){
if (clicked < imgCount){
$(".carousel-image-holder").animate({"left": "-=600px"});
console.log(clicked);
}else{
$(".carousel-image-holder").animate({"left": "-=600px"});
$(".right-arrow").hide();
console.log(clicked);
}
clicked = clicked+1;
$(".left-arrow").show();
$(".carousel-buttons").removeClass("active");
$("#carousel"+clicked).addClass("active");
});
$(".left-arrow").click(function(){
if (clicked > 2){
$(".carousel-image-holder").animate({"left": "+=600px"});
console.log(clicked);
}else{
$(".carousel-image-holder").animate({"left": "+=600px"});
$(".left-arrow").hide();
console.log(clicked);
}
$(".right-arrow").show();
clicked = clicked-1;
$(".carousel-buttons").removeClass("active");
$("#carousel"+clicked).addClass("active");
});
I'll clean up the spacing, just wanted to get this posted