Member Avatar for chellethecat

I decided to try and redo a site I'd had active ages ago and while looking over things to see what needed to be fixed, tweaked, and just in general redone I discovered that while viewing the site in IE everything works just as it should, but in Firefox the scrolling script doesn't seem to be working.

I didn't write the original piece of code, and so I'm kind of stumped as to how to fix it to work in Firefox. I do know the problem is somewhere in this chunk of code however. Any help on this would be greatly appreciated.

<script language="JavaScript" SRC="dynlayer.js"></SCRIPT>
<script language="JavaScript" SRC="miniscroll.js"></SCRIPT>

<script language="JavaScript">

<!--
function init() {
        DynLayerInit()        
	myscroll = new MiniScroll(scrollWindow,scrollContent)
}
//-->


</SCRIPT>
<STYLE TYPE="text/css">
<!--
#scrollWindowDiv {position:absolute; left:0; top:5; width:400; height:250; clip:rect(0,400,250,0);}
#scrollContentDiv {position:absolute; left:0; top:5; width:400;}
#scrollbtnDiv {position:absolute; left:400; top:5; width:30;}-->
</STYLE>

<script language="JavaScript"> 

<!--
preloadwh1 = new Image();
preloadwh1.src = "up.gif";
preloadwh2 = new Image();
preloadwh2.src = "down.gif";
preloadlogo = new Image();
preloadlogo.src = "logo.jpg";// -->
</script>
</HEAD>
<body onLoad="init()" text="#000000" vlink="#6699FF" link="#6699FF" alink="#000000" bgcolor="#FFFFFF" topmargin="10" leftmargin="0" marginwidth="0" marginheight="0">
<DIV ID="scrollWindowDiv">
<DIV ID="scrollContentDiv">
  • 4 Contributors
  • 18 Replies
  • 222 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by langsor
Member Avatar for Thirusha

Have u tried using firefox's firebug?

I copied the code u provided and it doesnt work because DynLayerInit is undefined, i suspect it is in the dynlayer.js file. which u havent provided.

Please provide the other js files as well, it would help alot.

Member Avatar for chellethecat

ACK! Sorry, I forgot completely about those... There are two .js files that are supposed to work together to create the scrolling effect. The first is the miniscroll.js file which I don't think there is a problem with from what I can tell. Then there is the dynlayer.js file, which looking at I've found a problematic block (and quite possibly the one responsible for the malfunction) that I don't know how to edit or change. I've attached both of the files, but below is what I believe might be the problem.

// BrowserCheck Object
function BrowserCheck() {
	var b = navigator.appName
	if (b=="Netscape") this.b = "ns"
	else if (b=="Microsoft Internet Explorer") this.b = "ie"
	else this.b = b
	this.version = navigator.appVersion
	this.v = parseInt(this.version)
	this.ns = (this.b=="ns" && this.v>=4)
	this.ns4 = (this.b=="ns" && this.v==4)
	this.ns5 = (this.b=="ns" && this.v==5)
	this.ie = (this.b=="ie" && this.v>=4)
	this.ie4 = (this.version.indexOf('MSIE 4')>0)
	this.ie5 = (this.version.indexOf('MSIE 5')>0)
	this.min = (this.ns||this.ie)
}
is = new BrowserCheck()
// Dynamic Layer Object
// sophisticated layer/element targeting and animation object which provides the core functionality needed in most DHTML applications
// 19990604

// Copyright (C) 1999 Dan Steinman
// Distributed under the terms of the GNU Library General Public License
// Available at http://www.dansteinman.com/dynapi/

