Jump to content

Problem with external ja file


elementalgrace
 Share

Recommended Posts

Hi. I am recreating a new front end for an existing site that uses more efficient code. One specific page on the site uses some javascript for a floating box that scrolls up and down the page and also allows you to submit some information. In the current version, the javascript is embedded in the page. In the new version, we are hoping to move the javascript into an external .js file rather than embedding it. Now funnily enough when I embed the code in the page, the floaty-box thing works fine but when I link to it. It won't work. I wondered if this might be something to do with relative links as with css or something like that as the javascript is kept in a js folder?The javascript itself is:

   //FLOATING BOX      var verticalpos="fromtop"function JSFX_FloatTopDiv(){	var startX = 0,	startY = 0;	var ns = (navigator.appName.indexOf("Netscape") != -1);	var d = document;	function ml(id)	{		var el=d.getElementById?d.getElementById(id).all?d.all[id].layers[id];		if(d.layers)el.style=el;		el.sP=function(x,y){this.style.left=x + "px";this.style.top=y + "px";};		el.x = startX;		if (verticalpos=="fromtop")		el.y = startY;		else{		el.y = ns ? pageYOffset + innerHeight : document.documentElement.scrollTop + document.documentElement.clientHeight;		el.y -= startY;		}		return el;	}	window.stayTopLeft=function()	{		if (verticalpos=="fromtop"){		var pY = ns ? pageYOffset : document.documentElement.scrollTop;		ftlObj.y += (pY + startY - ftlObj.y)/8;		}		else{		var pY = ns ? pageYOffset + innerHeight : document.documentElement.scrollTop + document.documentElement.clientHeight;		ftlObj.y += (pY - startY - ftlObj.y)/8;		}		ftlObj.sP(ftlObj.x, ftlObj.y);		setTimeout("stayTopLeft()", 10);	}	ftlObj = ml("ctl00_ContentPlaceHolder1_surround");	stayTopLeft();}JSFX_FloatTopDiv();Sys.Application.initialize();Sys.Application.add_init(function() {    $create(xxxx.HoverMenuBehavior, {"DynamicServicePath":"/xxx2/cas.aspx","OffsetY":2,"PopupPosition":3,"id":"ctl00_ctl28","popupElement":$get("ctl00_cpanel")}, null, null, $get("ctl00_litSelectData"));});// //SUBMIT     function onYes() {        __doPostBack('ctl00$ContentPlaceholder1$pnlAlwaysVisible$btnSubmitBill','')    }        function onNo() {        //no postback necessary    }   

The link to my .js file is <script type="text/javascript" src="js/floatbox.js"></script> which I have put inside the head.I am in not experienced in javascript at all. More that if I need it, I find working examples on the web and bung them into my code - usually they work so please forgive me if I'm a bit slow to catch on. Really hope someone can help!Thanks in advanceEG

Link to comment
Share on other sites

At least part of the javascript you use originates from an ASP application. Are you sure it worked in your application if it was just embedded in it, and your application is written in ASP too? Ie. if you use PHP, this script will never work :)
The original application was written in .net (C#) and I tested it in just a bog standard HTML page and it replicated the live version exactly. The javascript above is what the site is currently using and it works fine. I just can't work out why it works inline but not as an external .js file.
Link to comment
Share on other sites

Possibly because there is an occurance of a relative path in this line:

$create(xxxx.HoverMenuBehavior, {"DynamicServicePath":"/xxx2/cas.aspx","OffsetY":2,"PopupPosition":3,"id":"ctl00_ctl28","popupElement":$get("ctl00_cpanel")}, null, null, $get("ctl00_litSelectData"));
Does this refer to an existing path on your server? If it does, correct it so that the external file will still refer to the same path. :)
Link to comment
Share on other sites

The path is relative to the root of your server, maybe it helps if you use a path that is relative to the path the javascript file is located in. Besides, if you move the html and javascript to another location or server in the future, this path will redirect accordingly.If for example the referred file is located here: /serverpath/folder/cas.aspxYour html file here: /serverpath/somefolder/thepage.aspxAnd your newly created external javascript file here: /serverpath/somefolder/newfolder/floatbox.jsThe new path inside the javascript file could be: ../../folder/cas.aspxI hope this helps :)

Link to comment
Share on other sites

I think I follow. So all my structure is something like:Page: root/page.htmJS: root/jsfolder/file.js...so the javascript should read something like ../page.htmlUnfortunately that actually doesn't seem to work.So logically this makes sense but that doesn't explain why this exact code snippet with no changes works perfectly when I put it inline in the page but stops working when I put it in the external folder given that I am just recreating the front end using html pages and there are currently no aspx pages in my project. If it were referencing the aspx page which isn't there that was causing the propblem, surely it wouldn't work whether the script was inline or external :) :) ... or perhaps I have been staring at this for too long and it's made my brain go funny.

Link to comment
Share on other sites

These lines of code gets executed in the file:Sys.Application.initialize();Sys.Application.add_init(...);So before you include this file you need to have already included whatever Javascript defines those methods. And check for Javascript errors in your browser, that will tell you specifically what the problem is without having to guess.

Link to comment
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
 Share

×
×
  • Create New...