external .js - new to javascript - please help

October 26th, 2004, 10:46 pm

I found a script for a chromeless window on a site, and I am trying to implement a version of it on one of my sites. The script that I am referring to can be seen in action on the page that I got it from at this web address.

There seems to be two distinct parts to the script, my samples of code are slightly different than the code of the web address given above (targets, window size, etc..).
Here are the two parts of the code:

1st part=

Code: [ Download ] [ Select ]

<script language="JavaScript">
<!--
function winop1()
{
windop = window.open("IMAGE1.HTML","mywin","height=640,width=680,top=30,left=100,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,");
}
-->
</script>

1. <script language="JavaScript">
2. <!--
3. function winop1()
4. {
5. windop = window.open("IMAGE1.HTML","mywin","height=640,width=680,top=30,left=100,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,");
6. }
7. -->
8. </script>

2nd part=

Code: [ Download ] [ Select ]

<a href="javascript:winop1();"><img src="thumbs100x/CnT_001.jpg" border="0" width="100" height="100"></a>click here to see gallery image 1

Part 1 and part 2 of the script are written on the same page of html, and for every thumbnail that opens a larger image there is a part 1 and 2 to correspond with that particular thumbnail link.

What I want to do is to take part 1 and place it in an external .js file and have part 2 of the script be able to still access it and function properly. When I try to do this though I only get "Error on page." Basically when I remove the first part of the script from the actual page and place it in an external .js file, the second part of the script can no longer access the first part.

I'm sure that this is just a matter of referencing the right object, or referencing in the right order or something like that, however I am totally new to this and this script is the first bit of javascript I have tried implementing before and I really don't know what to do..

And before anyone asks I am, so far as I can tell, linking to the external .js file properly:

Code: [ Download ] [ Select ]

<SCRIPT LANGUAGE="JavaScript" SRC="CnT.js"></SCRIPT>

I would greatly appreciate any feedback/guidance anybody can assist me with.

October 27th, 2004, 12:43 am

My question may pretty much be pointless because the reason for the external .js file is an attempt to hide the source of each page, and make it just a little bit more annoying/harder for someone who wants to take the images off the site for some other purposes.

I realize that no matter what I would do to hide the source code or to try and disable attemts at plagiarism, that there will always be a way around the security measures for those who are truly determined.

I still like to see pages with clean code though, and it would be nice to strip out all the lines of javascript from the html. On my largest gallery page I have 23 thumbnails linking to larger images in the javascript popup window. for 23 thumbnails to each have part 1 and 2 of the code mentioned above in my last post equals a total of 230 lines of code! It would be nice to have all of that in an external .js file.

Maybe part 1 and 2 both need to be in the same external .js file but I have not found any samples of code or pages demonstrating it in this manner.

So I am still open for suggestions, I may not be able to truly hide all my source but I can clean it up a little maybe. The beginner/intermediate web surfers out there do not all know how to get around the preventative measures, so that makes those measures still worth something!

[joebert]

October 27th, 2004, 6:55 am

If you have

Code: [ Download ] [ Select ]

<script language="JavaScript">
<!--

1. <script language="JavaScript">
2. <!--

In the external file that's the reason you're getting an error.
Since you're declaring the "language", or "type" on the page calling the script there's no need to re-declare it in the JS itself.

Looking at your setup, it's actually defeating the purpose of Javascript.

There's no need to have a function for every popup. (generally when you can't use the same function for multiple elements it's a poorly written function)

Do a quick Ozzu Search for "popup" setting "forum" to "Programming/scripting" in search options, there's a few examples of what you're trying to do.

October 27th, 2004, 8:54 am

I'm sorry I don't have

Code: [ Download ] [ Select ]

<script language="JavaScript">
<!--

1. <script language="JavaScript">
2. <!--

writtin in the external .js, it's only in the html page that I'm trying to link the .js to.. I'm not sure how I implied that I was trying to link to the .js file from within the .js file itself - I guess I was not clear?..

I did an "Ozzu search" for "external .js" before I posted this question about .js files, but had not found the info that I was looking for. I agree Joebert that having to use the script for every single thumbnail makes it a poorly designed script, although honestly I had not looked at it that way before..

I will do some more searching and try and find a better script to use.

October 27th, 2004, 3:46 pm

