Custom CSS/JS Atom - Not working
-
-
- Sam
- Newbie
- Posts: 5
- Thanks: 0
-
In the past I created a dev site in order to test an upgrade to Joomla 4(J4). Everything seemed to be working correctly but then I noticed some JavaScript wasn't working correctly - specifically a custom scroll down button which I added successfully in Joomla 3(J3).
After looking into the Custom CSS/JS Atom in both my J3 and J4 sites, when I turned off the atom in the J3 site, it acted exactly like the atom J4 atom(which is turned on). It would jump straight to the next section, instead of animating a scroll movement, and the URL changes to /#g-intro. In J4, I tried creating a new Custom CSS/JS Atom and also used the file method rather than inline JS - the issue still persists.
Therefore, my own conclusion is that the Custom CSS/JS atom is broken for me in J4. Does anyone know how to solve this issue?
Best regards,
Sam
-
-
-
- Karol Orzeł
- Elite Rocketeer
- Posts: 4787
- Thanks: 289
- One Crazy Dev
-
Hello Sam,
Thank you for reaching out to us. Your detailed explanation of the issue is helpful.
Firstly, I want to assure you that the Custom CSS/JS atom is generally functional in Joomla 4. There could be a few reasons why it's not working correctly in your specific case. The cause could be anything from a JavaScript conflict with another extension to a simple misconfiguration.
To investigate this further, could you please provide us with your website URL and Joomla admin credentials? You can provide these details securely by using the "Secure Tab" available in our support forum. This will allow us to take a closer look at your settings and diagnose the issue.
Looking forward to your response. - karolorzel.com
-
-
-
- Sam
- Newbie
- Posts: 5
- Thanks: 0
-
Hi Karol,
Thank you for the repsonse. I forgot to mention, I disabled all third-party extensions prior to the upgrade to Joomla 4(except for two template styles that remained turned on), while uninstalling some which were incompatible with J4. I have taken a backup just now incase you encounter any issues.
The credentials are in the Secure tab.
Best regards,
Sam
-
-
-
- Karol Orzeł
- Elite Rocketeer
- Posts: 4787
- Thanks: 289
- One Crazy Dev
-
Hey Sam,
You have this weird css code at the top of the page:
<!-- HTML Codes by Quackit.com --> <!DOCTYPE html> <title>Text Example</title> <style> div.container { background-color: #231f20; } div.container p { text-align: left; font-family: Raleway; font-size: 12.5px; font-style: normal; font-weight: normal; text-decoration: none; text-transform: none; line-height: 16px; color: #ffffff; background-color: #231f20; } </style>
This code is basically breaking all the subpages colors and fonts. Where is it come from? If you delete it, you will notice that both fonts, backgrounds and colors are more close to your original website. - karolorzel.com
-
-
-
- Sam
- Newbie
- Posts: 5
- Thanks: 0
-
Hi Karol,
Thank you for this. I was using a Custom HTML particle with code, as you showed above, that should have been excluded. It has now been deleted and the background colour issue has been resolved.
Regarding, the Custom CSS/JS Atom not functioning correctly, is their a work around for inputting JS on a certain page?
Best regards,
Sam
-
-
-
- Karol Orzeł
- Elite Rocketeer
- Posts: 4787
- Thanks: 289
- One Crazy Dev
-
Hi Sam,
Thing is that Custom CSS/JS atom should work without issues. Maybe the code was invalid? What are you trying to achieve? Can you paste JS code here?
Best, - karolorzel.com
-
-
-
- Sam
- Newbie
- Posts: 5
- Thanks: 0
-
Hi Karol,
The code is the following found from https://codepen.io/nxworld/pen/OyRrGy :
jQuery(function() {
jQuery('a[href*=#]').on('click', function(e) {
e.preventDefault();
jQuery('html, body').animate({ scrollTop: jQuery(jQuery(this).attr('href')).offset().top}, 500, 'linear');
});
});
I have also tried replacing the 'jQuery' with $ sign.
On my live site (Joomla 3), the scroll button JS works without any issues, however since I upgraded my dev site(which is a copy of my live site) to Joomla 4, this Custom CSS/JS Atom does not work using this JS. Both Atoms on my live site and dev site contain the exact same code as seen above.
-
-
-
- Karol Orzeł
- Elite Rocketeer
- Posts: 4787
- Thanks: 289
- One Crazy Dev
-
Hello,
In Joomla 4, the jQuery library is not loaded by default as it was in Joomla 3. This could be the reason your code is not working. Here is a slightly modified version of your code that checks if jQuery is loaded and if not, loads it:
(function(document, script, 'text/javascript', src, defer, internalScript){ internalScript = document.createElement(script); internalScript.type = 'text/javascript'; internalScript.defer = defer; internalScript.src = src; document.getElementsByTagName('head')[0].appendChild(internalScript); })(document, 'script', 'text/javascript', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', true); jQuery(document).ready(function() { jQuery('a[href*=#]').on('click', function(e) { e.preventDefault(); jQuery('html, body').animate({ scrollTop: jQuery(jQuery(this).attr('href')).offset().top}, 500, 'linear'); }); });
This script checks for jQuery, and if it's not found, loads it from the Google CDN. After that, your existing function should work as expected. Be sure to replace 'jQuery' with the '$' symbol in your function if you had it like that originally.
Remember to backup your site before making any changes.
Best Regards,
RocketTheme Support - karolorzel.com
-
-
-
- Sam
- Newbie
- Posts: 5
- Thanks: 0
-
Hi Karol,
Thank you for the explanation and new code. Unfortunately, after replacing the code with yours in the Custom JS Atom, the issue still persists (using 'jQuery' or '$'). I also tried both the inline and file method.
Best regards,
Sam
-
-
-
- Karol Orzeł
- Elite Rocketeer
- Posts: 4787
- Thanks: 289
- One Crazy Dev
- Fixed. Check your premier support ticket.
- karolorzel.com
-
Time to create page: 0.049 seconds