Site logo

Archived topic

ACF field / JS not working with Generatepress

3 replies · Started by Victor on November 16, 2020

Viewing posts 1–4 of 4

Hello,

I am trying to make a ACF slider work with Generatepress theme. I copied all the code and files from the old site to the new one. I manually included all JS files. But still, can't make the slider to change when clicking on other tabs. However, the script involved seems to be:

<script>jQuery(".tabs > li > a").click(function(){jQuery(".tabs > li").removeClass("active");jQuery(this).parent().addClass("active");var hr=jQuery(this).attr("href").substring(1);jQuery(".tabs-content .content").removeClass("active");jQuery(".tabs-content #"+hr).addClass("active");});jQuery("a[href^=#]").on("click",function(e){e.preventDefault();history.pushState({},"",this.href);});jQuery(".btn-learn").click(function(){jQuery('.your-class').slick('slickPause');});</script> <script type=text/javascript>jQuery(document).ready(function(){jQuery('.your-class').slick({infinite:true,slidesToShow:1,slidesToScroll:1,autoplay:true,autoplaySpeed:7000,dots:false,customPaging:function(slider,i){return'<img data-opt-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-4a9rjdaw/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-active.png    data-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-4a9rjdaw/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-active.png class="dot-active lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img data-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-4a9rjdaw/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-active.png class="dot-active lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></noscript><noscript><img src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-4a9rjdaw/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-active.png class=dot-active /></noscript><img data-opt-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-m8wQECjy/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-deactive.png   data-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-m8wQECjy/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-deactive.png class="dot-deactive lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /><noscript><img data-src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-m8wQECjy/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-deactive.png class="dot-deactive lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></noscript><noscript><img class=dot-deactive src=https://mlwehkxtrnet.i.optimole.com/1LaRft4-m8wQECjy/w:auto/h:auto/q:auto/https://www.ytranslations.com/wp-content/uploads/2017/06/dot-deactive.png /></noscript>';},});jQuery('.btn-learn').on('click',function(event){event.preventDefault();jQuery('.your-class').slick("slickSetOption","autoplay",false,false);jQuery(this).parent().find('.slide-content').find('p').css("height","auto");jQuery(this).hide();});});jQuery(document).ready(function(){jQuery('.team-slide').slick({infinite:true,slidesToShow:3,slidesToScroll:3,autoplay:true,dots:false,responsive:[{breakpoint:1024,settings:{slidesToShow:3,slidesToScroll:3,infinite:true,dots:true}},{breakpoint:600,settings:{slidesToShow:2,slidesToScroll:2}},{breakpoint:480,settings:{slidesToShow:1,slidesToScroll:1}}],prevArrow:jQuery('.slick-prev'),nextArrow:jQuery('.slick-next'),});});</script> <script type=text/javascript>jQuery(document).ready(function(){var bar1=new ProgressBar.Line(container1,{strokeWidth:4,easing:'easeInOut',duration:1400,color:'#FFEA82',trailColor:'#e6e8ec',trailWidth:1,svgStyle:{width:'35%',height:'70px'},from:{color:'#FFEA82'},to:{color:'#FFA76C'},step:(state,bar1)=>{bar1.path.setAttribute('stroke',state.color);}});var bar2=new ProgressBar.Line(container2,{strokeWidth:4,easing:'easeInOut',duration:1400,color:'#FFEA82',trailColor:'#e6e8ec',trailWidth:1,svgStyle:{width:'38%',height:'70px'},from:{color:'#FFEA82'},to:{color:'#DA484A'},step:(state,bar2)=>{bar2.path.setAttribute('stroke',state.color);}});var bar3=new ProgressBar.Line(container3,{strokeWidth:4,easing:'easeInOut',duration:1400,color:'#FFEA82',trailColor:'#e6e8ec',trailWidth:1,svgStyle:{width:'43%',height:'70px'},from:{color:'#FFEA82'},to:{color:'#EA582F'},step:(state,bar3)=>{bar3.path.setAttribute('stroke',state.color);}});var bar4=new ProgressBar.Line(container4,{strokeWidth:4,easing:'easeInOut',duration:1400,color:'#FFEA82',trailColor:'#e6e8ec',trailWidth:1,svgStyle:{width:'45%',height:'70px'},from:{color:'#FFEA82'},to:{color:'#FF7149'},step:(state,bar4)=>{bar4.path.setAttribute('stroke',state.color);}});jQuery(window).scroll(function(){var top_of_element=jQuery(".skills-sec").offset().top;var bottom_of_element=jQuery(".skills-sec").offset().top+jQuery(".skills-sec").outerHeight();var bottom_of_screen=jQuery(window).scrollTop()+jQuery(window).height();var top_of_screen=jQuery(window).scrollTop();if((bottom_of_screen>top_of_element)&&(top_of_screen<bottom_of_element)){jQuery('#container5 .vertical-fill').css('height','211px');jQuery('#container6 .vertical-fill').css('height','202px');jQuery('#container7 .vertical-fill').css('height','178px');jQuery('#container8 .vertical-fill').css('height','164px');bar1.animate(1.0);bar2.animate(1.0);bar3.animate(1.0);bar4.animate(1.0);}
else{}});});</script> </script>

The slide is working as expected if I insert the code inside add_action( 'wp_head', function () { in Code Snippets plugin.

Do you have any ideas what can I do?

Thank you .
Victor

This script is what the working site is using:

<script>
jQuery(".tabs > li > a").click(function(){jQuery(".tabs > li").removeClass("active");jQuery(this).parent().addClass("active");var hr=jQuery(this).attr("href").substring(1);jQuery(".tabs-content .content").removeClass("active");jQuery(".tabs-content #"+hr).addClass("active");});jQuery("a[href^=#]").on("click",function(e){e.preventDefault();history.pushState({},"",this.href);});
</script>

That should be added to the WP_footer hook as the code needs to come after the Tabs HTML is output.

It, works, thank you David.

Glad to hear that!

This archived topic is closed to new replies.