function DynLayer(id,nestref,frame) {
	if (!is.ns5 && !DynLayer.set && !frame) DynLayerInit()
	this.frame = frame || self
	if (is.ns) {
		if (is.ns4) {
			if (!frame) {
				if (!nestref) var nestref = DynLayer.nestRefArray[id]
				if (!DynLayerTest(id,nestref)) return
				this.css = (nestref)? eval("document."+nestref+".document."+id) : document.layers[id]
			}
			else this.css = (nestref)? eval("frame.document."+nestref+".document."+id) : frame.document.layers[id]
			this.elm = this.event = this.css
			this.doc = this.css.document
		}
		else if (is.ns5) {
			this.elm = document.getElementById(id)
			this.css = this.elm.style
			this.doc = document
		}
		this.x = this.css.left
		this.y = this.css.top
		this.w = this.css.clip.width
		this.h = this.css.clip.height
	}
	else if (is.ie) {
		this.elm = this.event = this.frame.document.all[id]
		this.css = this.frame.document.all[id].style
		this.doc = document
		this.x = this.elm.offsetLeft
		this.y = this.elm.offsetTop
		this.w = (is.ie4)? this.css.pixelWidth : this.elm.offsetWidth
		this.h = (is.ie4)? this.css.pixelHeight : this.elm.offsetHeight
	}
	this.id = id
	this.nestref = nestref
	this.obj = id + "DynLayer"
	eval(this.obj + "=this")
}
function DynLayerMoveTo(x,y) {
	if (x!=null) {
		this.x = x
		if (is.ns) this.css.left = this.x
		else this.css.pixelLeft = this.x
	}
	if (y!=null) {
		this.y = y
		if (is.ns) this.css.top = this.y
		else this.css.pixelTop = this.y
	}
}
function DynLayerMoveBy(x,y) {
	this.moveTo(this.x+x,this.y+y)
}
function DynLayerShow() {
	this.css.visibility = (is.ns4)? "show" : "visible"
}
function DynLayerHide() {
	this.css.visibility = (is.ns4)? "hide" : "hidden"
}
DynLayer.prototype.moveTo = DynLayerMoveTo
DynLayer.prototype.moveBy = DynLayerMoveBy
DynLayer.prototype.show = DynLayerShow
DynLayer.prototype.hide = DynLayerHide
DynLayerTest = new Function('return true')

// DynLayerInit Function
function DynLayerInit(nestref) {
	if (!DynLayer.set) DynLayer.set = true
	if (is.ns) {
		if (nestref) ref = eval('document.'+nestref+'.document')
		else {nestref = ''; ref = document;}
		for (var i=0; i<ref.layers.length; i++) {
			var divname = ref.layers[i].name
			DynLayer.nestRefArray[divname] = nestref
			var index = divname.indexOf("Div")
			if (index > 0) {
				eval(divname.substr(0,index)+' = new DynLayer("'+divname+'","'+nestref+'")')
			}
			if (ref.layers[i].document.layers.length > 0) {
				DynLayer.refArray[DynLayer.refArray.length] = (nestref=='')? ref.layers[i].name : nestref+'.document.'+ref.layers[i].name
			}
		}
		if (DynLayer.refArray.i < DynLayer.refArray.length) {
			DynLayerInit(DynLayer.refArray[DynLayer.refArray.i++])
		}
	}
	else if (is.ie) {
		for (var i=0; i<document.all.tags("DIV").length; i++) {
			var divname = document.all.tags("DIV")[i].id
			var index = divname.indexOf("Div")
			if (index > 0) {
				eval(divname.substr(0,index)+' = new DynLayer("'+divname+'")')
			}
		}
	}
	return true
}
DynLayer.nestRefArray = new Array()
DynLayer.refArray = new Array()
DynLayer.refArray.i = 0
DynLayer.set = false

