Hi. I am doing a site rebuild by basically moving bootstrap stuff listed in Wordpress (via text editor) over to using Elementor page builder. Basically, the previous developer just custom coded everything and not really using Wordpress default editor or plugins.
One of the element is on the home page which has 4 different canvas scripts using the tag. I was able to get it to work for desktop but not for mobile.
Here’s the link to the live site.
As you can see that it works for all devices including desktop and mobile.
But if you view the dev site, it does not work for mobile devices. Works fine for desktop but just not for mobile.
I spent a few hours trying to figure it out but I never worked with and so I don’t know if there is a javascript, css or some other file missing that I failed to move over.
I am running the latest version of Wordpress and PHP. Since I do not know much about the related files/code, I cannot say what version they are.
I am not seeing it working on desktop either for the dev site. In fact, I don’t even see canvas elements in the page. Just empty divs with ids of main_overlay and platform_overlay. Are you sure this is working on the desktop? I tried both Chrome and Firefox latest versions.
Is the element behind some kind of is_user_logged_in() check in WordPress? Do you have some kind of content restriction plugin or some other kind of paywall option in Elementor that might be turned on? I am not at all familiar with elementor, but what I am seeing here is telling me that for some reason the canvas element is being stripped out. If you see it behind login, then perhaps it is being restricted by elementor itself (or a WordPress custom function/plugin/shortcode). It might also be the reason why it might not be shown on mobile. Find the code that inserts the canvas element and I bet there is some kind of restrictions on it. The mobile problem might also be related to media queries. If the element is there behind login, perhaps a media query is hiding it on mobile resolutions (aka display: none;)
Not sure if that is it because it’s not actually showing the as being rendered. So I am thinking it has to be jquery or some javascript code snippet that I am missing or possibly a conflict with the core jquery. I will have to just look at that on Monday. Meanwhile, if somethings comes to your mind that might help, please let me know. Thank you.
Well the fact that you see it while logged in and not see it while logged out is certainly something more server side than client side. Unless the logged-in, logged-out is adding some kind of client side code that is then removing the element. But it is not simply hidden or not displayed through CSS… it appears the whole element is not in the DOM. Again it would be more likely server-side than jQuery. Not out of the possibility, but I would be looking more in that direction than javascript.
Here’s a test page on the same server but outside of Wordpress. You can see that it’s working. I am thinking that it has something to do with the Elementory page builder. I just don’t know. I will send them a support ticket to see if they can make sense of what’s happening
After making various changes to the jquery file, I never could get it to work. When Marty2 pointed out that the html and scripts were missing or could not be found in the source, I revisited that area to make sure that was the case and I could never figure out why it was missing. After doing a compare between being logged in versus being logged out, the canvas code showed up and works when I am logged in. However, when not logged in, both the canvas code and the related scripts did not appear in the source at all. I said, “Why NOT?”
After yanking a few more strands of hair from my head, I finally figured out that it was one of the widgets for Elementor page builder. Initially, I used the ‘Custom HTML’ widget to display those canvases and scripts. So I looked to see if there were another similar widget I could use and sure enough there was one called ‘HTML’. Once I moved all my codes over to that widget, my animated canvas code start to work. Yeah!!!
I would appreciate anyone here to view this link to verify that it is working for you too.
