Code customizations in Malgré – Creative Agency Theme

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

Share it in your network:

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

small_c_popup.png

Congratulations!

You have successfully subscribed to my email list. Now you will be recieving latest wordpress tips and tricks directly in your mail box.

Don’t worry! I won’t spam you