Quick Js Questions - Cross-site Link And External .js File

[NikMac]

Hi - I'm trying to create a popup link in the footer of my site that links to "helpbox.html". Here is the code:java script:

<!--function helpWindow() {window.open( "helpbox.html", "Help","height=700, width=385, top=75, left=75, status=0, resizable = 0" )}//-->

HTML:

<li><a href="help.html" onclick="helpWindow(); return false;" title="Help">Help</a></li>

My problem is with subdirectories. Right now, I get a 404 error unless "helpbox.html" is in every folder/subdirectory of my site (on the pages I link it to). Is there any easy way to work around this? The only alternative I can think of is to put the local javascript code in each html file and use the appropriate linking (../helpbox.html).Also, is there a problem if I include more than one javascript function in one external javascript file for the entire site?Like this:

<!--function helpWindow() {window.open( "./helpbox.html", "Help","height=700, width=385, top=75, left=75, status=0, resizable = 0" )}//--><!--function toggleMenu(objID) {if (!document.getElementById) return;var ob = document.getElementById(objID).style;ob.display = (ob.display == 'block')?'none': 'block';}//-->

Right now I'm only using the second bit of code (a collapsible menu) on one page. Is it better to just add that code to the page and leave it out of the external javascript file?Thanks.

[justsomeguy]

Don't put HTML comments in Javascript code, especially external files. You don't even really need to put them anywhere, that's an artifact left over from 1998. For the helpbox issue, either specify a path starting with the server root (starting with a slash) or specify the full absolute path, including the http://.

[Greywacke]

I might be able to give you some clarity on your question, it sometimes helps to know WHY. If not, ignore this reply... :)Starting a URL with /This targets the root of the current domain, and is called a virtual URL.Starting a URL with ../This directs the script one level up from the .js calling pages location in relative URL's. It's two dots by the way, though from the root of a site - I doubt you would get anything other than a 404 not found... :)Starting a URL with a directory or file name, from where the JS calling page is located for instance images/arb.jpg or index.html.Also a relative URL, and allows you to traverse a directory structure even when called from a few folders into the "tree" :)Starting a URL with http://A complete URL is most often used to link to another site.All URL's in JS files start from the calling pages location (the page containing the <script> tag)'s location so if the JS is called by index.php in the root of the site you can specify relative urls only for JS files used by the directory index.html is in. In javascript documents it's best to use virtual URL's if you want to maintain linking integrity over the site.If it's in a subdirectory such as /help/topic/index.html for instance, and you want to preload /images/arb.jpg for use in the CSS: you would have to specify it as ../../images/arb.jpg - but if its in the site root or one directory up like /help then only one ../ is needed in the URL. At the moment its expecting a directory called . containing helpbox.html in the calling pages location. I would not recommend duplicating files all over your directory structure.And yes, the <!-- --> html comment tags were only used around script blocks to hide the scripts in browsers that didn't support javascript. NEVER use that in a .js file, especially multiple HTML comments around every function (it's generally preferred to keep the components of a site seperate, not mixed).

[NikMac]

Thanks for all the input, but I tried implementing your suggestions and I'm still having trouble. What is wrong here?In my root directory I have a folder called "lessons", and an index.html page in that. Here's the HTML for lessons/index.html:

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

<li><a href="../help.html" onclick="helpWindow(); return false;" title="Help">Help</a></li>

help.html is also in the root directory (visitors will be linked there if javascript is disabled).There is a folder called "styles" in the root directory, where popup.js is located. Here's the code for styles/popup.js:

function helpWindow() {window.open( "/helpbox.html", "Help","height=700, width=385, top=75, left=75, status=0, resizable = 0" )}

I changed "./helpbox.html" to "/helpbox.html" but now I'm just getting 404 errors.helpbox.html is also in the root directory, by the wayIf it makes a difference, I'm keeping all of this in a folder on my computer desktop. I'm not hosting the project online yet.Edit - perhaps it does make a difference. Is "/helpbox.html" linking to the root of my entire computer? If so, how should I (feasibly) get around this?Let me know if you need anymore information. Thanks.

[thescientist]

