Total noob question, but my js file won't work

For Joomla! 2.5 Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general
Note: All 1.6, 1.7 and 3.5 releases have reached end of life and should be updated to 3.x.

Moderator: ooffick

Forum rules
Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.
Locked
gjledger_2k
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Wed Feb 08, 2012 9:24 pm

Total noob question, but my js file won't work

Post by gjledger_2k » Thu Aug 28, 2014 5:23 pm

I created a javascript file funcWidth.js and added it to my template/js folder. Then I added

Code: Select all

$gantry->addScript('figureWidth.js');
to the head of the index.php file.

The javascript

Code: Select all

window.addEvent('domready',function() {

var figs = document.getElementsByTagName("figure");
var imgs = document.getElementsByTagName("img");

for (var j = 0; j < figs.length; j++) {
  figs[j].style.width = imgs[j].getAttribute("width")+"px";   
}
});
is supposed to grab the attribute from the img element and add a style to the figure element (that way the figure caption will be be the same width as the image.

It doesn't work. When I check firebug, the figure is set to 460px wide. It says the style is coming from element.style, which means it is hardcoded in the html, but that's not true.

I would really like to stick with straight javascript. P.S. the code worked fine sans window load on JSFiddle.

Any insights?

waarnemer
Joomla! Hero
Joomla! Hero
Posts: 2954
Joined: Sun May 04, 2008 12:37 pm

Re: Total noob question, but my js file won't work

Post by waarnemer » Fri Aug 29, 2014 8:58 am

click right, check source and look for the link to that script, open it and check if you see the correct code, if not, you need to adjust the path... in the "addScript".

gjledger_2k
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Wed Feb 08, 2012 9:24 pm

Re: Total noob question, but my js file won't work

Post by gjledger_2k » Sat Aug 30, 2014 1:10 am

Thank you. It turns out, the issue was with my program.

Here is the corrected javascript that works:

Code: Select all

window.addEventListener('load',function() {
//makes array of all figures and all elements
var figs = document.getElementsByTagName("figure");
var imgs = document.getElementsByTagName("img");
//this part looks at the images to see if their parent elements are figures and if so, puts them into a new array
var imgList = [];
for (var i = 0; i < imgs.length; i++) {
    if (imgs[i].parentNode.nodeName === "FIGURE") {
        imgList.push(imgs[i]);
    }
}
for (var j = 0; j < figs.length; j++) {
  figs[j].style.width = imgList[j].getAttribute("width")+"px";   
}
});
I guess the only question now is, is there a more elegant/quicker way of doing this?

waarnemer
Joomla! Hero
Joomla! Hero
Posts: 2954
Joined: Sun May 04, 2008 12:37 pm

Re: Total noob question, but my js file won't work

Post by waarnemer » Sat Aug 30, 2014 10:51 am

Not exactly clear to me what you want it to do...

You want the caption as wide as the image...? look at this:

http://stackoverflow.com/questions/4979 ... e-as-image

gjledger_2k
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Wed Feb 08, 2012 9:24 pm

Re: Total noob question, but my js file won't work

Post by gjledger_2k » Thu Sep 11, 2014 7:31 pm

Yes, but it has to work with the figure element. When you place an img element within the figure element, you can have JCE automatically add the img's dimensions. But the figure caption is a sibling of img, so it it will take up the same width as the figure element. By grabbing the width of the img and making it a style attribute, figure caption will automatically adjust to the img width--which is now also the figure width.

It does it site wide, and let's you put any images of any width and have the caption fit that width.

Thanks!

waarnemer
Joomla! Hero
Joomla! Hero
Posts: 2954
Joined: Sun May 04, 2008 12:37 pm

Re: Total noob question, but my js file won't work

Post by waarnemer » Thu Sep 11, 2014 8:21 pm

aha, now you can do this.. your site most probably already loads jQuery.
The same thing can probably achieved a lot easier with short lines in jQuery.

you don't really have to create an array you can use

Code: Select all

$('figure').each(function(){
 ---the smart  stuff---
}

gjledger_2k
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Wed Feb 08, 2012 9:24 pm

Re: Total noob question, but my js file won't work

Post by gjledger_2k » Fri Mar 04, 2016 4:25 pm

waarnermer
Thanks. I just learned about for each. Takes me a while.


Locked

Return to “Joomla! 2.5 Coding”