JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Script works in IE, but not in Firefox

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved
1 2

•
•
Join Date: Jul 2008
Posts: 14
Reputation: chellethecat is an unknown quantity at this point 
Solved Threads: 0
chellethecat chellethecat is offline Offline
Newbie Poster

Re: Script works in IE, but not in Firefox

 
0
  #11
Jul 24th, 2008
To add to my post above, I've put the same two pages without Thirusha's code change in a different directory.

http://is.rt-games.com/temp/main.html <-- This page has had no changes made to it.

http://is.rt-games.com/temp/message.html <-- This page only has Troy's changes on it.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 317
Reputation: Thirusha is an unknown quantity at this point 
Solved Threads: 51
Thirusha's Avatar
Thirusha Thirusha is offline Offline
Posting Whiz

Re: Script works in IE, but not in Firefox

 
0
  #12
Jul 28th, 2008
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
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. 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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 14
Reputation: chellethecat is an unknown quantity at this point 
Solved Threads: 0
chellethecat chellethecat is offline Offline
Newbie Poster

Re: Script works in IE, but not in Firefox

 
0
  #13
Jul 28th, 2008
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 317
Reputation: Thirusha is an unknown quantity at this point 
Solved Threads: 51
Thirusha's Avatar
Thirusha Thirusha is offline Offline
Posting Whiz

Re: Script works in IE, but not in Firefox

 
0
  #14
Jul 29th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 317
Reputation: Thirusha is an unknown quantity at this point 
Solved Threads: 51
Thirusha's Avatar
Thirusha Thirusha is offline Offline
Posting Whiz

Re: Script works in IE, but not in Firefox

 
0
  #15
Jul 31st, 2008
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 14
Reputation: chellethecat is an unknown quantity at this point 
Solved Threads: 0
chellethecat chellethecat is offline Offline
Newbie Poster

Re: Script works in IE, but not in Firefox

 
0
  #16
Aug 12th, 2008
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*
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Script works in IE, but not in Firefox

 
0
  #17
Aug 14th, 2008
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 ... :-)
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body {
  5.   padding: 60px; /* general styling */
  6. }
  7. #viewport {
  8.   position: relative; /* REQUIRED */
  9.   width: 220px; /* content + button width */
  10.   height: 200px; /* adjust as desired */
  11.   overflow: hidden; /* REQUIRED */
  12.   border: 1px solid indigo; /* adjust as desired */
  13.   background: silver; /* adjust as desired */
  14. }
  15. #content {
  16.   position: absolute; /* REQUIRED -- or 'relative' */
  17.   top: 0; /* REQUIRED */
  18.   width: 200px; /* adjust as desired */
  19.   min-height: 200px; /* adjust as desired */
  20.   background: white; /* adjust as desired */
  21. }
  22. #content p {
  23.   margin: 0 0 20px; /* inside content formatting */
  24.   padding: 0; /* inside content formatting */
  25.   font-size: 0.8em; /* adjust as desired */
  26. }
  27. #scroll_up, #scroll_dn {
  28.   cursor: pointer; /* suggested */
  29.   position: absolute; /* suggested */
  30.   top: -1px; /* adjust as desired */
  31.   right: -1px; /* adjust as desired */
  32.   height: 20px; /* adjust as desired */
  33.   width: 20px; /* adjust as desired */
  34.   background: yellow; /* adjust as desired */
  35.   border: 1px solid indigo; /* adjust as desired */
  36. }
  37. #scroll_dn {
  38.   top: 19px; /* adjust as desired */
  39. }
  40. </style>
  41. <!--[if IE]>
  42. <style type="text/css">
  43. #content {
  44.   height: 200px; /* same as min-height for IE */
  45. }
  46. </style>
  47. <![endif]-->
  48. <script type="text/javascript">
  49.  
  50. window.onload = function () {
  51.  
  52.   var scroll_up = document.getElementById('scroll_up');
  53.   var scroll_dn = document.getElementById('scroll_dn');
  54.   var content = document.getElementById('content');
  55.  
  56.   var pps = 40; // pixels per second scroll speed
  57.  
  58.   // clears the scrolling behavior
  59.   scroll_up.click = scroll_target;
  60.   scroll_up.onmouseup = scroll_target;
  61.   scroll_up.onmouseout = scroll_target;
  62.  
  63.   // activates scrolling behavior
  64.   scroll_up.onmousedown = function () {
  65.     scroll_target( 'up', content, pps );
  66.   };
  67.  
  68.   // clears the scrolling behavior
  69.   scroll_dn.click = scroll_target;
  70.   scroll_dn.onmouseup = scroll_target;
  71.   scroll_dn.onmouseout = scroll_target;
  72.  
  73.   // activates scrolling behavior
  74.   scroll_dn.onmousedown = function () {
  75.     scroll_target( 'dn', content, pps );
  76.   };
  77. }
  78.  
  79. scroll_target.scroller;
  80. function scroll_target ( direction, target, speed ) {
  81.   window.clearInterval( scroll_target.scroller );
  82.   if ( target ) {
  83.     var top = target.style.top;
  84.     target.style.top = ( top ) ? top : '0';
  85.     var max = target.offsetHeight - target.parentNode.offsetHeight;
  86.     scroll_target.scroller = window.setInterval ( function () {
  87.       top = target.style.top.match( /-?\d+/ );
  88.       if ( top < -max ) {
  89.         target.style.top = -max + 'px';
  90.         scroll_target();
  91.         return;
  92.       }
  93.       if ( top > 0 ) {
  94.         target.style.top = '0';
  95.         scroll_target();
  96.         return;
  97.       }
  98.       target.style.top = ( direction == 'up' ) ? 
  99.         top - 1 + 'px' : top - 0 + 1 + 'px';
  100.     }, 1 / speed * 1000  );
  101.   }
  102. }
  103.  
  104. </script>
  105. </head>
  106. <body>
  107. <div id="viewport">
  108.   <div id="scroll_up"></div>
  109.   <div id="scroll_dn"></div>
  110.   <div id="content">
  111.     <p><strong>"Jack and Jill went up the hill"</strong></p>
  112.     <p>Jack and Jill went up the hill<br />
  113.       The fetch a pail of water;<br />
  114.       Jack feel down and broke his crown,<br />
  115.       And Jill came tumbling after.</p>
  116.     <p>Up got Jack and home did he trot,<br />
  117.       As fast as he could caper;<br />
  118.       Went to bed and bound his head,<br />
  119.       With vinegar and brown paper.</p>
  120.     <p>When Jill came in how she did grin<br />
  121.       To see Jack's paper plaster;<br />
  122.       Mother vexed, did whip her next;<br />
  123.       For causing Jack's disaster.</p>
  124.   </div>
  125. </div>
  126. </body>
  127. </html>

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

...
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 14
Reputation: chellethecat is an unknown quantity at this point 
Solved Threads: 0
chellethecat chellethecat is offline Offline
Newbie Poster

Re: Script works in IE, but not in Firefox

 
0
  #18
Aug 14th, 2008
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Script works in IE, but not in Firefox

 
0
  #19
Aug 14th, 2008
I'm very glad to have been able to help ... :-)

Ciao
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser captchaformproblem cart child close codes column css date debugger decimal dependent design disablefirebug dom download element embed engine enter error events ext file firefox focus form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp jump libcurl listbox maps masterpage math media menu microsoft mimic mp4 onmouseoutdivproblem onmouseover onreadystatechange paypal pdf php player position post problem programming prototype redirect safari scale scriptlets scroll search security select software sql toggle unicode variables w3c web website window windowofwords \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC