Forum:

HTML Pages with CSS and JavaScript

separating out the js from jsp

Ranch Hand

Posts: 200

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

My javascript knowledge is not very sound. I have the following javascript in the jsp page and I don't want it to be in jasp, rather I have tried to move the js related code to .js file and tried to include it in the jsp.
But it's not working. any suggestion on how to do this?
And also what is the best practice to follow to avoid the javascript compatability problem with browsers?

NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;ssmItems=new Array();

function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS6) {ssm.left = parseInt(ssm.left)+num+"px";}
if (NS) {ssm.left = parseInt(ssm.left)+num; bssm.clip.right+=num;bssm2.clip.right+=num;}}

function buildBar() {
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
document.write('<td     ><p ><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></td>')}

YOffset=0; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Sample0", "<%=path%>/reg.jsp", "welcome_frame"]
ssmItems[2]=["Sample1", "a.htm1",""]
ssmItems[3]=["Sample2", "b.html", ""]
ssmItems[4]=["Sample3", "c.html", "_new"]
ssmItems[5]=["Sample4", "d.html", ""]
ssmItems[6]=["Sample6", "e.html", ""]

buildMenu();

// anotherScroll
//Default browsercheck, added to all scripts!
function checkBrowser(){
	this.ver=navigator.appVersion
	this.dom=document.getElementById?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
	this.ie4=(document.all && !this.dom)?1:0;
	this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
	return this
}
bw=new checkBrowser()
/**************************************************************************
Variables to set.
***************************************************************************/
//The height of the menu
sMenuheight=50

//Width of the arrows
sArrowwidth=16

//Scroll speed: (in milliseconds, change this one and the next variable to change the speed)
sScrollspeed=100

//Pixels to scroll per timeout.
sScrollPx=10

/**************************************************************************
Scrolling functions
***************************************************************************/
var tim=0
var noScroll=true
function mLeft(){
	if(!noScroll && oMenu.x<sArrowwidth){
		oMenu.moveBy(sScrollPx,0)
		tim=setTimeout("mLeft()",sScrollspeed)
	}
}
function mRight(){
	if(!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-sArrowwidth){
		oMenu.moveBy(-sScrollPx,0)
		tim=setTimeout("mRight()",sScrollspeed)
	}
}
function noMove(){clearTimeout(tim); noScroll=true}
/**************************************************************************
Object part
***************************************************************************/
function makeObj(obj,nest,menu){
	nest=(!nest) ? '':'document.'+nest+'.'										
   	this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;		
	this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;		
	this.scrollWidth=bw.ns4?this.css.document.width:this.evnt.offsetWidth
	this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.pixelLeft;
	this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.pixelTop;		
	this.moveBy=b_moveBy; this.moveIt=b_moveIt;	this.showIt=b_showIt;this.clipTo=b_clipTo;
	return this
}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x; this.css.top=this.y}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_clipTo(t,r,b,l){
	if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
	}else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
function b_showIt(){this.css.visibility="visible"}
/**************************************************************************
Object part end
***************************************************************************/

/**************************************************************************
Init function. Set the placements of the objects here.
***************************************************************************/
function sideInit(){
	//Width of the menu, Currently set to the width of the document.
	//If you want the menu to be 500px wide for instance, just 
	//set the the pageWidth=500 in stead.
	//pageWidth=(bw.ns4 || bw.ns5)?innerWidth:document.body.offsetWidth-20;
	//alert("Asdsd4");
	pageWidth = 300	
	oBg=new makeObj('divBg')
	oMenu=new makeObj('divMenu','divBg',1)
	oArrowRight=new makeObj('divArrowRight','divBg')
	//Placement
	oBg.moveIt(0,1) //Main div, holds all the other divs.
	oMenu.moveIt(sArrowwidth,6)
	oArrowRight.moveIt(pageWidth-sArrowwidth,9)
	//setting the width and the visible area of the links.
	if(bw.dom || bw.ie4){ oBg.css.width=pageWidth; oBg.css.overflow="hidden" }
	oBg.clipTo(0,pageWidth,sMenuheight,0)
}

//executing the init function on pageload.
onload=sideInit;
</SCRIPT>
 </head>

<body>
<head>
//another scroll
<script src="script\anotherScroll.js" type="text/javascript"></script>
<style type="text/css">
#divBg{position:absolute; z-index:10; width:200; left:0; height:50; clip:rect(0,10,10,0)}
#divMenu{position:absolute; left:15; top:6; font-weight:bold}
#divArrowLeft{position:absolute; width:20; height:20; left:0; top:9}
#divArrowRight{position:absolute; width:20; height:20; top:9}
</style>

<title>JSP for EmployeeForm form</title>
	</head>
	<body>

<div id="divBg">
			<div id="divMenu">
				<table>
					<tr>
						<td nowrap>
							 [<a href="http://jdstiles.com/" rel="nofollow">Home Page</a>] [<a
									href="http://jdstiles.com/javamain.html">JavaScripts</a>] [<a
									href="http://jdstiles.com/java/allnew.html">Newest Scripts</a>]
									[<a href="http://jdstiles.com/java/popular.html" rel="nofollow">Most
										Popular</a>] [<a href="http://jdstiles.com/tips/" rel="nofollow">Office Tips</a>]
									[<a href="http://jdstiles.com/mso2k/" rel="nofollow">Tutorials</a>] [<a
									href="http://jdstiles.com/">Design Sets</a>] [<a
									href="http://jdstiles.com/java/guestbook.html">Guestbook</a>] 
							
						</td>
					</tr>
				</table><br><br>
			</div>
			<div id="DivArrowLeft">
				<a  
					 rel="nofollow"><img  
						 border=0> </A>
			</div>
			<div id="DivArrowRight">
				<a  
					 rel="nofollow"><img  
						 border=0> </a>
			</div>
		</div>

</body>
</html>

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Moving the script (learn to indent!) to an external file should not be an issue. Chances are you are not addressing the file properly and so it's not actually getting loaded.

Gander at the JSP FAQ for info on successfully using server-relative URLs to address resources such as JS files.

Your best bet for avoiding those rage-inducing browser differences is to employ a JavaScript library that has already done all the hard work for you. I personally am a big fan of jQuery (to the extent that I ended up writing a book about it).

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

I am mighty! And this is a mighty small ad:

Clean our rivers and oceans from home

https://www.kickstarter.com/projects/paulwheaton/willow-feeders