Need Wappler Expert Help

[Webjack357]

Hi,
I redesigned a client web site with Wappler where there’s a script (from phpjabbars) I am using as a catalog (My next step is to rebuild this catalog with Wappler).
But till then, there is a strange issue that, according to phpjabbers is most likely caused by something in the page code
.
The problem: After clicking a image in the catalog this open a Lightbox that show on top of the page but scrolling the images is causing the Lightbox to move down the page and visitors have to scroll down to get back to images again and this is annoying particularly on cellphones. There was no such issue before rebuilding the site design with Wappler.
See here: https://vr-surlepouceinc.com/location.php?controller=pjListings&action=pjActionView&id=10

So I am asking for some help from the experts here, if someone would be kind enough to take a look at it and at least give me a hint about what is causing this.

Any help will be much appreciated.

Thank you very much

[the_coder]

There is a conflict somewhere between the lightbox script you are currently using and the dmx smooth-scroll script. If you comment out the smooth-scroll script it doesnt happen.

A sticking plaster solution as you seem to require smooth scroll on the page for the ‘Contact’ section - add your own smooth-scroll jQuery at the end of your document (just for that page) AFTER the link to the bootstrap.min.js file

<script>
$(document).ready(function(){
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>

HOWEVER that won’t work unless you also include the FULL jQuery library instead of the slim library you have currently linked. Below is a link to the full jQuery library although I would recomend getting the link directly from a CDN source as that will include all the other security garble you should include in the link.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Remove or comment out the dmx smooth-scroll script on the page.

The problem with using scripts sourced from different providers or those that are free is that there is a possibility that conflicts can happen.

Your code needs some care and attention really as it has additional tags on line No 254, that might even be attributing to the issue, but I doubt it. Plus Im sure you would really want to group the dmx js files all together and move the css file to a more appropriate location.

Maybe dmx has a better/simpler solution to negate the conflict problem - scrolling to the top of the page seems to happen if you click on the next/previous arrows included at either end of the strip of images too.

[Teodor]

Actually you don’t need any bloated jquery solutions and we recommend avoiding jquery as much as you can.

You have included the smooth scroll component on your page, and by default it targets all the links which start with #:

Your custom lightbox script uses # as a value for the href attribute for its buttons, why - that’s a mystery

If you are not using smooth scroll on your page, just remove it. If you are using it, you can add a more specific selector in the UI:

So you can add a class to your links where you want to use smooth scroll, for example class="smooth-scroll" and enter it in the UI:

This way the smooth scroll component will only be active for these links , having this specific class

[the_coder]

That’s weird since Bootstrap is your main front end bloated framework which doesnt work without jQuery (yet) and wont for a couple of years at least…hummm go figure!

[Teodor]

Nothing is weird. You don’t need the whole jQuery library included for something that does not even require jQuery… and none of the App Connect components does.
Bootstrap 4 requires only the slim version of it.

BTW I am not going to discuss Bootstrap here as you do with the other 3 old guys at DW forum if you don’t like it don’t use it.

[the_coder]

Just seems quite strange to me that your dead set against jQuery when Wappler chooses Bootstrap over something like Materialise that doesnt use jQuery, maybe a bad choice given your preferences. I’m dead set against Bootstrap for good reason like you seem to be about jQuery. Choose your poison.

[Webjack357]

I was indeed suspecting the smooth scrolling component but was not sure how to deal with it so I will try with your solution.
And thank again Teodor for your “always” great support

[the_coder]

At least I got a response for you as I saw you had been waiting over an hour and I know Teodor just doesnt like me coming up with a coded solution so I knew he was likely to respond. I woud say they need to look at their js because the solution I posted also use the # and there is NO conflict.

[Teodor]

Probably it’s me, as I am not a native English speaker and I am not properly expressing myself but I already provided a solution, which is integrated in the UI of Wappler.

We can provide custom coding for literally EVERYTHING out there and that’s not the point of our community. We are not stackoverflow and the software we provide uses UI controls to do most of the things.

More, I already explained that you don’t need the bloated jQuery framework to do something simple that does not require jQuery…

[Webjack357]

Thank you too The_coder, it is very reassuring to see member like you trying to help others, this is a great value on this platform!

[the_coder]

Cheers Webjack357

Im not welcome here because Im a coder but I feel the frustration at times.