I made a script in order to create this "slideshow": http://jsfiddle.net/LWBJG/2/
yet I can not go back to the last slide if I hit "previous" when it is on the first slide
I tried using the last-child selector but had no success
I also tried resetting the count directly like so:
if(count==1){
count=2;
$(".slideshow :nth-child("+count+")").fadeIn();
}
I've been stuck with this for two days, I'm trying to understand what I'm doing wrong!
all I what's left to do is to go to the last slide if I hit "previous" while I'm "standing" on the first slide
First you need to hide all the other .slideshow img elements not being shown when your page first loads. You can do that multiple ways, but here's an example:
$(".slideshow img:not(:nth-child(" + count + "))").hide();
Next, you need to hide the current showing slide when going to the previous one:
$(".slideshow :nth-child(" + count + ")").fadeOut();
Finally, you need to set the count to the number of elements in .slideshow img when going to the last image:
count = $(".slideshow img").length;
Here's a working example: http://jsfiddle.net/LWBJG/22/
You simply were not fading out in the prev loop like you were in the next button loop.
$(".slideshow :nth-child("+count+")").fadeOut()
Also, in the css, i put the following code:
.slideshow > img:not(:first-child) { display:none;}
This makes only the first img appear as default, and then the other ones will fade in as necessary. The way you currently have it, is count is updating properly but your images are inline and are appearing behind the current image number 1.. But on your next loop click, you properly fade out the images.
Hope this helps. Here is the http://jsfiddle.net/LWBJG/18/
Yes i know, i'am late to the party, but I played around a bit. Maybe someone will find the solution useful later on.
Here is a demo: http://jsfiddle.net/NicoO/LWBJG/25/
var $slideContainer = $(".slideshow")
var totalSlides = getAllSlides().length;
var slideIndex = 0;
function getAllSlides(){
return $slideContainer.children("img");
}
function getSlide(index){
return $slideContainer.children().eq(index);
}
function slideExists(index){
return getSlide(index).length;
}
function getCurrentSlide(){
return getSlide(slideIndex);
}
function animateSlide(){
getAllSlides().fadeOut();
getCurrentSlide().fadeIn();
}
$("#next").on("click", function () {
slideIndex++;
if(!slideExists(slideIndex))
slideIndex = 0;
animateSlide();
});
$("#prev").on("click", function () {
slideIndex--;
if(!slideExists(slideIndex))
slideIndex = totalSlides-1;
animateSlide();
});
Using multiple fadeIn()s might lead to a mess. In your case, if you really want to do so, you can first fadeOut() all images before fadeIn() the desired one. This solves the problem.
$(".slideshow img").fadeOut();
$(".slideshow :nth-child("+count+")").fadeIn();
hide() should also work.
Related
I want my webpage to have two slideshows. I have one at the moment that works fine, but having trouble adding the second slideshow, as the images for the second slideshow appear outside of it.
I thought I could probably just copy and paste the code I did for the first slideshow and just change the div class names, but this did not work. I also have javascript controlling my slideshow but I didn't think copying the function I did for the first slideshow, would work for the second.
Can someone give me advice on how I can create the second slideshow using HTML, javascript and css?
Well, part of the key is to parameterize all of the required details - that is, don't hard-code things like the output container's id or that of the target image element if you decide to use a single image and change it's source.
Some approaches use an unordered-list and set it (with css) so only the first item is visible. Changing slides then becomes a matter of moving the li items around inside their container. I.e if one calls appendChild on the parent with the first li item as a parameter, it will be hidden since it's now the last li item and the 2nd item will now be the first and this will be the one displayed.
While the second approach is a little more straight forward, the 1st has the benefits of (0) not needing to know or care how many images there are - you simply move the first li item to be the last, or move the last one to be first and, (1) all the images are loaded at the start, so you don't get a small delay as each slide is shown for the first time and loaded.
Other approaches change the src of an image element.
I've utilized the second here. I've not bothered with prev/next buttons - this may mean this answer is beyond you at the moment. I would add prev/next functions inside the startSlideshow function and return the function itself - i.e return this;, rather than the id of the timer (which is to allow it to be stopped via clearInterval)
JS
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
var slideshow1TimerId = startSlideshow( ['uqrsGpO.jpg', 'vote-pedro.jpg'], 'slide1', 3000 );
var slideshow2TimerId = startSlideshow( ['zS0lOud.jpg', 'tree.png', 's13.bmp'], 'slide2', 1000 );
}
function startSlideshow(imgNameArray, idOfContainer, msPerSlide)
{
var container = byId(idOfContainer);
var tgtImgElem = newEl('img');
container.appendChild(tgtImgElem);
var timerId = setInterval(setSlideImg, msPerSlide);
var slideIndex = 0;
var numSlides = imgNameArray.length;
function setSlideImg()
{
tgtImgElem.src = imgNameArray[slideIndex];
slideIndex++;
if (slideIndex >= numSlides)
slideIndex = 0;
}
return timerId;
}
CSS
#slide1 img, #slide2 img
{
height: 128px;
}
HTML
<div id='slide1'></div>
<div id='slide2'></div>
I am creating a game called 'Pointless'. Pointless here is a game show in the UK. Anyway, there is a countdown which counts down from 100 to whatever score the team got. I am trying to replicate this. For an example, please see this video.
Anyway, I am trying to replicate the countdown myself, however whenever I try the whole thing gets executed at once instead of one div at a time like it should. I need to hide those divs one by one.
Please see this JSFiddle.
for (var i = 0; i <= 10 ; i++) {
$('#' + i).toggle('slide');
}
When you call toggle or any other animate functions in jQuery, it does not block the rest of the code. The animation continues on, while the rest of the code is running. You can add a delay for each of those blocks to start the animation.
You can try this one:
I also suggest you to use .slideToggle('slow') instead of .toggle('slide').
$('#' + i).delay(i*100).slideToggle('slow');
Because the .toggle() events (along with other events) are accually enqued and triggered after the execution of the entire for-loop. Or rather even if they where not, you are calling toggle on all of them nearly all at once, so they will all toggle at the same time. One way to get around it it to use a timer such as setInterval or setTimeout:
$('#Go').click(function(){
var i = 0;
var timer = setInterval(function(){
i++;
$('#' + i).toggle('slide');
if(i > 10) clearInterval(timer);
},100)
})
Fiddle Example
Amir solution is greate. I want juste to add a small correction :
toggle method of jQuery doesn't have any arguments whose value could be slide.
Here is the correct syntaxe :
$(selector).toggle(speed,easing,callback)
speed in [milliseconds, "slow", "fast"]
easing in ["swing", "linear"] (More easing functions are available in external plugins)
callback is a function
Hey guys I'm making my own website just for fun and the following code makes a list of shapes appear. Does anyone know how I could incorporate another button instead of the fadeOut code to make it so that when I click another button, a "hide menu" button. The shapes will fadeOut. This is because the code I have at the moment means that the shapes will fade out by themselves over time. Pls help!
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1aside").fadeIn(100);
$("#div2aside").fadeIn(200);
$("#div3aside").fadeIn(300);
$("#div4aside").fadeIn(400);
$("#div5aside").fadeIn(500);
$("#div6aside").fadeIn(600);
$("#div7aside").fadeIn(700);
$("#div8aside").fadeIn(800);
$("#div9aside").fadeIn(900);
$("#div10aside").fadeIn(1000);
$("#div11aside").fadeIn(1100);
$("#div12aside").fadeIn(1200);
$("#div13aside").fadeIn(1300);
$("#div14aside").fadeIn(1400);
$("#div15aside").fadeIn(1500);
$("#div16aside").fadeIn(1600);
$("#div17aside").fadeIn(1700);
$("#div18aside").fadeIn(1800);
$("#div1aside").fadeOut(17670);
$("#div2aside").fadeOut(17660);
$("#div3aside").fadeOut(17650);
$("#div4aside").fadeOut(17640);
$("#div5aside").fadeOut(17630);
$("#div6aside").fadeOut(17620);
$("#div7aside").fadeOut(17610);
$("#div8aside").fadeOut(17600);
$("#div9aside").fadeOut(17590);
$("#div10aside").fadeOut(17580);
$("#div11aside").fadeOut(17570);
$("#div12aside").fadeOut(17560);
$("#div13aside").fadeOut(17550);
$("#div14aside").fadeOut(17540);
$("#div15aside").fadeOut(17530);
$("#div16aside").fadeOut(17520);
$("#div17aside").fadeOut(17510);
$("#div18aside").fadeOut(17500);
$("section").fadeOut(0);
});
});
</script>
If I understood your question right, you should do a toggle, I find this the simpliest way to do that:
$(document).ready(function(){
var toggle = 0;
$("button").click(function(){
if (toggle === 0) {
$("#yourDivsToFadeIn").fadeIn(YourTimeToFadeIn);
toggle = 1;
}
else if (toggle === 1) {
$("#yourDivsToFadeOut").fadeOut(YourTimeToFadeOut);
toggle = 0;
}
});
});
EDIT: You also could use:
$(document).ready(function() {
$("button").click(function() {
$("#YourDivsIds").fadeToggle(YourTimeToToggleTheFade);
});
});
But I find the first way to do this better, because if you get to learn some more Javascript/jQuery, there arent always .toggle methods to toggle something. Then you better should learn - and get used to - the first method.
-But thats just my point of the view.
At first you need two buttons in your HTML:
<button id="infader">Fade all in</button>
<button id="outfader">Fade all out</button>
Then in your JS you first select all divs to fade with one jQuery selector and store them in a variable. It's faster, less to write and the attachment of the different fading times becomes easier.
// get all divs with an ID that ends with 'aside'
var asides = $("div[id$='aside']");
// get first button and attach the click-handler
$("#infader").click(function() {
// take all asides and use 'each() to execute a function on each of them
// keyword 'this' is one div-element, i is it's index in the collection
asides.each(function(i) {
// the divs gets a fading time depending on their index
// the first (i == 0) gets 100ms, the last (i == 17) gets 1800ms
$(this).stop().fadeIn((i + 1) * 100);
});
});
// get second button similar
$("#outfader").click(function() {
asides.each(function(i) {
$(this).stop().fadeOut((17 - i) * 10 + 17500);
});
});
What does the .stop() before fade? Lets say you have started a fadeIn and then click the out-button before it has completed. Now the fadeIn ist stopped and the fadeOut begins immediately. If you want instead the fadeIn finishing completely before fadeOut runs just remove the .stop().
Its easy to change the fade-times to fit your needs.
I've been working on this slider for a bit, and I've got it to auto play with some nice simple Jquery markup. I decided I wanted to have the option to go to previous and next on the slider, but I'm not sure if it's possible with the set up I have. I've got a "Next" Button set up that moves to the next image. My problem lies in getting the timer to restart after you hit next in the code. Is this possible to do, am I just overlooking something? I also am wondering how to I create the equivalent of the "next" button for a "previous" button. Any help would be appreciated, since I've been banging my head against this one for while.
Here is the Jquery I'm using:
var time = 6000;
function play() {
setInterval(function(){
var next = $(".slideshow .active").removeClass("active").next(".image");
if (!next.length) {
next = $(".slideshow .image:first");
}
next.addClass("active");
}, time);
}
play();
/*Start of function for next button */
function forward() {
$('.forward').click(function() {
var go = $(".slideshow .active").removeClass("active").next(".image").addClass("active");
if (!go.length) {
go = $(".slideshow .image:first");
}
go.addClass("active");
});
}
forward();
I've created a CodePen(http://codepen.io/Develonaut/pen/lLmkc) to try and work this out. I will gladly give credit on the CodePen for whoever helps. Thanks so much!
Check out clearInterval.
You need to set the return value of your setInterval to a variable, then pass that variable to clearInterval to reset your timer. Do that on each press of your previous/next buttons, then call the play function again to start the timer from the beginning.
Here's an updated version of your CodePen example.
Do something like this:
Store the interval id - setInterval() returns this for later use with clearInterval()
var intervalId = setInterval(function()...
Then clear & reset the interval when the button is pressed:
clearInterval(intervalId);
play();
Here is the fiddle: http://jsfiddle.net/fz5Yk/5/
All I want to achieve is to highlight (e.g adding a background color) the heading (in <strong> </strong> tag) of the section-3 when I scroll to section-3.
I'd like to know if there's a way for me to trigger certain events when I'm at a certain section. There must be a thing for this because when you scroll the page manually, you'll notice that, in the navigation menu, link to the section gets selected automatically, as if it was clicked.
Anything helpful will be much appreciated as I've been working on this since yesterday and hav yet to solve it.
There isn't any way to achieve this using CSS, so I edited the jquery.nav.min.js. (added only 4 lines) It works great now. http://jsfiddle.net/fz5Yk/10/
adjustNav=function(a,b,d){
var sec = a.find("."+d+">a").attr("href");
$(sec+">strong").css('background','none'); //Find and remove previous highlight of strong
a.find("."+d).removeClass(d);b.addClass(d); //ORIGINAL
sec = b.find("a").attr("href");
$(sec+">strong").css('background','aqua'); //Find and highlight the strong
};
EDIT: Animation added by request:
http://jsfiddle.net/fz5Yk/11/
add animateSomething function on top:
function animateSomething(sec) {
if(sec == "#section-2")
$("#testBlock").animate({
width:"50%",
opacity:0.5
}, 1500);
}
add animateSomething(sec); at the end of adjustNav function.
Voila!
EDIT FINAL: Animate AFTER scroll ends http://jsfiddle.net/fz5Yk/12/
In your click action have something like this:
$("#container .section strong").css('background-color', 'transparent');
$("#container .section strong:contains('" + $(this).text() + "')").css('background-color', 'yellow');
Not sure if that's what you want exactly, but you could use this to add a class to the every strong which is currently in view:
$(document).scroll(function(){
var t = $(this).scrollTop();
var b = t + $(this).height();
$('.section>strong').removeClass('highlight').filter(function(){
var ot = $(this).position().top;
return ot > t && ot < b;
}).addClass('highlight');
});
http://jsfiddle.net/fz5Yk/7/
But it is a bit pointless in my opinion because when it's not in view why do you want to remove the highlight? It won't be visible anyway!?
If you really only want the functionality for section 3 you could change $('.section>strong') to $('#section-3>strong')