I have 5 divs every div call H4.
I create this by javascript to get the result and it works but now I need it to do this automatically in sequence without user interactivity to be like auto slider, for example, caption1 should click first and show caption1content after 8 seconds caption 2 clicks and show captoin2content and so on how can I do this by javascript.
JS:
$("#caption1").on('click', function() {
$("#caption1content").fadeIn();
$("#caption2content,#caption3content,#caption4content,#caption5content").fadeOut();
});
$("#caption2").on('click', function() {
$("#caption2content").fadeIn();
$("#caption1content,#caption3content,#caption4content,#caption5content").fadeOut();
});
$("#caption3").on('click', function() {
$("#caption3content").fadeIn();
$("#caption1content,#caption2content,#caption4content,#caption5content").fadeOut();
});
$("#caption4").on('click', function() {
$("#caption4content").fadeIn();
$("#caption1content,#caption2content,#caption3content,#caption5content").fadeOut();
});
$("#caption5").on('click', function() {
$("#caption5content").fadeIn();
$("#caption1content,#caption2content,#caption3content,#caption4content").fadeOut();
});
HTML:
<div id="caption">
<h4 id="caption1content" class="ccntnt">text1</h4>
<h4 id="caption2content" class="ccntnt">text2</h4>
<h4 id="caption3content" class="ccntnt">text3</h4>
<h4 id="caption4content" class="ccntnt">text4</h4>
<h4 id="caption5content" class="ccntnt">text5</h4>
</div>
<div id="captionbtns">
<div id="caption1">text1</div>
<div id="caption2">text2</div>
<div id="caption3">text3</div>
<div id="caption4">text4</div>
<div id="caption5">text5</div>
</div>
well it is pretty simple you can use setInterval and you can do it like this not the perfect way but working.
it will click after every 8 seconds it will only loop through it once and further you can use a if condition to reset the count if you want to run it again and again;
let count = 1;
setInterval(function(){
$(`#caption${count}`).click();
count++;
},8000);
Related
I'm trying to realize a 3-step form system. Basically, when you load the page, the first step of the form is displayed. Once completed and after the user has clicked on the "next step" button, form number 2 appears, and so on.
But I'm stuck on JS code. I do not know how to go about it.
My logic was simply to put parent elements (.step) in display: none, and after the user clicked the button, make the next step in display: block. What do you think ?
(This is obviously a prototype and divs will be replaced by )
My codepen
HTML:
<div class="steps">
<div class="step step1">
Step 1/3
</div>
<div class="step step2">
Step 2/3
</div>
<div class="step step3">
Step 3/3
</div>
</div>
<button type="submit" class="btn next-step">Next step</button>
CSS:
.step {
display: none;
&.is-active {
display: block;
}
}
Javascript (ES5/6), not jQuery
const btnStep = document.querySelector('.next-step');
const steps = [].slice.call(document.querySelector('.steps').children);
btnStep.addEventListener('click', () =>
steps.forEach(step => {
// if (step.classList.contains('is-active')) {
// step.classList.remove('is-active')
// }
step.nextElementSibling.classList.add('is-active')
})
)
Thanks so much.
I think you should use a step counter. You should count the steps in js and put them in a variable called something like "numberOfSteps" so you can always add more steps. Then make two methods, one for incrementing and one for decrementing and change the counter accordingly. And then if (stepCounter === numberOfSteps), show the submit button.
Try to put all the logic in different functions and call them with the corresponding event handler (on click, etc.)
Hope this gets you on your way. Good luck!
Im not sure what kind of behavior u want after the third step
But here is my solution tho im not sure this is exactly how u want it to work
https://jsfiddle.net/b5kvksau/
var x = 1;
function ini() {
if (x == 1) {
document.querySelector(".step1").classList.toggle("is-active");
document.querySelector(".step2").classList.toggle("is-active");
x++;
console.log(x);
} else if (x == 2) {
document.querySelector(".step2").classList.toggle("is-active");
document.querySelector(".step3").classList.toggle("is-active");
x++;
console.log(x);
} else if (x == 3) {
document.querySelector(".step3").classList.toggle("is-active");
document.querySelector(".hello-world").innerHTML = "All done!";
x = 5; // Add your desired execution after 3/3 steps of the form are completed
}
}
at "x=5" just add ur code for when the form is done, if its gonna be a redirect or whatever
Its very simple but the simpler it is the easier it is to debug and implement
i HAd a little time so i came to an easy solution here http://codepen.io/AAnkudovich/pen/BWbaEp
on button click call the function an add active class to first element as it will be the starting point
<div class="steps">
<div class=" is-active step1">
Step 1/3
</div>
<div class="step step2">
Step 2/3
</div>
<div class="step step3">
Step 3/3
</div>
</div>
<button type="submit" class="btn next-step" onclick="stepnext()">Next step</button>
and this is the function to go into your js
function stepnext() {
document.getElementsByClassName('is-active')[0].classList.add('step');
var elem = document.getElementsByClassName('is-active');
elem[0].nextSibling.nextSibling.classList.add('is-active');
document.getElementsByClassName('is-active')[0].classList.remove('is-active');
}
I have inside 3 divs inside one one aside another and every of those 3 divs shows one image.
How to make that at the time only one is visible and after 5 seconds visible fade out and next fade in and same in round indefinite time.
<div id="container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
You can Do Some thing like This
var i = 0;
window.setInterval(function() {
$("#container").find("div").each(function() {
$(this).hide();
});
$("#container").find("div:eq(" + i + ")").slideDown(500);
i++;
if (i==2) {
i = 0;
}
}, 5000);
I wanna like that some plugin just one thing must be different there is have 2 links for 2 div i wanna show there example 10 div but with only one button like "Load More" how i can do this ?
html
Click1
Click2
<div id="outer">
<div id="inner">Initial content</div>
</div>
<div style="display:none" id="hidden1">After click event showing hidden 1</div>
<div style="display:none" id="hidden2">After click event showing hidden 2</div>
Js
$(document).ready(function() {
$('.link').click(function()
{
var id = $(this).attr('href');
$('#inner').fadeOut('slow', function() {
$('#inner').html($(id).html());
$('#inner').fadeIn('slow');
})
})
})
CSS
#hideMsg{
text-align:center;
padding-top:10px;
}
http://jsfiddle.net/G5qGs/2/
You can do it something like this.
Create a load more button
Load More
Use javascript like below
var count = 1;
$('#loadmore').click(function() {
$('#inner').fadeOut('slow', function() {
$('#inner').html($("#hidden" + count).html());
$('#inner').fadeIn('slow');
count++;
})
});
Working example
http://jsfiddle.net/G5qGs/25/
P.S : You might want to display "No more content" at the end. that can be achieved using a simple if else condition
I am trying to get about 8 or 9 divs to fade in and fade out in timed intervals. One after another in 5 second intervals overlapping each other by 1 second. I am not really sure where to start. I am thinking the CSS and then create a js for an onclick array...
Any ideas?
Chris
Working code :-)
</script>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
fadeLoop()
function fadeLoop() {
var counter = 0,
divs = $('.fader').hide(),
dur = 300;
function showDiv() {
$("div.fader").fadeOut(dur) // hide all divs
.filter(function(index) {
return index == counter % divs.length;
}) // figure out correct div to show
.delay(dur) // delay until fadeout is finished
.fadeIn(dur); // and show it
counter++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
return setInterval(function() {
showDiv(); // show next div
}, 7 * 1000); // do this every 5 seconds
};
$(function() {
var interval;
$("#start").click(function() {
if (interval == undefined){
interval = fadeLoop();
$(this).val("Stop");
}
else{
clearInterval(interval);
$(this).val("Start");
interval = undefined;
}
});
});
});
</script>
<!--#include file="header.asp"-->
<% if Request("interactive") = "on" then %>
<form name="tutorial">
<div class="fader"><div class="arrow-w arrowlocation1" style="font-size:1em;" ></div><div id="tutorial1" class="tutorial createquestion1">Start by creating a title and selecting a folder for your question to be stored in.</div></div>
<div class="fader"><div class="arrow-w arrowlocation2" style="font-size:1em;" ></div>
<div id="tutorial2" class="tutorial createquestion2">Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.</div></div>
<div class="fader"><div class="arrow-w arrowlocation3" style="font-size:1em;" ></div>
<div id="tutorial3" class="tutorial createquestion3">Select your options and/or upload an attachment (file, video or audio).</div></div>
<div class="fader"><div class="quicktiptitle quicktiplocation4">QUICK TIP</div><div class="arrow-n arrowlocation4" style="font-size:1em;" ></div>
<div id="tutorial4" class="quicktip createquestion4">To create questions easier update your question preferences in your account area options.</div></div>
<div class="fader"><div class="arrow-w arrowlocation5" style="font-size:1em;" ></div>
<div id="tutorial5" class="tutorial createquestion5">Your rationale can be used to provide feedback to students on this question and you also can use internal comment to track notes on changes, updates, textbook information and more.</div></div>
<div class="fader"><div class="arrow-e arrowlocation6" style="font-size:1em;" ></div>
<div id="tutorial6" class="tutorial createquestion6">Write your questions, answers and you are ready to go.</div></div>
<div class="fader"><div class="arrow-w arrowlocation7" style="font-size:1em;" ></div>
<div class="quicktiptitle quicktiplocation7">QUICK TIP</div>
<div id="tutorial7" class="quicktip createquestion7"> Click on this icon to open and close sections that you don't use. These will remain closed whenever you visit this page until you open them again.</div></div></form>
<% end if %>
I have a div with several images. I need to only display 6 at a time. I then need to fade out current six and fade in next 6 in the list.
I have this wrapped in a setInterval function. Is this possible?
So far, I’ve got:
var hiddenElements = $('.logos div.logo:gt(5)');
hiddenElements.hide();
setInterval(function() {
// …
}, 2000);
"logo" is the class of the divs that need to fade. They all have CSS background images (hence no img tags).
This is very straight approach. Just for fun. But you should optimize your html. Wrap every 6 images in one container and then toggle them - it will more clean and nature solution.
sketch: http://jsfiddle.net/fl00r/HSGF3/4/
<div class='hidden'>1</div>
<div class='hidden'>2</div>
<div class='hidden'>3</div>
<div class='hidden'>4</div>
<div class='hidden'>5</div>
<div class='hidden'>6</div>
<div class='hidden'>7</div>
<div class='hidden'>8</div>
<div class='hidden'>9</div>
<div class='hidden'>10</div>
<div class='hidden'>11</div>
<div class='hidden'>12</div>
<div class='hidden'>13</div>
<div class='hidden'>14</div>
<div class='hidden'>15</div>
<div class='hidden'>16</div>
<script>
$(function(){
fadeByEachSlice(".hidden",6)
})
function fadeByEachSlice(object, step){
var i = 0;
objects = $(object)
function nextSlice(){
if(i%step == 0){
if( i <= objects.length ){
slice = objects.slice(i, step+i);
fadeSlice(slice)
}
}
}
function fadeSlice(slice){
$(slice).fadeIn().delay(1000).fadeOut("fast", function(){
i+=1; nextSlice();
})
}
nextSlice()
}
</script>
you can use jQuery delay function to show 6 images for a while and then fadeout them and fadein next six.