•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 403,515 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,922 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2415 | Replies: 18 | Solved
 |
•
•
Join Date: Jul 2008
Posts: 9
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
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.
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.
•
•
Join Date: Mar 2008
Posts: 108
Reputation:
Rep Power: 1
Solved Threads: 12
Junior Poster
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:
i removed the href attributes in the a tags highlighted in green.
In miniscroll.js:
I commented out the code that was there and added the line
I m trying to get the equivalent of "this.window.h" for firefox, but so far nothing is working.
Hope i dont break it furtherGood 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.
•
•
Join Date: Jul 2008
Posts: 9
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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?
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?
•
•
Join Date: Mar 2008
Posts: 108
Reputation:
Rep Power: 1
Solved Threads: 12
Junior Poster
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.
•
•
Join Date: Mar 2008
Posts: 108
Reputation:
Rep Power: 1
Solved Threads: 12
Junior Poster
I think i got it to work, i changed a function in the dynlayer.js file
the change is highighted in red
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
•
•
Join Date: Jul 2008
Posts: 9
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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*
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*
•
•
Join Date: Aug 2008
Posts: 360
Reputation:
Rep Power: 1
Solved Threads: 30
Posting Whiz
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 ... :-)
* I did not test this thoroughly in various layouts, but it seems to work fine on an empty page. :-)
...
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. :-)
...
•
•
Join Date: Jul 2008
Posts: 9
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
•
•
•
•
beta bon browser browsers browsing development echo email encryption eu europe firefox gecko html internet internet explorer internet explorer 7 javascript leak linux memory microsoft mozilla networking news open source open-source opera patch phishing scams security social software super testing users web webmail
- Works in Firefox, not in IE7 (PHP)
- Javascript fails in Firefox (JavaScript / DHTML / AJAX)
- Dynamic iFrame height, not working in ie without refresh. (JavaScript / DHTML / AJAX)
- Opera Javascript bug? (works in Firefox) (JavaScript / DHTML / AJAX)
- Help re scrolling bar not working in firefox, CSS problem (HTML and CSS)
- Javascript Firefox Help (JavaScript / DHTML / AJAX)
- Javascript and Firefox ISSUES (JavaScript / DHTML / AJAX)
- Need JavaScript/Firefox HELP (JSP)
- Javascript problem in FIREFOX (JavaScript / DHTML / AJAX)
- script works in Opera but not Firefox (Python)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Accordion script
- Next Thread: Troubleshoot script
