Why isn't jQuery functioning on mobile but works on PC?

Solved

Why isn't jQuery functioning on mobile but works on PC?

nagrebeckiy
Shopify Partner
2 1 0

nagrebeckiy_0-1697820606187.png

It works properly on my PC. 

 

And how it looks on mobile iPhone/Android.

nagrebeckiy_1-1697820707878.png

 

Theme version Dawn 5.0.0

 

How jQuery file included :

nagrebeckiy_2-1697820808481.png

 

My js code in custom section:

<script type="application/javascript" async>
const
$container = $(document).find(".loop-container"),
$texts = $container.find(".js-text-slider"),
$images = $container.find(".js-image-slider"),
$buttons = $container.find(".js-button-slider"),
$toggles = $container.find(".js-toggle-item");
hideAll();
$texts.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$buttons.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$images.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).removeClass("hidden");
}
});
$toggles.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).addClass("active");
}
});
function toggleSliderClick(toggle) {
let index = toggle.attr("loop-index") - 1;
resetActiveToggles();
toggle.addClass("active");
hideAll();
$texts.eq(index).show();
$buttons.eq(index).show();
$images.eq(index).removeClass("hidden");
}
function resetActiveToggles() {
$toggles.removeClass("active");
}
function hideAll() {
$texts.hide();
$buttons.hide();
$images.addClass("hidden");
}
$toggles.each(function () {
$(this).unbind("click").on("click", function (event) {
event.preventDefault();
toggleSliderClick($(this));
});
});
</script>

 

Accepted Solution (1)

nagrebeckiy
Shopify Partner
2 1 0

This is an accepted solution.

Well, thanks everyone for help. I`ve found the solution by myself. Added full CDN path from 3.7.1 jQuery version. Didn't change anything in it and it works 😃

nagrebeckiy_0-1698040998213.png

 

View solution in original post

Replies 2 (2)

PageFly-Oliver
Shopify Partner
878 190 182

Hi @nagrebeckiy ,

 

I think you can use

 

<script>
 $(document).ready(function(){
 if (jQuery) { 
    const
$container = $(document).find(".loop-container"),
$texts = $container.find(".js-text-slider"),
$images = $container.find(".js-image-slider"),
$buttons = $container.find(".js-button-slider"),
$toggles = $container.find(".js-toggle-item");
hideAll();
$texts.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$buttons.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).show();
}
});
$images.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).removeClass("hidden");
}
});
$toggles.each(function(i) {
if ( i === {{ section.settings.default_toggle_id }} ) {
$(this).addClass("active");
}
});
function toggleSliderClick(toggle) {
let index = toggle.attr("loop-index") - 1;
resetActiveToggles();
toggle.addClass("active");
hideAll();
$texts.eq(index).show();
$buttons.eq(index).show();
$images.eq(index).removeClass("hidden");
}
function resetActiveToggles() {
$toggles.removeClass("active");
}
function hideAll() {
$texts.hide();
$buttons.hide();
$images.addClass("hidden");
}
$toggles.each(function () {
$(this).unbind("click").on("click", function (event) {
event.preventDefault();
toggleSliderClick($(this));
});
});
}
}
</script>

 



Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

nagrebeckiy
Shopify Partner
2 1 0

This is an accepted solution.

Well, thanks everyone for help. I`ve found the solution by myself. Added full CDN path from 3.7.1 jQuery version. Didn't change anything in it and it works 😃

nagrebeckiy_0-1698040998213.png