I'm talking abount Counter Widget Elementor
this widget simple count a number with animation
I need to change a number with jQuery and reload animation after click button
jQuery('#id').on('click', function (event) {
jQuery("#price").text("39");
//reload animation counter
});
I expecting that restart animation and count again with my new number
Related
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 am currently working on a project that requires the web application to track how long user stays on one slide of a slide show. Say the online slideshow has 5 (slide-1.png to slide-5.png) slides, user can navigate through the slideshow using "Next" and "Previous" button.
User will always start on slide-1.png, after 5 seconds user clicked on "Next" button and goes to slide-2.png. After 10 seconds the user clicked on "Previous" to go back slide-1.png and stayed there for 5 seconds.
This is basically event-based application. The time will start recording when user click on "Next" or "Previous", and stop recording the old session and start recording the new session when user click on "Next" or "Previous" again.
User does not go to a new html page after clicking on "Next"/"Previous". It is simply images changing src information.
Any ideas about how I should approach this? I am currently using PHP, Javascript, and Java in my web application.
You'll want to capture the time when they start viewing a slide:
var startTime = new Date();
Then capture the time when the slide goes away:
var endTime = new Date();
Then you can calculate the elapsed time.
var elapsed = endTime - startTime; // elapsed time in milliseconds
If you need to account for the case where a user opens a slide and then walks away from the computer you could also start a timeout timer that will log the user as having timed out for that slide.
setTimeout(function () {
endTime = 'Timed out.';
}, ((3 * 60) * 60) * 1000); // ((3hrs * 60mins) * 60secs) * 1000ms
After 3 hours it would set the endTime to 'Timed out.' and you could use that to know that the user walked away from that particular slide and didn't finish viewing the rest.
The JavaScript function that loops over and 'sniffs' for the set conditions that you define will work best for this scenario. The approach you should take is to assign each .png it's own ID attribute. Create variables via JavaScript and jQuery that specifically targets each image. Then attach a mousedown or click event to the slideshow that will detect which image is visible and trigger a timer for that specific image. Ofcourse, you will need input fields hidden on the page for each image for the counter to increment into.
In the link, you will see similar functionality whereby when a use clicks on the 'zoom in' component a timer will start. It will only stop when the user clicks out of the image.
The JavaScript function is call setInterval() and can be stopped with clearInterval(). For best results, create the setInterval() function as a variable.
Sample variable:
var firstSlide = jQuery('img#slide1');
Sample Condition 01:
if (firstSlide.length > 0)
{
//start counter with setInterval();
}
Sample Condition 02:
if (firstSlide.is(':visible'))
{
//start counter with setInterval();
}
To ensure minimal overlaps in the timer and ensure stricter behavior, I would suggest applying a unique CSS class to the slideshow container when it is visible on click and to remove it when it is not visible.
Sample Condition 03:
slideShow.click( function() {
slideShow.addClass('isClicked');
});
if (firstSlide.is(':visible') && jQuery('slideShow.isClicked').length > 0)
{
//start counter with setInterval();
}
http://www.alexldixon.com/clicktimerhelp.htm
Another example where the setInvertval can 'sniff' dynamic conditions, is making element heights equal even when the window resizes and text wraps.
https://jsfiddle.net/dixalex/ojoevj1k/
var makeSameHeight = setInterval( function() {
var currentTextHeight = $('div.myClass-content').height() + "px";
var imgDivHeight = $('div.imgUrl').height() + "px";
if (currentTextHeight === imgDivHeight)
{
var doNothing = "";
} else {
$('div.imgUrl, div.postImageUrl, a.myClass').css("height", currentTextHeight);
}
}, 50);
Lastly, you can also use the new Date() function.
I hope this helps.
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);
});
Im making some sort of a slideshow system, and I use JavaScript/jQuery/PHP to loop through different slides. This is all working good, but within the slides (that are dynamically loaded into a fullpage div), I also want to refresh sections of the slide (the slides are split up in several boxes).
I use SetInterval to reload the sections every x seconds, however, when the slide changes, and after a while the same slide appears, these SetIntervals stack up, causing the sections to reload way too many times.
I've tried to confirm whether the element still existed with:
var refreshBox = setInterval(function(){
if ($('#box_<php id>').length > 0){
//Ajax/Refresh code
}else{
clearInterval(refreshBox);
}
}, ".$boxes_data['box_refresh']."000);
But that didnt work. The intervals still act up when the same slide reappears.
Any solutions?
Thanks!
Already managed to fix it by creating a global array:
window.refreshBox=new Array();
Create interval within array:
refreshBox[".($boxes_data['box_id'])."] = setInterval(function(){
Delete interval from array:
clearInterval(refreshBox[".($boxes_data['box_id'])."]);
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?