js slider
Forgive me as I'm new to coding.
Great plugin, but I can't get the auto advance code to work fully.
Here's the issue: when I implement the auto advance code it works. However when I click on a menu item above the slider (right before it loads another slide) the slider goes blank. This also happens if I go back to the slider and from another page (depending on the timing).
http://dev.believemedia.com
You are using AJAX to load the pages when clicking on the menu, and it seems you are not clearing the interval.
Whenever you click on the menu you have to clear your interval, something like:
//having this interval
var myInterval = setInterval({
//do whatever
}, 1500);
//on click on your menu links
$('#myMenu').click(function(){
//do whatever
//clear interval
clearInterval(myInterval);
});
Related
I made a website that has 2 sections. You have to scroll a bit to come to section 2 so I wanted to make a code which sends you directly to section 2 when you scroll down.
So I made a basic function that works when I use a button to trigger it but I couldn't figure out how can I make this function run when the user scrolls. The function:
function scroll_to_target(){
document.getElementById("moreinfo").scrollIntoView();
}
Basically I need something that when the user scrolls down in the first section of the website it triggers "scroll_to_target()" function which makes the user scroll to "moreinfo" (second section) of the website directly and smoothly.
i guess you can use jQuery to do that, for the scroll function to hit you could do something like this after importing jQuery to project:
$(window).on("scroll", function() {
//call the function here or make any changes
});
I want to replay slider (start again animation)
I have created only 1 slide using Slider Revolution Version 6.1.8
(https://revolution.themepunch.com/) in WordPress
I have set this slider in popup model.
Actually, I want to replay slider on open popup every time.
I have used jQuery('#model1').click(function(){ revapi1.revstart();});
It's working only one time.
Second time it gives
revapi1.revstart();
=> false
=> Slider Is Running Already
So please anyone helps me with replay slider every time when I will open the popup model.
Complete 1st slide.
Duplicate 1st slide. (This for a run (play) on Click event)
Go to in General setting of the slider.
Auto Rotate Slideshow => OFF
Wait for API => On
Click on Save button
Go to in CSS/jQuery of General setting of the slider.
Click on Custom Js Tab
Write below script according to your slider id and Button id.
revapi1.revstart();
var rev_next = 'no';
jQuery('#ButtonID').click(function(){
if(rev_next == 'yes'){
console.log('revstart...');
revapi1.revstart();
rev_next = 'yes'
}else{
console.log('revnext...');
revapi1.revnext();
}
});
Click on Save button.
I'm using socialite.js to put social buttoms on my page, social buttons are inside div id="social". Div is initially hidden (display: none;).
I'm calling Socialite.load($('#social'));
and nextly want to show this div after some delay,
I tried:
$('#social').delay(4000).fadeIn(400);
and:
timeoutID = setTimeout(function(){ $('#social').fadeIn(400)}, 3000);
It doesn't matter which method I would like to use, IE and FF shows only g+ and twitter buttons, but FB button is missing, Chrome shows all three buttons.
Except without timeout:
$('#social').fadeIn(400);
this works great in every browser.
Any idea, please?
Facebook button won't load if the container div is hidden.
Try this:
Set opacity to 0.0 and after fb button is loaded, change it to 1.0 and then hide div.
Now You can show or hide it whenever you want.
timeoutID = setTimeout(function(){
$('#social').css("display", "none");
$('#social').css("opacity", "1.0");
$('#social').fadeIn(500)
}, 3000);
Is the Facebook button loaded onto the page but just not visible? Like, maybe it's overflowing out of the div?
Have you checked the developer console in IE and FF to see if there are any errors occurring that aren't occurring in Chrome? If the button's not loading on the page at all, that could mean that the JavaScript is stopping before it reaches the point in the code where the FB button is rendered.
Possibly this has been discussed a zillion times and I'm over thinking this, but...
How does one create a 'blocking' jQuery animation?
I have a page which has a 'special' slider animation that executes the first time a user visits the site. But there is a 'normal' slider animation that fires every time the user visits the same page. Since both animations fire with document.ready() they both occur at the same time. What I -want- is for the first animation to fire and then when the user clicks a button to close the window -then- the second animation fires.
//pseudocode
jQuery( init );
function init() {
if(firstVisit) {
Animation1(); //Special. Only shows 1st visit to site
Animation2();
} else {
Animation2();
}
}
}();
Here's the site: http://jchmusic.com
I guess I can re-write the code for -both- so that the second one explicitly starts only when the user clicks the 'close' button on the first animation, but to -me- it would look much cleaner if I could just make the code on the first animation 'blocking'... ie. the second animation doesn't start until the first animation returns. I messed about with SetTimeOut and various 'loops' and all it does is hang the browser... I'm sure this has been mulled over many times.
Any ideas?
I'm using jquery mobile and want to refresh the div in particular time interval.
I tried using
var auto_refresh = setInterval(function() {
$("#zabar").load(location.href+" #zabar>*","").fadeIn("slow")
},15000);
but what happens that the css styling and struction of that div or button is gone after the auto refresh.
I don't to load the content from other page. Just want to refresh it in particular time.
This is demo here what is happening http://jsfiddle.net/pRTg9/ every thing disappear
Try to invoke .trigger( 'updatelayout' ); on your div in your auto_refresh function. Triggering that event should reapply the css styling and struction. It might look something like this:
var auto_refresh = setInterval(function() {
$("#zabar").load(location.href+" #zabar>*","").fadeIn("slow");
$("#zabar").trigger('updatelayout');
},15000);
The updatelayout event is described at the bottom of this page in the jQuery Mobile Documentation.
Try to fetch your new list content by Ajax, then replace it into the list and call "listview('refresh')" on your list.
See http://jsfiddle.net/RRCAK/20/