Fading multiple divs with JS - javascript

I have two or in future may be more divs with background images in css. I would like to fade them in and out in a loop.
I am trying to do something like this but it doesn`t work.
$(window).load(function(){
var divs = $('.fade');
function fade() {
var current = $('.current');
var currentIndex = divs.index(current),
nextIndex = currentIndex + 1;
if (nextIndex >= divs.length) {
nextIndex = 0;
}
var next = divs.eq(nextIndex);
next.stop().fadeIn(2000, function() {
$(this).addClass('current');
});
current.stop().fadeOut(2000, function() {
$(this).removeClass('current');
setTimeout(fade, 2500);
});
}
fade();
#one {
background-image: url("Test_bg.jpg");
margin-top: -150px;
min-height: 100%;
background-attachment: fixed;
}
#two {
background-image: url("Test_bg1.jpg");
margin-top: -150px;
min-height: 100%;
display: block;
background-attachment: fixed;
}
<div id="one" class="fade current">
</div>
<div id="two" class="fade">
</div>

You are mising }) at the end with causes syntax error
$(window).load(function(){
var divs = $('.fade');
function fade() {
var current = $('.current');
var currentIndex = divs.index(current),
nextIndex = currentIndex + 1;
if (nextIndex >= divs.length) {
nextIndex = 0;
}
var next = divs.eq(nextIndex);
next.stop().fadeIn(2000, function() {
$(this).addClass('current');
});
current.stop().fadeOut(2000, function() {
$(this).removeClass('current');
setTimeout(fade, 2500);
});
}
fade();
})
#one {
color: red
}
#two {
color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one" class="fade current">a
</div>
<div id="two" class="fade">b
</div>

Related

Function to count number of line breaks acts differently on $(window).on('resize') and $(document).ready

I have a function which counts the number of line breaks in a div, depending on the width of the window. While the functions works fine when placed in the $(window).on('resize') function, it does not work when put in $(document).ready() function. I want it to work right on page load, and also window resize, how do I support both?
JSFiddle
Javascript/jQuery:
// functions called in both document.ready() and window.resize
$(document).ready(function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Ready");
});
$(window).on('resize', function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Number of lines: " + lineCount);
});
// calculates the amount of lines required to hold the items
function getLineCount() {
var lineWidth = $('.line').width();
var itemWidthSum = 0;
var lineCount=1;
$('.item').each(function(index, element) {
if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = $(element).outerWidth();
}
});
return lineCount;
}
// overlays rows for the amount of linebreaks
function postItems(lineCount){
var container = $('<div />');;
for(var i = 1; i <= lineCount; i++) {
container.append('<div class="line">' + i + '</div>');
}
$('.line-wrap').html(container);
}
You'll see at the start of the page, it incorrectly shows 17 lines, and then once you resize it will show the correct amount.
The issue lies in the first line of getLineCount(). Originally you had
var lineWidth = $('.line').width();
but no elements with the class "line" exist yet on your page (since they get added in your postItems() method. I changed it to
var lineWidth = $(".container").width();
instead, and now your code should be working. Snippet posted below:
$(document).ready(function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Ready");
});
$(window).on('resize', function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Number of lines: " + lineCount);
});
// calculates the amount of lines required to hold the items
function getLineCount() {
var lineWidth = $('.container').width();
var itemWidthSum = 0;
var lineCount=1;
$('.item').each(function(index, element) {
if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = $(element).outerWidth();
}
});
return lineCount;
}
// overlays rows for the amount of linebreaks
function postItems(lineCount){
var container = $('<div />');;
for(var i = 1; i <= lineCount; i++) {
container.append('<div class="line">' + i + '</div>');
}
$('.line-wrap').html(container);
}
body {
text-align:center;
}
.answer {
position: fixed;
left: 0;
bottom: 0;
}
.container {
position: relative;
width: 50%;
margin: 0 auto;
border: 1px solid #e8e8e8;
display: inline-block;
}
.item {
height: 50px;
padding:0 10px;
background-color: #aef2bd;
float: left;
opacity:0.2;
white-space: nowrap;
}
.line-wrap {
position: absolute;
border: 1px solid red;
width: 100%;
height: 100%;
top:0; left: 0;
}
.line {
height: 50px;
width: 100%;
background-color: blue;
opacity:0.5;
color: white;
transition: all 0.5s ease;
}
.line:hover {
background-color: yellow;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item-wrap">
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
</div>
<div class="line-wrap">
</div>
</div>
<h1 class="answer"></h1>

Developing image slider using jQuery and javascript

Below is my code in that i have developed three functions to get desired image by scrolling and i am having "prev" and "next" divs to move images.It looks good for me but there must be something wrong which is not letting it works.
<!DOCTYPE html>
<html>
<head><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" >
var imageArr = document.getElementsByClassName('slide');
var offset = imageArr.length-1;
var currentImage, prevImage, nextImage;
function getCurrentImage() {
currentImage = imageArr[offset];
}
function getPrevImage() {
if(offset == 0)
offset = imageArr.length-1;
else
offset = offset-1;
prevImage = imageArr[offset];
}
function getNextImage() {
if(offset == imageArr.length-1)
offset = 0;
else
offset = offset+1;
nextImage = imageArr[offset];
}
$("document").ready(function(){
$(".prev").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getPrevImage();
});
$(currentImage).css({right:0px});
$(prevImage).css({left:0px});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'});
$(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
$(".next").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getNextImage();
});
$(currentImage).css({right:0});
$(nextImage).css({left:0px});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'});
$(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
});
</script>
<style>
.container {
width : 90%;
margin-left: 5%;
margin-right: 5%;
height : 400px;
border : 2px solid black;
position: relative;
}
img {
width:100%;
height:400px;
position: absolute;
}
.prev, .next {
position :relative;
cursor : pointer;
width : 4%;
height: 70px;
border : 1px solid black;
margin-top: -250px;
font-size: 40px;
color:#fff;
padding-left:10px;
background: #000;
opacity: .5;
}
.next {
float:right;
margin-right: 0px;
}
.prev{
float:left;
margin-left: 0px;
}
.prev:hover, .next:hover{
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<img src="slide1.jpg" class="slide" />
<img src="slide2.jpg" class="slide" />
<img src="slide3.jpg" class="slide" />
<img src="slide4.jpg" class="slide" />
</div>
<div class="prev" >❮</div>
<div class="next" >❯</div>
</body>
</html>
You have syntax errors
in $().css({right: 0px}); should by $().css({right: '0px'});
Getting html elements also must be after $("document").ready, because your html elements do not exist before.
It works for me:
$("document").ready(function(){
var imageArr = document.getElementsByClassName('slide');
var offset = imageArr.length-1;
var currentImage, prevImage, nextImage;
function getCurrentImage() {
currentImage = imageArr[offset];
}
function getPrevImage() {
if(offset == 0)
offset = imageArr.length-1;
else
offset = offset-1;
prevImage = imageArr[offset];
}
function getNextImage() {
if(offset == imageArr.length-1)
offset = 0;
else
offset = offset+1;
nextImage = imageArr[offset];
}
$(".prev").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getPrevImage();
});
$(currentImage).css({right: '0px'});
$(prevImage).css({left: '0px'});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'});
$(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
$(".next").click(function(){
$(function(){
getCurrentImage();
});
$(function(){
getNextImage();
});
$(currentImage).css({right: '0px'});
$(nextImage).css({left: '0px'});
$(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'});
$(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
});
});

Javascript Slideshow with play pause and Next Prev button

I'm making a slideshow in Javascript with a Play / Pause and Next / Prev. I have manage to slideshow working with play/pause button, but now i wanted to add Next and Prev button to it. Can some one please help me how can i do that.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Slideshow</title>
<style type="text/css">
#slideshow {
margin: 50px auto;
position: relative;
width: 900px;
height: 450px;
padding: 10px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow > div > img {
width: 100%;
}
#button { text-align: center; }
</style>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</head>
<body>
<div id="slideshow">
<div>
<img name="slide" id="imgSlideshow" src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg">
</div>
</div>
<div id="button">
Prev
Play/Pause
Next
</div>
</body>
</html>
Here is JavaScript:
<script language="javascript" type="text/javascript">
var i = 0;
var path = new Array();
//var timer = setInterval("slide()",2000);
var timer;
// LIST OF IMAGES
path[0] = "http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg";
path[1] = "http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg";
path[2] = "http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg";
path[3] = "http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg";
function slide() {
document.getElementById("imgSlideshow").src = path[i];
i = (i + 1)%path.length;
//console.log(i);
}
function setTimer(){
if (timer) {
// stop
clearInterval( timer );
timer=null;
}
else {
timer = setInterval("slide()",2000);
}
}
var imgNumber = 1;
var numberOfImg = path.length;
function previousImage() {
if(imgNumber > 1) {
imgNumber--;
}
else {
imgNumber = numberOfImg;
}
document.getElementById("imgSlideshow").src = path[imgNumber-1];
changeCounter(imgNumber, numberOfImg);
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.getElementById("imgSlideshow").src = path[imgNumber-1];
changeCounter(imgNumber, numberOfImg);
}
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
document.getElementById("counter").innerHTML = 1 + "/" + path.length;
</script>
Any Help is appreciated and thanks in advance.
Only minor changes in the logic.
var imgNumber = 0;
var path = ["http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/starlight.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/snowstorm.jpg",
"http://themarklee.com/wp-content/uploads/2013/12/misty-winter-afternoon.jpg"
];
var numberOfImg = path.length;
var timer = null;
function slide() {
imgNumber = (imgNumber + 1) % path.length;
console.log(imgNumber);
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
}
function setTimer() {
if (timer) {
clearInterval(timer);
timer = null;
} else {
timer = setInterval(slide, 2000);
}
return false;
}
function previousImage() {
--imgNumber;
if (imgNumber < 0) {
imgNumber = numberOfImg - 1;
}
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
return false;
}
function nextImage() {
++imgNumber;
if (imgNumber > (numberOfImg - 1)) {
imgNumber = 0;
}
document.getElementById("imgSlideshow").src = path[imgNumber];
changeCounter(imgNumber + 1, numberOfImg);
return false;
}
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
document.getElementById("counter").innerHTML = 1 + "/" + path.length;
#slideshow {
margin: 50px auto;
position: relative;
width: 900px;
height: 450px;
padding: 10px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow > div > img {
width: 100%;
}
#button {
text-align: center;
}
<div id="slideshow">
<div>
<img name="slide" id="imgSlideshow" src="http://themarklee.com/wp-content/uploads/2013/12/snowying.jpg">
</div>
</div>
<div id="button">
Prev
Play/Pause
Next
</div>
<div id="counter"></div>

Clear a GSAP TimelineMax animation after reversing it

Basically I have a structure like this, my goal is to animate 4 divs so that when you click on one the other slide out and when you click on the container they return to their initial positions.
var TL = new TimelineMax;
$('.quater').on('click', function () {
$faders = $('.container').find('.quater').not(this),
$faders.each(function () {
TL.to($(this), 1, {autoAlpha:0, x:50}, 0);
});
});
$('.container').on('click', function () {
TL.reverse();
TL.clear();
});
The problem is that if I omit the "TL.clear();" it will work just for the first ".quater" div clicked, if i put in the "TL.clear();" the animation will not reverse anymore.
jsFiddle.
Snippet:
var container = document.querySelector('.container');
var items = document.querySelectorAll('.item');
var duration = 0.6;
var ease = Expo.easeOut;
var numItems = items.length;
var i;
container.addEventListener('click', onContainerClicked, false);
for (i = 0; i < numItems; i += 1) {
(function(index){
items[index].timeline = new TimelineMax({ paused: true });
items[index].timeline.fromTo(items[index], duration, { y: 0, autoAlpha: 0.4 }, { y: -104, autoAlpha: 1, ease: ease });
items[index].addEventListener('click', onItemClicked, false);
}(i));
}
function onContainerClicked() { reverseAll(); }
function onItemClicked(e) {
reverseAll();
e.target.timeline.play();
}
function reverseAll() {
for (i = 0; i < numItems; i += 1) { items[i].timeline.reverse(); }
}
html, body {
margin: 0;
padding: 0;
}
.container {
background: #444;
width: 512px;
height: 104px;
}
.item {
float: left;
margin: 2px 0 0 2px;
width: 100px;
height: 100px;
}
.item:nth-child(odd) { background: #0cc; }
.item:nth-child(even) { background: #cc0; }
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<div class="container"></div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>

How to call a image class on a regular interval

I am having four classes inside each class a image is called
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
and my css class contains
.ban01 { background-image:url(../images/banner/01.jpg); }
.ban02 { background-image:url(../images/banner/02.jpg); }
.ban03 { background-image:url(../images/banner/03.jpg); }
.ban04 { background-image:url(../images/banner/04.jpg); }
and my Jquery is
$(document).ready(function () {
var totDivs = $(".banner ban03").length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban03").eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
});
how to call these classes in regular intervals sorry if i repeated the question again
html
<div id="ban01" class="banner ban01">
</div>
<div id="ban02" class="banner ban02">
</div>
<div id="ban03" class="banner ban03">
</div>
<div id="ban04" class="banner ban04">
</div>
style
.banner { height: 50px }
.ban01 { background: green }
.ban02 { background: blue }
.ban03 { background: red }
.ban04 { background: orange }
javascript
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(change, 2000);
function change(){
$(".banner").hide().eq(currDiv).show();
currDiv = (currDiv + 1) % totDivs;
}
change();
});
http://jsfiddle.net/b2Btj/1/
Did you look on this answer... :-)
jquery-timed-change-of-item-class
Try this while I'm doing your coding. :-D
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.a, .b, .c, .d, .e {
height: 120px;
width: 200px;
}
.a {
background-color: red;
}
.b {
background-color: green;
}
.c {
background-color: blue;
}
.d {
background-color: black;
}
.e {
background-color: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<h1>Testing</h1>
<div id="test" class="a">How Are You Buddy?</div>
<script type="text/javascript">
$( document ).ready(function() {
var array = ['a','b','c','d','e'];//Here is your classes
var len = array.length;
var i=0;
function changeDivClass(d) {
$("#test").removeClass();
$("#test").addClass(array[d]);
}
setInterval(function() {
if(len>=i){
return changeDivClass(i++);
}else{
i=0;
$("#test").removeClass();
$("#test").addClass('a');
}
}, 5000);
});
</script>
</body>
</html>
#Maikay yes I want to rotate the images
Why use JavaScript to rotate image ?
This is possible with only css. Use the property : animation.
.imageRotate {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-animation:spin 4s linear 1; // '1' for a single animation, if you need an infinite animation replace '1' by 'infinite'
-moz-animation:spin 4s linear 1;
animation:spin 4s linear 1;
}
#-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
<div id="ban01">
<img class="imageRotate" src="http://socialtalent.co/wp-content/uploads/blog-content/so-logo.png">
</div>
not sure what exactly the click trigger on the banner element will do, but maybe this helps:
$(document).ready(function () {
var totDivs = $(".banner").length;
var currDiv = 0;
var myInterval = setInterval(function() {
if (currDiv > totDivs) {
clearInterval(myInterval);
return;
}
$(".banner").eq(currDiv).trigger("click");
currDiv++;
}, 2000);
});
what you could do is that you could run a for loop if you know the counts of the "div"
for(var count=0;count<3;count++)
{
var totDivs = $(".banner ban0"+count).length;
var currDiv = 0;
var myInterval = setInterval(function () {
if (currDiv > totDivs) {
clearInterval(myInterval);
return
}
$(".banner ban0"+count).eq(currDiv).find('class').trigger("click");
currDiv++;
}, 2000);
}
May this could solve your issue .

Categories