please I need some help with the flow of my jquery code. I have gotten the slideshow to work and decided to go a step further and add nav buttons/images.
in the code below, I am testing it out with one div first, the div will later become a picture or a button. anyways i have it so that when i click the div, the slideshow goes to the first image in the slide show.
Now the KEY ISSUE I am having is that with the code below it works but it takes 5 seconds after the click to show the first image, i'm guessing because of the timeout function.
Please note the this is just a snippet of the code contained in the function slideShow.
$("#slidecontrol2").click(function(){
next.removeClass('is-showing');
$('#container').children(':first').children(':first').addClass('is-showing');
});
setTimeout(slideShow, 5000);
I tried calling the function again after the click() function and before the timeout function.
$("#slidecontrol2").click(function(){
next.removeClass('is-showing');
$('#container').children(':first').children(':first').addClass('is-showing');
**slideShow ();**
});
setTimeout(slideShow, 5000);
it works but now my images are going crazy fast, and dare i click again, it speeds up and gets crazier.
Please help
ANYONE!!
I noticed that slideShow takes no parameters, so it must handle finding the "visible" slide and the next slide on its own. It also seems to me that you would like the slideshow to happen automatically (which I gathered from you setTimeout(slideShow, 5000); line) AND you would like to progress to the next slide on click of the slidecontrol2 element. Since slideShow takes care of this progressive action, here's what your code should look like (pseudo-code below):
var slideShow = function(){
//Fades out current image,
//finds next image with class "is-showing" and fades it in
}
$(document).ready(function(){
//Adds click handler to advance slideshow on click of button
$("#slidecontrol2").click(function(){
slideShow();
});
//Begins slideshow on load of page
setTimeout(slideShow, 5000);
});
Related
I have a form that has multiple pages, on one of the page I’m using a web service to return a value (triggered on the next button) that is then displayed on the next page.
The value return takes over 20 second and want to use an animated gif to let the user know something is happening, I am using a jquery page animation that is normally fired using
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
I have tried $(window).unload(function() nut this seems to fire straight away andnever leaves the animation.
Ideally I would like to fire the animation on the next button:
Next
And run while the web service is getting the information but npo sure hope this is done.
I have tried
$(document).ready(function () {
$('.button').on('click', getAn);
});
function getAn () {
$(".se-pre-con").fadeOut("slow");;
});
But this doesn’t fire. I also don't have acess to modify the html.
Is it possible to use an animated gif like this or is it really only for page loading?
I am having issues with getting my script to work. I am using this bit of code from Codyhouse to add a navigation to my page. The basics of it are, clicking the hamburger opens it, then when you click on a link, it should scroll the page to that location, while closing the menu.
This all works fine, but because the animation is using transform: translateY(170px);, the link is finding it's position, but when it gets to it, the page has been moved 170px, resulting in being 170px below where it needs to be on screen.
My idea for the fix was to delay the clicking on the link until the animation was finished, which lasts .5 seconds, and then go to the point on the page.
This is my script,
$('.nav-click').click(function (e) {
e.preventDefault();
var goTo = this.getAttribute("href");
setTimeout(function(){
window.location = goTo;
},2000);
});
The result of my script is that, when you click on the link, it still scrolls to the position on the page, and then, after the 2 seconds I have set currently, it jumps to the proper place on the page.
It should be waiting 2 seconds, and then following it's href.
Try doing something like this:
$('.nav-click').click(function(e) {
e.preventDefault();
var goTo = this.getAttribute('href');
var interval = setInterval(function() {
if (!$('main').hasClass('nav-is-visible')) {
clearInterval(interval);
window.location = goTo;
}
}, 100);
});
I found no solution to this problem, but opted to remove the transform from the page all together as the links going to the right place is more important to me then having that effect.
Really need some JQuery help here. I'm about to launch my laptop out the window. I have come a long way with this piece of code an I think I am almost there but I am stuck on the last hurdle.
I am only going to include the pertinent pieces of code here because it is a very large piece.
I have a navigation menu for a mock solar system. Here is the link to the larger external piece if you want to see the whole thing. http://jsbin.com/zagiko/1/edit (please note this uses mostly CSS3).
I have a nav menu for the piece and when you click on the values in the nav menu the current script assigns a class of active. That all works perfectly. I built in a button to test the active state on click and the state changes are working. But I need it to respond to the state change on hover. I am not a JQuery person; I am learning. It almost seems like the hover isn't working because it is responding to the data loaded when the page loads instead of responding in real time. But I am just guessing.
What I need is an if statement that will respond to the live data (not on page load or when the document is ready). The if statement should basically say if this div is active then this other div can appear on hover. But if this div is not active then it cannot appear.
The current if statement I wrote is
if($("a.active").is('.uranus')){
$('#uranus .infos').hover(
function () {
$("#descriptionsp").fadeIn("2000");
})
};
The current script that runs when the site loads that sets up the menus is:
$(window).load(function(){
var e=$("body"),
t=$("#universe"),
n=$("#solar-system"),
r=function() {
e.removeClass("view-2D opening").addClass("view-3D").delay(2e3).queue(function() {
$(this).removeClass("hide-UI").addClass("set-speed");
$(this).dequeue()})
},
i=function(e){
t.removeClass().addClass(e)
};
$("#toggle-data").click(function(t){
e.toggleClass("data-open data-close");
t.preventDefault()
});
$("#toggle-controls").click(function(t){
e.toggleClass("controls-open controls-close");
t.preventDefault()
});
$("#data a").click(function(e){
var t=$(this).attr("class");
n.removeClass().addClass(t);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
e.preventDefault()
});
Really need you help. Thanks in advance!
Right now, your block of code is only being checked when the javascript is loaded. At this time, the .uranus element is probably not active, so nothing will happen.
First of all, you want to move this block inside of document ready, otherwise your elements such as .uranus might not even exist yet.
Your logic is very close, but you need to move the if statement inside of the hover function like this:
$('#uranus .infos').hover(
function () {
if($("a.active").is('.uranus')){
$("#descriptionsp").fadeIn("2000");
}
});
This way, every time you hover on #uranus .infos, it will only execute the code if the .uranus is also .active
What I'm doing is loading different content into a div each button. The code I'm using to do so:
$(function(){
$('#galleries').hide().load("letters/index.php", function(){
$(this).slideDown(1);
$(this).slideUp(1);
$(this).hide();
$(this).slideDown(1500);/* or fadeIn() or any other effect*/
document.getElementById("data").style.display = 'none';
});
});
This is an example of one code. I got another 8 like this, but I'm loading into #galleries a different php page everytime.
My problem is, it takes ages to load the second page. For example, on my first click on any button, it takes a second to load everything, doesn't matter what content it has. But whenever I press on another button to load another page, I have to wait for about 3-5seconds, and when I'm waiting, it shows nothing, no div is being shown, just the background.
Is it possible to fix this? Or maybe, is it possible inserting an LOADING image or text to let the user know that it's loading? so while the page is being loaded, the user sees : "LOADING.." or some loading icon.
This should get you going in the right direction.
Also I don't know what's with all of the different effects you have on $(this) either.
$(function(){
$(".loading-image").show();
$('#galleries').hide().load("letters/index.php", function(){
$(this).slideDown(1);
$(this).slideUp(1);
$(this).hide();
$(this).slideDown(1500);/* or fadeIn() or any other effect*/
$("#data").hide(); //replacing your getElementById
$(".loading-image").hide();
});
});
so, I have a function that makes an image invisible, and at the same time starts playing a video (1 out of 6) underneath it. It works great, the div fades out, and it plays. However, it only works the first time.There are six thumbs(all an item in a list), and they each play one of the videos, right? So, each time a thumb is pressed, I need the image to comeback(quickly) and then fade out slowly like it does. So, a mini reset of sorts on each click. the code is
$(document).ready(function () {
$('li, .thumbs').on('click', function () {
var numb = $(this).index(),
videos = [
'images/talking1.m4v',
'images/talking2.m4v',
'images/talking1.m4v',
'images/talking2.m4v',
'images/talking1.m4v',
'images/talking2.m4v'
],
myVideo = document.getElementById('myVid');
myVideo.src = videos[numb];
myVideo.load();
$('#MyT').addClass('clear');
myVideo.play();
});
});
i tried shuffling things around, and no dice. And, yes, it is supposed to start fading once the video has finished loading. This is for iPad and I haven't found a better way around the flicker you get when a video loads.
Edit: okay, trying to explain this best way I can...
the page loads, and you have the image on top. There are six thumbnails, and one is clicked. The image fades out while the video loads(this doesn't have to be synced, so long as the video finishes loading first), then it plays. If a some point, another of the thumbs is pressed, the image pops back up and fades, to cover while the video loads. Basically, the condition of the first click repeats on each click.
Try the following for checking when the video has ended:
$('#my_video_id').bind("ended", function(){
alert('Video Ended');
$('#MyT').removeClass('clear');
});
Taken from http://help.videojs.com/discussions/questions/40-jquery-and-event-listeners
Seems to have worked for them, so let me know if you have similar results.
Edit
So when your thumbnail is clicked you should first check to see if a video is already playing as discussed in the link in the comments section. If a video is playing, stop that video and add the class 'clear' back the that video. Then you can go ahead and fade the 2nd video in. I obviously can't write all that for you because I don't know all the conditions, constraints and the html code you have, but the basic outline is there.