// Slide Methods
function DynLayerSlideTo(endx,endy,inc,speed,fn) {
	if (endx==null) endx = this.x
	if (endy==null) endy = this.y
	var distx = endx-this.x
	var disty = endy-this.y
	this.slideStart(endx,endy,distx,disty,inc,speed,fn)
}
function DynLayerSlideBy(distx,disty,inc,speed,fn) {
	var endx = this.x + distx
	var endy = this.y + disty
	this.slideStart(endx,endy,distx,disty,inc,speed,fn)
}
function DynLayerSlideStart(endx,endy,distx,disty,inc,speed,fn) {
	if (this.slideActive) return
	if (!inc) inc = 10
	if (!speed) speed = 20
	var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc
	if (num==0) return
	var dx = distx/num
	var dy = disty/num
	if (!fn) fn = null
	this.slideActive = true
	this.slide(dx,dy,endx,endy,num,1,speed,fn)
}
function DynLayerSlide(dx,dy,endx,endy,num,i,speed,fn) {
	if (!this.slideActive) return
	if (i++ < num) {
		this.moveBy(dx,dy)
		this.onSlide()
		if (this.slideActive) setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+num+","+i+","+speed+",\""+fn+"\")",speed)
		else this.onSlideEnd()
	}
	else {
		this.slideActive = false
		this.moveTo(endx,endy)
		this.onSlide()
		this.onSlideEnd()
		eval(fn)
	}
}
function DynLayerSlideInit() {}
DynLayer.prototype.slideInit = DynLayerSlideInit
DynLayer.prototype.slideTo = DynLayerSlideTo
DynLayer.prototype.slideBy = DynLayerSlideBy
DynLayer.prototype.slideStart = DynLayerSlideStart
DynLayer.prototype.slide = DynLayerSlide
DynLayer.prototype.onSlide = new Function()
DynLayer.prototype.onSlideEnd = new Function()

// Clip Methods
function DynLayerClipInit(clipTop,clipRight,clipBottom,clipLeft) {
	if (is.ie) {
		if (arguments.length==4) this.clipTo(clipTop,clipRight,clipBottom,clipLeft)
		else if (is.ie4) this.clipTo(0,this.css.pixelWidth,this.css.pixelHeight,0)
	}
}
function DynLayerClipTo(t,r,b,l) {
	if (t==null) t = this.clipValues('t')
	if (r==null) r = this.clipValues('r')
	if (b==null) b = this.clipValues('b')
	if (l==null) l = this.clipValues('l')
	if (is.ns) {
		this.css.clip.top = t
		this.css.clip.right = r
		this.css.clip.bottom = b
		this.css.clip.left = l
	}
	else if (is.ie) this.css.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}
function DynLayerClipBy(t,r,b,l) {
	this.clipTo(this.clipValues('t')+t,this.clipValues('r')+r,this.clipValues('b')+b,this.clipValues('l')+l)
}
function DynLayerClipValues(which) {
	if (is.ie) var clipv = this.css.clip.split("rect(")[1].split(")")[0].split("px")
	if (which=="t") return (is.ns)? this.css.clip.top : Number(clipv[0])
	if (which=="r") return (is.ns)? this.css.clip.right : Number(clipv[1])
	if (which=="b") return (is.ns)? this.css.clip.bottom : Number(clipv[2])
	if (which=="l") return (is.ns)? this.css.clip.left : Number(clipv[3])
}
DynLayer.prototype.clipInit = DynLayerClipInit
DynLayer.prototype.clipTo = DynLayerClipTo
DynLayer.prototype.clipBy = DynLayerClipBy
DynLayer.prototype.clipValues = DynLayerClipValues

// Write Method
function DynLayerWrite(html) {
	if (is.ns) {
		this.doc.open()
		this.doc.write(html)
		this.doc.close()
	}
	else if (is.ie) {
		this.event.innerHTML = html
	}
}
DynLayer.prototype.write = DynLayerWrite

// BrowserCheck Object
function BrowserCheck() {
	var b = navigator.appName
	if (b=="Netscape") this.b = "ns"
	else if (b=="Microsoft Internet Explorer") this.b = "ie"
	else this.b = b
	this.version = navigator.appVersion
	this.v = parseInt(this.version)
	this.ns = (this.b=="ns" && this.v>=4)
	this.ns4 = (this.b=="ns" && this.v==4)
	this.ns5 = (this.b=="ns" && this.v==5)
	this.ie = (this.b=="ie" && this.v>=4)
	this.ie4 = (this.version.indexOf('MSIE 4')>0)
	this.ie5 = (this.version.indexOf('MSIE 5')>0)
	this.min = (this.ns||this.ie)
}
is = new BrowserCheck()

