0

I just launched my website : https://lise-whales.com/

Joomla 3.9.28

Astroid Framework 2.5.2

Astroid Template One 1.3.2

I want to use Featherlight lightbox with JS script

So I past before the </head in Astroid custom code area

<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />

and before </body in Astroid custom code area (see attached picture)

<!DOCTYPE html>
<!-- Featherlight -->
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<!-- End - Featherlight -->

But before that, I'm trying to understand how use basic JS I'm working on a basic example from Stackoverflow

On my home page I have this link whick works fine alone and links to my second page

<a id="ali" alt="Ali" href="https://lise-whales.com/page-fl">Link</a>

Then, when I place my code in the JS custom code of Astroid to make my ID "ali" to change the href to stackoverflow web site, it doesn't work

$(document).ready(function() {
$("#ali").attr("href","https://stackoverflow.com");
});

I also used

jQuery(document).ready(function($) {

as an alternative, but it still doesn't work

What I am doing wrong ?

Where should I put my JS code ?

Thanks

Lise

Here are the pictures from my Astroid Template Custom Code Area.

Code for Featherlight in Astroid Custom area

My JS Code

Improve this question
1

this is not a full answer by any means, but are you sure the JQuery is working? I had to use jQuery('selector') instead of $('selector') to make mine work.

Improve this answer
2
  • This is a common solution in Joomla - the $ alias for jQuery clashes with other JS libraries Joomla users, so in the past I've had to often implement jQuery using jQuery('selector') instead of $('selector')
    – Patrick Jackson
    Jul 28 '21 at 0:44
  • Thank you. Indeed, I should use jQuery('selector') instead of $('selector') . And I did using : jQuery(document).ready(function() { jQuery("#ali").attr("href","stackoverflow.com"); }); I placed it in the JS custom code of Astroid. It didn't work. I placed it between <script></script> at the end of the article. It didn't work either. I don't understand what I'm doing wrong. This is new to me. I read that I should call JHtml::_('jquery.framework'); ???
    – Lise
    Jul 28 '21 at 1:11
0

The problem is that you are trying to load jQuery after your small script to change the href value.

I'm going to suggest simply not using jQuery, as it's pointless for what you need, and instead use simple, native Javascript:

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('ali').setAttribute('href', 'https://stackoverflow.com');
});

If you need IE support:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('ali').setAttribute('href', 'https://stackoverflow.com');
});
Improve this answer
0

Lodder,

it works !!!

I used your first native Javascript in the JS custom of Astroid and it worked perfectly

And, regarding your comment on loading jQuery after script, I decided to try to place my custom JS in a separate file (monjs.js) that I placed in /media/system/js/ and I called in the head using this script :

<!-- Mon JS -->
<script type="text/javaScript" src="/media/system/js/monjs.js"></script>
<!-- End - Mon JS -->

I simply placed your script in the file and it works fine as well

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('ali').setAttribute('href', 'https://stackoverflow.com');
});

But, If I replace it by

jQuery(document).ready(function() {
jQuery("#ali").attr("href","https://stackoverflow.com");
});

It doesn't work.

I agree with you. Using jQuery to change a link is pointless. For me, it was just a way to know how to use jQuery properly.

My purpose was to learn what script could work and where to put it properly.

I want to use jQuery because I want to use Featherlight and link to an open lightbox making sure the page where the page where my lightbox is called is loaded in the background. And for what I understood I could manage it using jQuery.

But it looks like I can't even call simple jQuery scripts. I have to convert it to JavaScript.

Well, that's something I'm going to learn and try.

Thank you to you all

Lise

Improve this answer
0

I get back to you because I found another solution to solve my problem AND use jQuery script.

I placed

JHtml::_('jquery.framework');

inside the php tag before 'head' in the index.php of my template

<?php

/**
 * @package   Astroid Framework
 * @author    JoomDev https://www.joomdev.com
 * @copyright Copyright (C) 2009 - 2020 JoomDev.
 * @license https://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
 */
// No direct access.
defined('_JEXEC') or die;
defined('_ASTROID') or die('Please install and activate <a href="https://www.astroidframework.com/" target="_blank">Astroid Framework</a> in order to use this template.');

if (file_exists(__DIR__ . "/helper.php")) {
   require_once __DIR__ . "/helper.php"; // Template's Helper
}

JHtml::_('jquery.framework');

$document = Astroid\Framework::getDocument(); // Astroid Document
// Output as HTML5
$this->setHtml5(true);
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">

<head>
...
</head>

</html>

This way, I can use jQuery scripts directly inside my custom JS file monjs.js

jQuery(document).ready(function(){
jQuery("#ali").attr("href","https://stackoverflow.com");
});
Improve this answer
1
  • Please understand that when you post an answer, you are not "getting back to someone"; nor should you attempt to reply to another answer with a new answer. Please take our tour to understand that Stack Exchange communities are not designed like old forums. Here, there is only one question and potentially multiple answers. Answers must not be posted as a way of communicating to another answer.
    – mickmackusa ♦
    Jul 29 '21 at 3:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.