I'm trying to limits the times click on button in divi theme in wordpress but don't know how and I need help. Thank you.
You don't need Divi for this, just add a simple javascript at your code to track the clicks.
Supposing that you are using jQuery, here is the code.
var clicks = 0;
var maxClicks = 3; // set the maximum time to be clicked
var elementClassSelector = '.your-class-button';
$(elementClassSelector).on('click', function(e){
// prevent the event if we already have enought clicks
if (clicks >= maxClicks) {
e.preventDefault();
} else {
clicks++ // increase the number of clicks
}
})
Here is a link how to add a custom javascript using Divi.
Here is a link to help you add javascript or CSS in any theme.
Related
I need help in editing the standard message “Please fill out this field”. I have an Arabic website and I used Elementor Form. In the elementor form, I made Name, Email and Mobile Number fields as mandatory. But when you hover over it or select Submit button without entering the values, you get the popup “Please fill out this field”. Is there a way you can translate or edit this message in Arabic?
Please note that I have already translated all the Custom Messages in Form widget in the Elementor for Wordpress.
URL: https://arabic.hydurworkshop.com/questionnaire/
Kind Regards,
I had the same issue, I've made research and I found the solution,
to your to the page you have the form in, add html widget, and paste this following code in it:
<script>
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("الرجاء ملء هذا الحقل");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})
</script>
you can change the what's written between brackets on the following line(inside the apostrophe sign):
'e.target.setCustomValidity'
--
Bests
Nour
I have setup a custom script on the first product image that uses the dragging events. But now, when I drag - the slider starts functioning. I have figured out how to disable the dragging after the page has loaded (through firebug). But how can I disable right after it's been setup by woocommerce?
I tried this:
flickityInterval = setInterval('disableGalleryDrag()', 1000);
function disableGalleryDrag(){
//disable draggable for gallery
$carousel = jQuery(".product-gallery-slider").flickity();
var flkty = $carousel.data('flickity');
flkty.options.draggable = false;
flkty.updateDraggable();
clearInterval(flickityInterval);
}
But it works only partially for some reason. A little dragging does not initiate the slider dragging, but if you do a bigger slide it does.
Figured it out. Just needed to handle the errors.
flickityInterval = setInterval('disableGalleryDrag()', 1000);
function disableGalleryDrag(){
try {
//disable draggable for gallery
$carousel = jQuery(".product-gallery-slider").flickity();
var flkty = $carousel.data('flickity');
flkty.options.draggable = false;
flkty.updateDraggable();
clearInterval(flickityInterval);
}
catch(err) {
}
}
I have homepage which is created by using multiple small template pages in wordpress. I have set menus on it . now i want to go on particular section/ template using menu. like if i press contact menu button then it should go smoothly downwards of homepage where the contact template has been called. I am using "Page scroll to id" plugin of wordpress but its not working. I have also seen that this plugin work when the page is created by dashoard page. Please help me , how can i navigate to my template page/section using this plugin. If any other plugin is there , please tell me about it . i will try to use that too.
Thanks
To create smooth scroll on link click follow the below steps :
Step 1: Add section ids in menu href including #section1 from admin section Appearance >> Menu .
Step 2: Create section or div with id name section1.
<div id="section1"></div>
Step 3: Paste the below code under your custom js file.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I hope it will helps you.
Hi I was displaying a confirm navigation when user closed my website like
I used below code to display custom navigation in my website
$(document).ready(function () {
var popit = true;
window.onbeforeunload = function () {
if (popit == true) {
popit = false;
return "Are you sure you want to leave?";
}
}
});
Can anyone suggest me how to customize confirm navigation.
No, it is not possible to style these as they are Browser generated UI. If you want to be able to style a confirmation box or an alert then you will need to use the <dialog> element or some other method - note you will not be able to stop the browser from unloading like you can with and alert or confirm
Thanks for reading. I have some codes on my wordpress site, the first one adds an overlay over an image with a color, the article title and a link to go to the project. The second code adds an ajax pagination using jQuery.
The thing is that i have my projects with images and the jquery overlay owrking perfect, but when they click on the previous projects link that calls the ajax pagination, the jquery overlay stops working.
I have been trying different options, but maybe i'm not on the correct way to solve it. Does anyone has a clue?
Thanks in advance.
The codes:
// PORTFOLIO HOVER EFFECT
jQuery('ul.portfolio-thumbs li').hover(function(){
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
});
// POSTS NAVIGATION
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
I've found the solution in the same day and #BrockAdams helped me with the doubts. I'm putting here the code because it can be helpful for someone.
jQuery('ul.portfolio-thumbs li').live('hover', function(event){
if (event.type == 'mouseenter') {
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
} else {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
}
});
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
You can post answers to your own question.
And, you needed to use live()Doc on the hover, because the pagination presumably loads in new portfolio-thumbs lis.
Without the live(), these new lis would have no events attached to them (unless you re-called jQuery('ul.portfolio-thumbs li').hover after every pagination event).
Live is easier, and avoids the pitfall of having multiple copies of the same event-listener attached to an element.
And, yes, you can use both live() calls (or more) on the same page without problems.