// CSS Function
function css(id,left,top,width,height,color,vis,z,other) {
	if (id=="START") return '<STYLE TYPE="text/css">\n'
	else if (id=="END") return '</STYLE>'
	var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'px; top:'+top+'px;' : '#'+id+' {position:relative;'
	if (arguments.length>=4 && width!=null) str += ' width:'+width+'px;'
	if (arguments.length>=5 && height!=null) {
		str += ' height:'+height+'px;'
		if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);'
	}
	if (arguments.length>=6 && color!=null) str += (is.ns)? ' layer-background-color:'+color+';' : ' background-color:'+color+';'
	if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';'
	if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';'
	if (arguments.length==9 && other!=null) str += ' '+other
	str += '}\n'
	return str
}
function writeCSS(str,showAlert) {
	str = css('START')+str+css('END')
	document.write(str)
	if (showAlert) alert(str)
}
// MiniScroll Object
// gives controls to a set of 2 layers for scrolling
// 19990410

// Copyright (C) 1999 Dan Steinman
// Distributed under the terms of the GNU Library General Public License
// Available at http://www.dansteinman.com/dynapi/

function MiniScroll(window,content) {
	this.window = window
	this.content = content
	this.inc = 8
	this.speed = 20
	this.contentHeight = (is.ns)? this.content.doc.height : this.content.elm.scrollHeight
	this.contentWidth = (is.ns)? this.content.doc.width : this.content.elm.scrollWidth
	this.up = MiniScrollUp
	this.down = MiniScrollDown
	this.left = MiniScrollLeft
	this.right = MiniScrollRight
	this.stop = MiniScrollStop
	this.activate = MiniScrollActivate
	this.activate(this.contentWidth,this.contentHeight)
}
function MiniScrollActivate() {
	this.offsetHeight = this.contentHeight-this.window.h
	this.offsetWidth = this.contentWidth-this.window.w
	this.enableVScroll = (this.offsetHeight>0)
	this.enableHScroll = (this.offsetWidth>0)
}
function MiniScrollUp() {
	if (this.enableVScroll) this.content.slideTo(null,0,this.inc,this.speed)
}
function MiniScrollDown() {
	if (this.enableVScroll) this.content.slideTo(null,-this.offsetHeight,this.inc,this.speed)
}
function MiniScrollLeft() {
	if (this.enableHScroll) this.content.slideTo(0,null,this.inc,this.speed)
}
function MiniScrollRight() {
	if (this.enableHScroll) this.content.slideTo(-this.offsetWidth,null,this.inc,this.speed)
}
function MiniScrollStop() {
	this.content.slideActive = false
}
Member Avatar for Thirusha

The problem is that in firefox it is not finding the div tags in the body of your file.
The function that has the problem is located in the dynlayer.js file

function DynLayerInit(nestref) {
	if (!DynLayer.set) DynLayer.set = true
	if (is.ns) {
		if (nestref) ref = eval('document.'+nestref+'.document')
		else {nestref = ''; ref = document;}
		
		for (var i=0; i<document.getElementsByTagName("div").length; i++) {
			var divname = document.getElementsByTagName("div")[i].id
			var index = divname.indexOf("Div")
			if (index > 0) {
				eval(divname.substr(0,index)+' = new DynLayer("'+divname+'")')
			}
			
		}
		if (DynLayer.refArray.i < DynLayer.refArray.length) {
			DynLayerInit(DynLayer.refArray[DynLayer.refArray.i++])
		}
	}
	else if (is.ie) {
		for (var i=0; i<document.all.tags("DIV").length; i++) {
			var divname = document.all.tags("DIV")[i].id
			var index = divname.indexOf("Div")
			if (index > 0) {
				eval(divname.substr(0,index)+' = new DynLayer("'+divname+'")')
			}
		}
	}
	return true
}

