I was using Malgré – Creative Agency Theme for creating agency website (https://shefamarketing.com/) for my client. But she asked me that on this demo page : https://malgre.qodeinteractive.com/interactive-portfolio/, She wanted the boxes auto hovered after 3 seconds in mobile only. Also, she wanted that user only go the related link if it press the box 2nd time. For pressing first time, user should only see the hovered version. so for doing these 2 tasks, here is the little jQuery code that I used:
<script>
jQuery('article.qodef-fsg-item.qodef-fade-out-cover.qodef-remove-cover.qodef-ready.hovered').addClass('vickzee')
jQuery('article.qodef-fsg-item').click(function(){
if(jQuery('body').attr('data-elementor-device-mode') == 'mobile'){
if(jQuery(this).hasClass('hovered')){
}
var firsst_url = jQuery('.qodef-fsg-holder-inner article:first-child').find('a.qodef-block-drag-link').attr('href')
var select_url = jQuery(this).find('a.qodef-block-drag-link').attr('href')
if( firsst_url == select_url){
location.href = firsst_url;
}
if(jQuery(this).hasClass('vickzee')){
var urldd = jQuery('.vickzee').find('a.qodef-block-drag-link').attr('href')
console.log(urldd,'sss')
location.href = urldd;
}
else {
jQuery('article.qodef-fsg-item').removeClass('vickzee')
jQuery(this).addClass('vickzee')
return false;
}
}
})
var counter = -1;
var counter_img = -1;
function AddHoverClass() {
if(jQuery('body').attr('data-elementor-device-mode') == 'mobile'){
var arti = jQuery('.qodef-fsg-item');
var artiLength = arti.length - 1;
counter < artiLength ? counter++ : counter=0;
arti.removeClass('hovered').eq(counter).addClass('hovered');
var arti_img = jQuery('.qodef-image-url-holder-inner');
var artiLength_img = arti_img.length - 1;
counter_img < artiLength_img ? counter_img++ : counter_img=0;
arti_img.removeClass('hovered').eq(counter_img).addClass('hovered');
}
}
setInterval(AddHoverClass, 3000);
</script>
Note:
So, if you are using same theme and wanna achive same functionality in same demo page, Use it as it is 🙂
Enjoy