The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Code Works in codepen but not in blog post.
P4R4G0N
post Feb 10 2023, 11:39 AM
Post #1





Group: Members
Posts: 3
Joined: 10-February 23
Member No.: 28,799
Hello,
Im new here, so please bear with me if this is not the right place to ask this.

I have a small blogger blog, and I want to add an image comparison slider in my posts.
The problem I'm facing is the code works fine in codepen but when I add it to my blogger post it doesn't, and gives

"Uncaught TypeError: $(...).imagesCompare is not a function"

Below is the code, I can also provide more screenshots and the link for the original code if you want.

CODE
<link rel="stylesheet" href="https://rawcdn.githack.com/Akshat-h/jQuery-Image-compare/726deb3b86a5f83c0855955195e0fe7f4a3680fd/images-compare.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script type="text/javascript" src="https://rawcdn.githack.com/Akshat-h/jQuery-Image-compare/f9a1123c627ee1f48bed97ba22a7f025ad107b4b/jquery.images-compare-1.js"></script>
<script type="text/javascript">
    $(function () {
        var imagesCompareElement = $('.js-img-compare').imagesCompare();
        var imagesCompare = imagesCompareElement.data('imagesCompare');
        var events = imagesCompare.events();

        imagesCompare.on(events.changed, function (event) {
            console.log(events.changed);
            console.log(event.ratio);
            if (event.ratio < 0.4) {
                console.log('We see more than half of the back image');
            }
            if (event.ratio > 0.6) {
                console.log('We see more than half of the front image');
            }

            if (event.ratio <= 0) {
                console.log('We see completely back image');
            }

            if (event.ratio >= 1) {
                console.log('We see completely front image');
            }
        });

        $('.js-front-btn').on('click', function (event) {
            event.preventDefault();
            imagesCompare.setValue(1, true);
        });

        $('.js-back-btn').on('click', function (event) {
            event.preventDefault();
            imagesCompare.setValue(0, true);
        });

        $('.js-toggle-btn').on('click', function (event) {
            event.preventDefault();
            if (imagesCompare.getValue() >= 0 && imagesCompare.getValue() < 1) {
                imagesCompare.setValue(1, true);
            } else {
                imagesCompare.setValue(0, true);
            }
        });
    });
</script>


<div class="page-container">
    <div class="js-img-compare">
        <div style="display: none;">
            <span class="images-compare-label">Before</span>
            <img src="https://freesvg.org/img/1286146771.png" alt="Before">
        </div>
        <div>
            <span class="images-compare-label">After</span>
            <img src="https://freesvg.org/img/navyblue.png" alt="After">
        </div>
    </div>
    <div>
        <button class="btn js-front-btn">Show front image</button>
        <button class="btn js-back-btn">Show back image</button>
        <button class="btn js-toggle-btn">Toggle</button>
    </div>
</div>






Please help me with it to ake it work.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Feb 11 2023, 12:58 AM
Post #2


Advanced Member
****

Group: Members
Posts: 103
Joined: 25-December 22
Member No.: 28,719
Did you say Blogger? It's possible their content security policy is blocking the scripts since they're not set to crossorigin nor have a checksum. Is there any indication of that in your browser's log/console?

Though this is another example of why dislike jQuery so much.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
P4R4G0N
post Feb 11 2023, 04:31 AM
Post #3





Group: Members
Posts: 3
Joined: 10-February 23
Member No.: 28,799
Thank you very much for the replay.
Yes unfortunately have to make it work in blogger.

Here I'm attaching console screenshots.

IPB Image


IPB Image

And here is the codepen link where you can see it works as intended.

https://codepen.io/randomuser13/pen/mdjZBwX
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Feb 13 2023, 12:30 AM
Post #4


Advanced Member
****

Group: Members
Posts: 103
Joined: 25-December 22
Member No.: 28,719
I think I see the problem, but if it's what I think Codepen is doing something really screwing to make things work.

If the script is in the <body> of the document before the element it's trying to access, that element does not exist yet. Thus your error. that (jQuery rubbish) $() is returning null because that <div> doesn't even exist yet. Thus it doesn't have the method you're trying to call.

This is why good scripting waits for onload, or is placed right before the </body> tag after any and all static content.

So the likely solution to your problem? Move the static inlined script AFTER the markup instead of before it.

CODE
<link rel="stylesheet" href="https://rawcdn.githack.com/Akshat-h/jQuery-Image-compare/726deb3b86a5f83c0855955195e0fe7f4a3680fd/images-compare.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://rawcdn.githack.com/Akshat-h/jQuery-Image-compare/f9a1123c627ee1f48bed97ba22a7f025ad107b4b/jquery.images-compare-1.js"></script>


<div class="page-container">
    <div class="js-img-compare">
        <div style="display: none;">
            <span class="images-compare-label">Before</span>
            <img src="https://freesvg.org/img/1286146771.png" alt="Before">
        </div>
        <div>
            <span class="images-compare-label">After</span>
            <img src="https://freesvg.org/img/navyblue.png" alt="After">
        </div>
    </div>
    <div>
        <button class="btn js-front-btn">Show front image</button>
        <button class="btn js-back-btn">Show back image</button>
        <button class="btn js-toggle-btn">Toggle</button>
    </div>
</div>


<script>
    $(function () {
        var imagesCompareElement = $('.js-img-compare').imagesCompare();
        var imagesCompare = imagesCompareElement.data('imagesCompare');
        var events = imagesCompare.events();

        imagesCompare.on(events.changed, function (event) {
            console.log(events.changed);
            console.log(event.ratio);
            if (event.ratio < 0.4) {
                console.log('We see more than half of the back image');
            }
            if (event.ratio > 0.6) {
                console.log('We see more than half of the front image');
            }

            if (event.ratio <= 0) {
                console.log('We see completely back image');
            }

            if (event.ratio >= 1) {
                console.log('We see completely front image');
            }
        });

        $('.js-front-btn').on('click', function (event) {
            event.preventDefault();
            imagesCompare.setValue(1, true);
        });

        $('.js-back-btn').on('click', function (event) {
            event.preventDefault();
            imagesCompare.setValue(0, true);
        });

        $('.js-toggle-btn').on('click', function (event) {
            event.preventDefault();
            if (imagesCompare.getValue() >= 0 && imagesCompare.getValue() < 1) {
                imagesCompare.setValue(1, true);
            } else {
                imagesCompare.setValue(0, true);
            }
        });
    });
</script>


Also this being 2023 not 2013, I'd kill off the pointless redundant type="text/javascript".

Though again this is a great example of why I think jQuery is bloated trash. I would put the time in to redo this as vanilla markup, possibly with less DIV soup, classes for nothing, and so forth. Easily twice or more the code needed to do the job on this.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
P4R4G0N
post Feb 14 2023, 03:54 AM
Post #5





Group: Members
Posts: 3
Joined: 10-February 23
Member No.: 28,799
I tried setting it up in a few different ways but it still shows the same error.
I guess it's better to not waste more time on this and move on to other things.

Thank you very much again for your time.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 07:01 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC