How to call function in extented .js file, from <body> - Simple Controls Gallery v1.4

**rumen** · 10-11-2013, 09:25 PM

1) Script Title:
Simple Controls Gallery v1.4

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...plegallery.htm

3) Describe problem:

I have problems with

In head I have:

Code:

<script type="text/javascript" src="/categ.js"></script>
<script type="text/javascript" src="/simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

In categ.js, I have:

Code:

<script type="text/javascript">
var mygallery=new simpleGallery({	
		wrapperid: "category1", //ID of main gallery container,
	dimensions: [360, 260], //width/height of gallery in pixels. Should reflect dimensions of the images exactly

..................
</script>

In body I have:

Code:

<div id="category1"></div>

When I load page, the script is not called, because is in extended file. If I paste it directly in head - it's works.

So, How I can call from "body" with some tag the function in categ.js

**traq** · 10-11-2013, 09:40 PM

The simple controls gallery script needs to come before the script that tries to use it. When categ.js is first, simpleGallery doesn't exist yet.

HTML Code:

<script type="text/javascript" src="/simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript" src="/categ.js"></script>

Also, in an external script file, there must be no html tags (e.g., <script>).

categ.js

Code:

var mygallery=new simpleGallery({	
		wrapperid: "category1", //ID of main gallery container,
	dimensions: [360, 260], 
// etc.

**rumen** · 10-11-2013, 09:43 PM

Thank you! It's works without tags inside the .js

Then with little help from other forums, I just do it to be like this:

Code:

window.onload = function() {
var mygallery=new simpleGallery({	
		wrapperid: "category1", //ID of main gallery container,
	dimensions: [360, 260], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
..................
	}
})
};

Now it's works!
Thanks!

**rumen** · 10-11-2013, 09:55 PM

Hi, but now there is another problem

I'm using Joomla, and I put this in head.
So if I go to other page, the Chrome says:

Error: DIV with ID "category1" not found on page.

Because in other page the tag:

Code:

<div id="category1"></div>

Is not on this page, because I don't need it.

How to fix that?
Can I say to function: "Load the function only on this page"

**traq** · 10-11-2013, 10:09 PM

two options:

1) If you have an external JS file, only load it on pages that the contained code applies to. Code that goes on other pages goes in other files.

2) Keep everything in the same file, but check that the element exists before trying to use it.

Code:

if( document.getElementById( 'category1' ) ){
    var mygallery = new simpleGallery( {
        /*  . . .  */
    } );
}

**djr33** · 10-11-2013, 10:09 PM

EDIT: posted at the same time as traq. His answer (assuming it works for you) is simpler than mine (and roughly the same as my #2 below). You can probably ignore the rest of my post.

---

Can I say to function: "Load the function only on this page"

Maybe. You could perhaps check the URL to see if you're on the right page, but that would be complicated and could get tricky if there might be any variation in that URL or if you update your website structure, and so forth.

The better option: only include the script on the relevant page. There are at least two ways to do that:
1) Only include any/all of the script on that page. (Just remove it from the others.)
2) Only include the activation of the script on that page. For example, only include that DIV on the relevant page, etc.

(Another alternative would be to suppress the errors so that when it doesn't work it wouldn't complain. But that's probably not something you'd want to do, both because it could get complicated and because in theory it's a bad idea.)

This is a problem with the CMS/templating that you're using, rather than a problem with the script. You might be able to fix it either way, but I'd suggest looking at fixing the source, rather than trying to manipulate it with the script.

**rumen** · 10-11-2013, 10:34 PM

Thanks! It's works in this way:

Code:

window.onload = function() {
if( document.getElementById( 'category1' ))  {
var mygallery=new simpleGallery({	
		wrapperid: "category1", //ID of main gallery container,

Originally Posted by djr33

The better option: only include the script on the relevant page. There are at least two ways to do that:
1) Only include any/all of the script on that page. (Just remove it from the others.)
2) Only include the activation of the script on that page. For example, only include that DIV on the relevant page, etc.

(Another alternative would be to suppress the errors so that when it doesn't work it wouldn't complain. But that's probably not something you'd want to do, both because it could get complicated and because in theory it's a bad idea.)

This is a problem with the CMS/templating that you're using, rather than a problem with the script. You might be able to fix it either way, but I'd suggest looking at fixing the source, rather than trying to manipulate it with the script.[/COLOR]

I'm using Joomla 1.5, I don't know how to include the script in 1 page, not in all pages

I can't modify joomla alone.

I hope so, in this way above - will be no problems, like heavy pages or error.

**djr33** · 10-12-2013, 02:14 AM

I'm not sure about Joomla. There should be some way to do it, though. But it might be more effort than it's worth. But what you're doing now is fine-- you're only running the script if it's actually intended for the page. Therefore, you are basically doing what I said (as #2) where you don't have that DIV available (and only run part of the script if that DIV is available).

**rumen** · 10-12-2013, 11:26 AM

Joomla it's so crazy

Now I have another problem: here

Thank you all for the help!

**djr33** · 10-12-2013, 09:15 PM

The benefit to Joomla is ease and not requiring so much work from you. The downside is control and flexibility. If you find yourself limited, there are two things to consider:
1. There are some ways to customize it, but they can become pretty technical (even, perhaps, negating the benefit of how it helps you, but making you spend more time fixing it).
2. You might consider not using Joomla. You could do all of this yourself (using PHP, like Joomla, but exactly how you want to do it). It would be more work in a sense, but you'd have absolute control. You'd also have a lot to learn along the way, but it might be worth it.

It's up to you.

Since this is solved and you have started a new question/thread, and because spam has started to appear here (that we've deleted), I'm going to close this discussion.