Docs

[dsm_wp]

Good morning!

I am trying to implement custom JS (which works fine in Codepen) on Xtheme to use instead of Isotope (can not get it to center properly). Only the JS I am using will not work at all. I have placed it in my “Custom JS” for the page I want it applied to, and the code looks like this:

var box = jQuery('.box'),
    boxContainer = jQuery('.boxes'),
    section = jQuery('.sort-section'),
    containerHeight = jQuery('.adjustable-height'),
    boxClassFilter,
    showThese;

jQuery('button').on('click', function(){  
    boxClassFilter = jQuery(this).data('filter');
    showThese = boxContainer.find('.box' + '.' + boxClassFilter);
    var sectionHeight = section.height();
    
    jQuery('.tag-container').find('button.selected').removeClass();
    jQuery(this).toggleClass('selected');
    
    var tl = new TimelineLite()
    .to(box, 0.5, {scale:0, opacity:0, ease: Power3.easeOut})
    .set(box, {display:'none'})
    .set(showThese, {display:'block'})
    .to(showThese, 0.8, {scale:1, opacity:1, ease: Power3.easeOut}, '+=0.1')
    .fromTo(section, 1, {height:'sectionHeight', ease: Power3.easeOut},  {height:'initial', ease: Power3.easeIn}, '-=1');

    if (boxClassFilter == 'all') {    
        var allTL = new TimelineLite()
            .set(section, {height:sectionHeight})
            .to(box, 0.5, {scale:0, opacity:0, ease: Power3.easeOut})
            .set(box, {display:'none'})
            .set(box, {display:'block'})
            .to(box, 0.8, {scale:1, opacity:1, ease: Power3.easeOut}, '+=0.1')
           .fromTo(section,1 , {height:'sectionHeight', ease: Power3.easeOut},  {height:'initial', ease: Power3.easeIn}, '-=1');
    }
          
});

This JS is applied to the following HTML:

<section class="sort-section">
    <div class="tag-container">
        <button class="selected" data-filter="all">all</button>
        <button data-filter="pink">pink</button>
        <button data-filter="green">green</button>
        <button data-filter="orange">orange</button>
        <button data-filter="blue">blue</button>
    </div>
    <div class="boxes">
        <div class="box blue"></div>
        <div class="box pink"></div>
        <div class="box green"></div>
        <div class="box blue"></div>
        <div class="box pink"></div>
        <div class="box orange"></div>
        <div class="box blue"></div>
        <div class="box green"></div>
        <div class="box orange"></div>
        <div class="box blue"></div>
        <div class="box pink"></div>
        <div class="box green"></div>
    </div>
</section>

As I said, the JS works fine in Codepen so I’m not sure why it’s refusing to work in Xtheme.

[dsm_wp]

This reply has been marked as private.

[Rupok]

Hi there,

Your script returning an error – http://prntscr.com/cvgilh

Make sure the code is complete and if it have any dependency then that’s also loaded.

Thanks!

[dsm_wp]

Hello and thank for the response!

This is the codepen it’s running from https://codepen.io/MandyMadeThis/pen/dGQxaN

I’ll have to comb through and make sure I didn’t lose something in translation

[dsm_wp]

Is “TimelineLite” included with Xtheme? It’s a component of GreenSock

[Rupok]

Hi there,

Thanks for writing back. As mentioned on previous reply, there is another dependency that you didn’t load – http://prntscr.com/cvhxee

You can try adding the script using Child Theme‘s functions.php :

add_action( 'wp_footer', 'custom_page_script' );

function custom_page_script(){
      echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js">';
}

Hope this helps.

[dsm_wp]

Where should this go in the functions.php?

[Rupok]

Hi there,

Let’s place this at the bottom of all code in your functions.php

Thanks!

[dsm_wp]

When I place this at the bottom of my PHP file, live viewer in Cornerstone no longer works. Did I put this in wrong?

[Rupok]

Hi there,

Thanks for writing back. I can’t see the code on your functions.php so can’t say either you added this correctly or not. But using such script is not recommended within WordPress. As you are using WordPress, you should look for some WordPress plugin to accomplish this instead of hard coding scripts to theme as it might cause unexpected script error that eventually might break something. So instead of using such raw code, use plugins and there are lot of free plugins out there in repository to accomplish such filtering.

Hope this makes sense.

[Author]

Posts