U can replace that function with this one, i hope it will work for u.

Member Avatar for Troy III

Please try:

<!--
function init() {
        DynLayerInit()        
	myscroll = new MiniScroll("scrollWindowDiv", "scrollContentDiv")
}
//-->

Regards

Member Avatar for chellethecat

Thirusha, I tried what you suggested however I didn't notice a change - in IE or Firefox.

Please try:

<!--
function init() {
        DynLayerInit()        
	myscroll = new MiniScroll("scrollWindowDiv", "scrollContentDiv")
}
//-->

Regards

Sorry if this sounds like a stupid question, but where in the file should this code be placed? As I stated, I did not write the code in the first place (and I am actually, very limited in my knowledge of JS when it comes to writing code).

Member Avatar for Troy III

Sorry, I thought you knew.
-Simply replace your existing init function with this one.

(It is located in the head of your document, right after your inclusion of miniscroll and dylayer external script files, and before your style definitions, that is between them two in the header of your main html document).

Cheers.

Member Avatar for chellethecat

Oiy... I don't know how I didn't understand where you meant that to go...

Okay, I changed that on one of the pages but it didn't appear to have made any difference to the behavior. What's more, is that after making that change, it no longer works in IE.

Just to make sure that I'm not just a great big schmuck... this is after all - almost ten year old code I'm trying to get to work... I've included the URL for the site I'm trying to make work.

http://is.rt-games.com/index2.html

I left the code you had me change on the first page (message.html)
All other pages reached by the menu have the code as it was before.

Member Avatar for Thirusha

In the miniscroll.js replace the following lines

this.contentHeight = (is.ns)? this.content.doc.height : this.content.elm.scrollHeight
this.contentWidth = (is.ns)? this.content.doc.width : this.content.elm.scrollWidth

with this

this.contentHeight = (is.ns)? this.content.scrollHeight : this.content.scrollHeight
this.contentWidth = (is.ns)? this.content.scrollWidth : this.content.scrollWidth

I tried to test it on my side with some of your code from the site, and no error is shown.

Member Avatar for chellethecat

Thirusha, I replaced the code as you advised but like before no change in performance is seen. It doesn't give an error, but then again it never did in the first place. The scrolling just doesn't work... this is unchanged.

It should be noted that the change Troy suggested was only done to one HTML page and impacted that page only. Your change has now broken the scrolling effect in IE as well as it not working in Firefox still. I've left it in place on the site so you can see it as well.

To look at just pages without the frames...
http://is.rt-games.com/message.html <-- This is the page that has Troy's change on it.

http://is.rt-games.com/main.html <-- This is a page that has had no changes made to it and is only effected by changes to the .js files.

Member Avatar for Thirusha

My apologies for breaking your code in IE :) Hope i dont break it further

Good news, i got the code to work in IE (i m using ie6 though) again, bad news it will not work in FF, i think it has a problem getting the height of the div using this.window.h from miniscroll.js
this.window.h returns an integer in IE and returns an undefined in FF.

I took the source from your site and made some changes in the html file and one in the miniscroll.js, changes are highlighted in red:

<HTML>
<HEAD>
<TITLE></TITLE>
<style>
     A:link {text-decoration: none; cursor: hand;}
     A:visited {text-decoration: none; cursor: hand;}
     A:text{text-decoration: none; text-align: justify; cursor: hand;}
     </style>
<base target="home">
<LINK REL="Stylesheet" TITLE="Main Stylesheet" MEDIA="Screen" HREF="innerspace.css">

<script language="JavaScript" SRC="dynlayer.js">

</SCRIPT>
<script language="JavaScript" SRC="miniscroll.js">

</SCRIPT>

