Jump to content
TNG Community
slowjim

What is the best way to put script into footer.

Recommended Posts

slowjim

I am using template 18. Utilizing my limited knowledge of java-script and what I could look up on the internet, I created a script that uses some dom-manipulation to load 19 pictures of individuals over the main image on the home page so that it would resemble a montage of photos kind of laid about. It makes each photo a link to that individuals page. Each photo is of a deceased person in the tree. By using Adobe Elements I was able to make sure each photo was of a very small byte-size to reduce the time it took to load these images. I struggled trying to decide the best place to load and run this script and decided based on what I read on various websites, that the best place was as near the closing body tag as possible. Of course on TNG pages this would be the footer. After a few attempts to create a custom footer failed because they had no effect, I discovered that I could easily plant a script there just by putting in at Admin > General Settings > Site Design and Definition > Custom Footer message. It works.

My question: Is the fact that it seems to work good enough? Is this best way to add script there using a text-box that was clearly meant to add text to the footer? Incidentally, the script checks to see if this is the home page and if so, to load another script that loads the pictures. 

var script = document.createElement("script");
  script.type = "text/javascript";

if (document.title == "Our Family History") {
  script.src = "templates/template18/customloadpics.js";
}
document.body.appendChild(script)

What is the best way to put a script like this in the footer?

Thanks, James Brown

https://thebrownfamilytree.info

 

Share this post


Link to post
Share on other sites
Robin Richmond
On 8/27/2019 at 11:14 AM, slowjim said:

I created a script that uses some dom-manipulation to load 19 pictures of individuals over the main image on the home page so that it would resemble a montage of photos kind of laid about.

That's pretty cool.

First, the code that generates the footer is in the function footer() in genlib.php.  And you don't have to worry about checking for end-user programs, because (a) there is no footer function in admin pages (just a hard-coded PHP statment in every admin program, and (b) genlib.php  is only used in end-user pages.

But if you want to position a script that,  in effect, creates
<script type='text/javascript' src='templates/template18/customloadpics.js'>,
it seems to me that you could just place the script element that I just specified at the at the appropriate place in the footer. (But maybe it's just that I'm not used to seeing things coded the way you coded it.)

Of course, I don't know how the external script would know where to add the montage in the HTML code or in the DOM.   My guess is that  either

  • You have inspected the HTML, and have seen an element in the footer into which the Javascript would place the <img> tag or tags, or
  • The external js file places the HTML code right where the script element is placed. 

In any case, I suspect that my first paragraph (well, after "that's pretty cool") is all you wanted to know.

- Robin

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×