In general, you shouldn't use inline JavaScripts, it should ALL be packaged nicely inside a .js library fileto be included on every page. You should try to limit insta-run scripts as much as possible, and everything else should be functionalized (that is, in a function). That said, there are times when putting code inline (or at least, not in a library file) is appropriate. When I'm writting some HTML page that contains a form, I usually place the validation right on the page above the form because a number of code peice need to be customized based on the form itself (what's required, what needs actual validation via RegEx, etc). I usually do server-side processing as well, but only if the serverside script detects that javascript is disabled (yes this is possible, by the way). In general though, best practices dictates that you should avoid spreading JavaScript code all over hell on your site...
.c

October 27th, 2004, 11:06 pm

Well i figured out what my problem was!

I had read somewhere that when you insert script into an external .js file that you need to remove any html tags for it to work properly. I thought I had removed all the tags but missed some of them..

This is how I had it at first:

Code: [ Download ] [ Select ]

<!--
function winop1()
{
windop = window.open("pages/CnT_01.htm","CPGwin","height=600,width=512,top=48,left=256,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,");
}
-->

1. <!--
2. function winop1()
3. {
4. windop = window.open("pages/CnT_01.htm","CPGwin","height=600,width=512,top=48,left=256,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,");
5. }
6. -->

when it should have been:

Code: [ Download ] [ Select ]

function winop1()
{
windop = window.open("pages/CnT_01.htm","CPGwin","height=600,width=512,top=48,left=256,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,");
}

1. function winop1()
2. {
3. windop = window.open("pages/CnT_01.htm","CPGwin","height=600,width=512,top=48,left=256,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,");
4. }

The problem was the:

Code: [ Download ] [ Select ]

<!--
-->

1. <!--
2. -->

For some reason I just thought that was part of the javascript.. doh


I didn't find a better script yet for the thumbnail popup gallery windows, but since I was able to achieve what I wanted to by removing the bulk of the javascript off the html page I am probably just going to go with the script I already have.

Thanks to the helpers out there for the contributions!

October 27th, 2004, 11:34 pm

One other thing though,

Can someone please tell me what the proper syntax is for this bit of code:

Code: [ Download ] [ Select ]

function winop1()
{
windop = window.open("pages/CnT_01.htm","CPGwin","height=600,width=512,top=48,left=256,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,");
}

document.write('<html>')
document.write('<body>')
document.write('<table border="0" cellpadding="0" cellspacing="20" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">')
document.write(' <tr>')
document.write('  <td width="25%" align="center" valign="middle"><a href="javascript:winop1();"><img src="thumbs100x/CnT_01.jpg" border="0" width="100" height="100"></a></td>')
document.write(' </tr>')
document.write('</table>')
document.write('</body>')
document.write('</html>')

1. function winop1()
2. {
3. windop = window.open("pages/CnT_01.htm","CPGwin","height=600,width=512,top=48,left=256,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,");
4. }
6. document.write('<html>')
7. document.write('<body>')
8. document.write('<table border="0" cellpadding="0" cellspacing="20" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">')
9. document.write(' <tr>')
10. document.write('  <td width="25%" align="center" valign="middle"><a href="javascript:winop1();"><img src="thumbs100x/CnT_01.jpg" border="0" width="100" height="100"></a></td>')
11. document.write(' </tr>')
12. document.write('</table>')
13. document.write('</body>')
14. document.write('</html>')

If you were to make this sample of code into its own .js file, and then try to open it on your computer by double clicking it, it would tell you that-

Quote:

Line: 7
Char: 1
Error: 'document' is undefined
Code: 800A1391
Source: Microsoft JScript runtime error

How do I "define the document"?

This script does what it's supposed to do though which is what I don't understand. The script is supposed to take a blank page, and place a thumbnail on it which links to a larger image (which it seems to do just fine..).

So, if it works in IE how come windows says there are errors when I try to open the file by double clicking it?

October 28th, 2004, 12:50 am

Well I just had a break from the computer for about an hour and while I was away a thought struck me.

Perhaps this "undefined document" is happening because of this hypothetical reason:

When the .js file is called from the webpage, the webpage itself is the "document" in which the script is being told to run in, but when the .js file is being doubleclicked on a hard drive, it is being called to run, but there is no document window that it is being called to run IN hence the error message - 'document' is undefined -

That's just a guess anyways, any feedback?

October 28th, 2004, 6:17 am

You were trying to run the .js file by double clicking it?

Yeah, that won't work. You have to include the javascript file on a webpage for it to be executed properly.

.c

[joebert]

October 28th, 2004, 8:30 am

<!-- -->

October 28th, 2004, 12:04 pm

I wasn't technically trying to "run" the .js..

I was trying to just open it for editing by doubleclicking, thinking that a .js file would automatically associate itself with notepad.. I didn't realise at first that it would try and run it instead of opening it, and when it did try and run it is when I was getting the error messages mentioned earlier.

Everything is sorted out now though, I'm tweaking this script way beyond what it originally was and am very happy with the results!

This is my first attempt at using javascript on a site, and I have made <noscript></noscript> versions of the pages as well. Everything seems to be working fine and I am enjoying solving this puzzle.

October 28th, 2004, 12:24 pm

I personally like JavaScript quite a bit, it is much more powerful than people really give it credit for, especially now that browsers are starting to come to a standard.

One of the most frustrating things about web development in the mid 90s was the incredable inconsistancy between the major browsers, and back then, it wasn't a 85% IE 15% everything else sort of world, it was pretty even between IE and Netscape, if not more on the Netscape side (especially early on).

You basically had to write two scripts every time and then integrate them together. What a pain.

.c

October 28th, 2004, 3:30 pm

What I don't understand is why you're making a seperate function for each link. You should just need to create one function and pass an argument to it. Something like this:

Code: [ Download ] [ Select ]

function winop(fileurl)
{
windop = window.open(fileurl,"mywin","height=640,width=680,top=30,left=100,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,");
}

1. function winop(fileurl)
2. {
3. windop = window.open(fileurl,"mywin","height=640,width=680,top=30,left=100,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,");
4. }

Code: [ Download ] [ Select ]

<a href="javascript:winop('IMAGE1.HTM');"><img src="thumbs100x/CnT_001.jpg" border="0" width="100" height="100"></a>click here to see gallery image 1

That way, you have only the one function and each link tells the function what page to open in the new window.

October 28th, 2004, 3:42 pm

sweeet o[tter], you possibly just solved one of my underlying issues with trying to optimize the script.

That is one of the questions I had, I do not know syntax for script so I really did not know how to alter the script to make it work better for me.

That is what Joebert was hinting at when he said:

joebert wrote:

There's no need to have a function for every popup. (generally when you can't use the same function for multiple elements it's a poorly written function)

I couldn't find a better script so I kept working with the one I have, but you might have just given me the syntax that I needed to make it work in the fashion that Joebert was speaking of.

Hooray!

October 28th, 2004, 3:47 pm

In case any of you who have been reading this thread are interested, here is a sneak preview of the site I'm working on.

The Site

Things are still incomplete so bear with me.

(for instance, the "galleries - order images - and contact" links are just one big .jpg and they are only linked to the gallery at this time..)