<script language="JavaScript">

<!--
function init() {
        DynLayerInit()
	myscroll = new MiniScroll(scrollWindow,scrollContent)
}
//-->


</SCRIPT>
<STYLE TYPE="text/css">
<!--
#scrollWindowDiv {position:absolute; left:0; top:5; width:400; height:250; clip:rect(0,400,250,0);}
#scrollContentDiv {position:absolute; left:0; top:5; width:400;}
#scrollbtnDiv {position:absolute; left:400; top:5; width:30;}-->
</STYLE>

<script language="JavaScript">

<!--
preloadwh1 = new Image();
preloadwh1.src = "up.gif";
preloadwh2 = new Image();
preloadwh2.src = "down.gif";
preloadlogo = new Image();
preloadlogo.src = "logo.jpg";// -->
</script>
</HEAD>
<body onLoad="init()" text="#000000" vlink="#6699FF" link="#6699FF" alink="#000000" bgcolor="#FFFFFF" topmargin="10" leftmargin="0" marginwidth="0" marginheight="0">
<DIV ID="scrollWindowDiv">
<DIV ID="scrollContentDiv">
<table border="0" cellspacing="0" cellpadding="5" width="400">
<tr>
<td background="title.jpg" class="title"><b><font size=3 color=000000>Message</font></b></td>
</tr>
<tr>
<td class="normal">
<img align="right" src="logo.jpg" alt="" width="100" height="83">
A soft mechanical voice calls out to you. <br>
<br>"Greetings mortals and welcome... to Innerspace..."<br>
<br>
"Here is where anything can be reality and nothing is as it seems. There are a few brief
rules to Innerspace. Respect that which is your "realm" and do not invade someone else's
space without obtaining permission first; otherwise you could end up in grave danger."<br>
<br>
A flickering inmage forms before your eyes, a thin lanky man... or is it a woman? There's
no way to be for certian. It bows, a smirk on it's blood red lips.<br>
<br>
"I am Zio... and if you have any questions, I am the one you should ask. Then again, you shouldn't
have any questions. No onliner would..."<br>
<br>
The figure peers at you, as if really seeing you, seeing <b>through</b> you.<br>
<br>
"For an onliner, you seem a bit lost..."<br>
<br>
Then it shrugs and turns to lead you further into Innerspace. <br>
<br>
"Perhaps you'd like to start off in the <a href=library-f.html>library</a>?"<br>
<br>
<br><br>
<font color="#6699FF">
<b>NOTICE:</b></font>
<br>07.14.08 :: Eight years later, Innerspace is back online.
<br>03.13.00 :: Innerspace is now up and running for your use.<br>
<br>
</td>
</tr>
</table>
</div>
</div>
<DIV ID="scrollbtnDiv">
<A  onMouseDown="myscroll.up(); return false;" onMouseUp="myscroll.stop()" onMouseOut="myscroll.stop()">
<img src="up.gif" border=0></A>
<br>
<BR>
<A  onMouseDown="myscroll.down(); return false;" onMouseUp="myscroll.stop()" onMouseOut="myscroll.stop()">
<img src="down.gif" border=0></A>
</DIV>
</body>
</html>

i removed the href attributes in the a tags highlighted in green.

In miniscroll.js:

function MiniScroll(window,content) {
	this.window = window
	this.content = content
	this.inc = 8
	this.speed = 20
	//this.contentHeight = (is.ns)? this.content.doc.height : this.content.elm.scrollHeight
	this.contentHeight = this.content.elm.scrollHeight
	this.contentWidth = (is.ns)? this.content.doc.width : this.content.elm.scrollWidth
	this.up = MiniScrollUp
	this.down = MiniScrollDown
	this.left = MiniScrollLeft
	this.right = MiniScrollRight
	this.stop = MiniScrollStop
	this.activate = MiniScrollActivate
	this.activate(this.contentWidth,this.contentHeight)
}

I commented out the code that was there and added the line