Use relative pathnames.you should put all your main pages in a folder, called thiswebsite; like HTML pages (index, home, about, etc). Have another folder in this folder called scripts, and maybe another one called images. Include all your script files in your pages using scripts/script.js and all your images will be images/image.jpg.Now whenever or wherever you move thiswebsite all your path names will be maintained.

[Greywacke]

okay its now looking for helpbox in the root of the domain. eg www.whatever.com/helpbox.html depending on where its hosted.is it required to open a new window and that help.html on one click? if it is, the return false cancels all clicks on that hyperlink negating the click after opening the window. i don't believe you need the href attribute, can make it "java script: void(0);" or even "#" rather.and type out the current directory structure if possible. for example:

site root/		  images/					img1.jpg					img2.jpg					img3.gif		  scripts/					default.js		  index.html		  help.html		  helpbox.html

[NikMac]

Hi - the JS code is intended so that if the visitor has javascript disabled, they will go to help.html. If JS is enabled, only the popup will appear. Here is the directory structure:

site root/		  scripts/					popup.js		  lessons/					index.html						  index.html		  help.html		  helpbox.html (popup page)

and this is the HTML for "lessons/index.html"

  <script type="text/javascript" src="scripts/popup.js" (this is in the <head> section)></script>

<li><a href="../help.html" onclick="helpWindow(); return false;" title="Help">Help</a></li>

and the javascript code, "scripts/popup.js":

function helpWindow() {window.open( "helpbox.html", "Help","height=700, width=385, top=75, left=75, status=0, resizable = 0" )}

The popup works correctly on all the pages in "site root", but not in subdirectories such as "lessons/index.html". (I took out the beginning "/" as per thescientist's suggestion. How can I make this popup work on all pages, including those in subdirectories like "lessons/"?

[thescientist]

if you have files in a subdirectories calling the .js file, then thats when you would want to use ../ to get back to the root directory so it can get at the scripts folder.

[NikMac]

if you have files in a subdirectories calling the .js file, then thats when you would want to use ../ to get back to the root directory so it can get at the scripts folder.

I tried adding that and the popup did appear, but with a 404 error - now it's trying to find /lessons/helpbox.html, instead of /helpbox.html. As I outlined in my first post, a way to fix this is to add "helpbox.html" to the "lessons" folder, but I don't want to have to do that to every subdirectory on my site. Is there another way?

[justsomeguy]

If you start the URL with a slash it will always start at the root of the domain, so if the file is at www.domain.com/helpbox.html then you can use the path "/helpbox.html" to refer to that file from anywhere on the server.

[NikMac]

If you start the URL with a slash it will always start at the root of the domain, so if the file is at www.domain.com/helpbox.html then you can use the path "/helpbox.html" to refer to that file from anywhere on the server.

Okay, I think I have it now. I changed it to "/helpbox.html" and I get a 404 error - "Can not find file:///helpbox.html" - though I assume that when I actually upload the files it will link to www.example.com/helpbox.htmlThanks for all the help, everyone.

[Err]

[quote name='justsomeguy' post='157830' date='Dec 14 2009, 08:14 PM']Don't put HTML comments in Javascript code, especially external files. You don't even really need to put them anywhere, that's an artifact left over from 1998. For the helpbox issue, either specify a path starting with the server root (starting with a slash) or specify the full absolute path, including the http://.[/quote]I don't mean to go off-topic here, but I want to mention something about the HTML comments. When a script is put directly into the page using the <script> tags, and one uses the ampersand symbol, lets say for example, on a URL with variables for an AJAX script and put through the w3 HTML vaildator. The vaildator will output errors because of the ampersand. The way around this is to put HTML comments inside the script to prevent those errors.

[Ingolme]

I don't mean to go off-topic here, but I want to mention something about the HTML comments. When a script is put directly into the page using the <script> tags, and one uses the ampersand symbol, lets say for example, on a URL with variables for an AJAX script and put through the w3 HTML vaildator. The vaildator will output errors because of the ampersand. The way around this is to put HTML comments inside the script to prevent those errors.

If the ampersand is in a URL, substitute it for an HTML entity &amp;.The validator will only complain about the ampersand if your page is XHTML. In that case, comments are useless because the information within the comments is still not pure character data, use the <![CDATA[ ]]> tag for the script.

[justsomeguy]

Right, that's only with XHTML. With HTML 4 that's not an issue.