Docs

[theglowstudio]

Hi there,

This might be something the community can help with. I’ve written some custom JS that ties in with elements created by a page template. Basically it resizes square portfolio previews automatically when the document loads and when it is resized. I’ve tested the functionality outside of WordPress and it works absolutely fine, however when I add it to my theme it doesn’t seem to work.

I’ve tried adding the JS to the footer of the x-theme as well as in the custom JS field in the theme customiser. I’ve also tried calling the resize and load events with standard .onLoad & .onResize events, as well as using the addListenerEvent function. Neither of these work. I’ve tried similar methods using the jQuery Library and had the same results.

Any ideas or pointers in the right direction would be greatly appreciated, I’m pretty confused at this point. My only guess is that some JS already built into the theme is stopping my custom scripts from running? I’ve double checked the tags from my custom template file and they all match up.

JS:

var els = document.getElementsByClassName('portfolio-preview');
    var text = document.getElementsByClassName('description');
    var overlay = document.getElementsByClassName('portfolio-overlay');

    function createSquareItems() {

        var elements = document.getElementsByClassName('portfolio-preview');
        var descriptions = document.getElementsByClassName('description');
        var overlay = document.getElementsByClassName('portfolio-overlay');

        for (var step = 0; step < (elements.length); step++) {
            elements[step].style.height = elements[step].offsetWidth;

            var padding = (elements[step].offsetWidth / 2 - (descriptions[step].offsetHeight / 2));

            overlay[step].style.paddingTop = padding;
//            out.innerHTML = padding;
        }

    }

//    window.addEventListener('load', createSquareItems, false);
//    window.addEventListener('resize', createSquareItems, false);
//    window.onload = createSquareItems;
//    window.onresize = createSquareItems;
    var foobar = document.getElementById('foobar');
    var foo = document.getElementById('foo');
    var bar = document.getElementById('bar');

    $(document).ready(function () {
        $(window).on('resize', function () {
            createSquareItems();
        });
    });

PHP Template output:

<article id="<?php the_ID() ?>" class="portfolio-preview" style="">

                    <img src="<?= the_post_thumbnail_url('full'); ?>" />
                    <a href="#" id="foo" class="portfolio-overlay" style="background-color: <?= random_background(); ?>;">
                        <p class="description" id="bar"><?= the_title(); ?></p>
                    </a>
                </article>

[Christian]

Hey there,

Try changing $ to jQuery.

Thanks.

[theglowstudio]

Hi There,

Thanks for the suggestion, unfortunately this hasn’t resolved my problem, the boxes still don’t resize automatically.

Code used:

jQuery(document).ready(function () {
        jQuery(window).on('load', function () {
            createSquareItems();
        });
        jQuery(window).on('resize', function () {
            createSquareItems();
        });
    });

[Christian]

It looks like you might be having an issue with a third party plugin or script. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[Author]

Posts