this.contentHeight = this.content.elm.scrollHeight

I m trying to get the equivalent of "this.window.h" for firefox, but so far nothing is working.

Member Avatar for chellethecat

Oh it's no big deal. I've broken my own code more times then I can count :) Just the way things go when trying to find the right combination.

The code without any changes works perfectly in IE7 and 6. You click the arrow image and the page would scroll like you were using a scroll bar.

In Firefox it just sits there; unless I open up just the page with the scroll buttons on it, then when I click it tries to open up a new browser window for some reason.

If I remove the href attributes, won't that break the buttons then?

Member Avatar for Thirusha

u have an onMouseDown and other onmouse methods on the buttons so the href doesnt matter, it was also opening new windows for me, in both IE and FF.

Member Avatar for Thirusha

I think i got it to work, i changed a function in the dynlayer.js file

function DynLayer(id,nestref,frame) {

	if (!is.ns5 && !DynLayer.set && !frame) DynLayerInit()
	this.frame = frame || self
	if (is.ns) {
		if (is.ns4) {
			if (!frame) {
				if (!nestref) var nestref = DynLayer.nestRefArray[id]
				if (!DynLayerTest(id,nestref)) return
				this.css = (nestref)? eval("document."+nestref+".document."+id) : document.layers[id]
			}
			else this.css = (nestref)? eval("frame.document."+nestref+".document."+id) : frame.document.layers[id]
			this.elm = this.event = this.css
			this.doc = this.css.document
		}
		else if (is.ns5) {
			this.elm = document.getElementById(id)
			this.css = this.elm.style
			this.doc = document
		}
		
		
                //this.x = this.css.left
		//this.y = this.css.top
                this.x = this.elm.offsetLeft
		this.y = this.elm.offsetTop
		this.w = this.css.clip.width
		this.h = this.css.clip.height
		
	}
	else if (is.ie) {
		this.elm = this.event = this.frame.document.all[id]
		this.css = this.frame.document.all[id].style
		this.doc = document
		this.x = this.elm.offsetLeft
		this.y = this.elm.offsetTop
		this.w = (is.ie4)? this.css.pixelWidth : this.elm.offsetWidth
		this.h = (is.ie4)? this.css.pixelHeight : this.elm.offsetHeight
		
	}
	this.id = id
	this.nestref = nestref
	this.obj = id + "DynLayer"
	eval(this.obj + "=this")
}

the change is highighted in red

Member Avatar for chellethecat

I want to thank those that tried to help with this problem.
In light of the code just not working in Firefox (it worked in IE flawlessly from the start) I've opted to just completely tear down and redesign the website. I'm taking this as a sign that it's time to let go and move on. *G*

Member Avatar for langsor

Coming in after the conversation, I wanted to make a note about JavaScript and the latest-greatest approach to code like this.

In almost all cases "browser sniffer" (detecting the specific browser like Internet Explorer or Firefox, and the browser version like 4, 5.5, 6, 7) code is to be avoided, since it cannot anticipate future releases and functionality, and also is almost completely unnecessary (thankfully)--case in point is your scrolling code issue.

What the standard approach is these days is feature testing. See if a feature is supported, and if not, test for a comparable feature ... go through the list of all features that might work for your objective (scroll the window) and use the one that works, or provide a script-less alternative if none of them do.

Having said all that, I made a little scrolling window that works in IE7, FF3, Opera 9.51, I did not give it a script-less alternative though.

And yes, doing this stuff is my idea of fun ... :-)

<html>
<head>
<style type="text/css">
body {
  padding: 60px; /* general styling */
}
#viewport {
  position: relative; /* REQUIRED */
  width: 220px; /* content + button width */
  height: 200px; /* adjust as desired */
  overflow: hidden; /* REQUIRED */
  border: 1px solid indigo; /* adjust as desired */
  background: silver; /* adjust as desired */
}
#content {
  position: absolute; /* REQUIRED -- or 'relative' */
  top: 0; /* REQUIRED */
  width: 200px; /* adjust as desired */
  min-height: 200px; /* adjust as desired */
  background: white; /* adjust as desired */
}
#content p {
  margin: 0 0 20px; /* inside content formatting */
  padding: 0; /* inside content formatting */
  font-size: 0.8em; /* adjust as desired */
}
#scroll_up, #scroll_dn {
  cursor: pointer; /* suggested */
  position: absolute; /* suggested */
  top: -1px; /* adjust as desired */
  right: -1px; /* adjust as desired */
  height: 20px; /* adjust as desired */
  width: 20px; /* adjust as desired */
  background: yellow; /* adjust as desired */
  border: 1px solid indigo; /* adjust as desired */
}
#scroll_dn {
  top: 19px; /* adjust as desired */
}
</style>
<!--[if IE]>
<style type="text/css">
#content {
  height: 200px; /* same as min-height for IE */
}
</style>
<![endif]-->
<script type="text/javascript">

window.onload = function () {

  var scroll_up = document.getElementById('scroll_up');
  var scroll_dn = document.getElementById('scroll_dn');
  var content = document.getElementById('content');
  
  var pps = 40; // pixels per second scroll speed
  
  // clears the scrolling behavior
  scroll_up.click = scroll_target;
  scroll_up.onmouseup = scroll_target;
  scroll_up.onmouseout = scroll_target;
  
  // activates scrolling behavior
  scroll_up.onmousedown = function () {
    scroll_target( 'up', content, pps );
  };
  
  // clears the scrolling behavior
  scroll_dn.click = scroll_target;
  scroll_dn.onmouseup = scroll_target;
  scroll_dn.onmouseout = scroll_target;
  
  // activates scrolling behavior
  scroll_dn.onmousedown = function () {
    scroll_target( 'dn', content, pps );
  };
}

scroll_target.scroller;
function scroll_target ( direction, target, speed ) {
  window.clearInterval( scroll_target.scroller );
  if ( target ) {
    var top = target.style.top;
    target.style.top = ( top ) ? top : '0';
    var max = target.offsetHeight - target.parentNode.offsetHeight;
    scroll_target.scroller = window.setInterval ( function () {
      top = target.style.top.match( /-?\d+/ );
      if ( top < -max ) {
        target.style.top = -max + 'px';
        scroll_target();
        return;
      }
      if ( top > 0 ) {
        target.style.top = '0';
        scroll_target();
        return;
      }
      target.style.top = ( direction == 'up' ) ? 
        top - 1 + 'px' : top - 0 + 1 + 'px';
    }, 1 / speed * 1000  );
  }
}

</script>
</head>
<body>
<div id="viewport">
  <div id="scroll_up"></div>
  <div id="scroll_dn"></div>
  <div id="content">
    <p><strong>"Jack and Jill went up the hill"</strong></p>
    <p>Jack and Jill went up the hill<br />
      The fetch a pail of water;<br />
      Jack feel down and broke his crown,<br />
      And Jill came tumbling after.</p>
    <p>Up got Jack and home did he trot,<br />
      As fast as he could caper;<br />
      Went to bed and bound his head,<br />
      With vinegar and brown paper.</p>
    <p>When Jill came in how she did grin<br />
      To see Jack's paper plaster;<br />
      Mother vexed, did whip her next;<br />
      For causing Jack's disaster.</p>
  </div>
</div>
</body>
</html>

* I did not test this thoroughly in various layouts, but it seems to work fine on an empty page. :-)

...

Member Avatar for chellethecat

langsor, I could HUG you!

Just when I'd resolved to having to redesign - this works perfectly!
I even managed to adjust it to show my up and down buttons and make it blend with the site's appearance.

Thank you, thank you, thank you! :)
Now I just have to add it to all the pages hehe

Member Avatar for langsor

I'm very glad to have been able to help ... :-)

Ciao

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.