Hi Marja,

I have made some pages in which all content is located within a vertically and horizontally centered table. There are links to two different pages like this below. In the first page there are two scrollers, and in the second there is one. Both pages work perfectly in IE, with no problems. In Netscape and Opera though, there is this problem with both pages:

In the two scroller page, when both scroller bars are all the way down, the browser's scrollbar disappears and the table moves, losing alignment with the two scrollers.

In the the one scroller page, when the scroller is scrolled all the way, the same thing happens with the browser scrollbar. I noticed that IE doesn't show a browser scrollbar at all. I thought maybe there's a way to make Netscape and Opera behave the same way.

Please take a look at these pages: (sorry, when you click on a link, they go to e-mail; you'll have to enter them into your browser, thanks)

home.netcom.com/~jack@netcom.com
home.netcom.com/~jack@netcom.com/test_2.htm

Regards...Jack Gaskins

Edited by - userjack on 23 Jun 2004 07:27:36

Hi Jack,

Scroller Genie is built with nested layers and the outermost layer has 'overflow:hidden' assigned to it. While that does hide the overflow in Opera and in Mozilla based browsers in the sense that the overflow is not visible (otherwise the scroller would be of no use at all), these browsers still spawn a scrollbar if the hidden content is longer than the current browser window viewport. And they remove the scrollbar again if the bottom of the scroller content is within the viewport.

All DHTML scrollers suffer from this issue, not just Scroller Genie.

Scroller Genie responds to browser window resizing by re-anchoring the scroller. But in the case of the scrollbar issue the window itself is not resized, and thus Scroller Genie has no way of 'knowing' that it should adjust its position.

I could build checks for this into the Scroller Genie scripts on every scroll movement, but that would involve quite a bit of extra JavaScript coding which would increase loading time of the page. And in most layouts this issue is not so prominent and the extra JavaScript would just be overkill.




--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/

Hi Marja,

I figured it would be overkill. I'll use a different layout. Thanks for your help.

Regards...Jack Gaskins

Hi Jack,

Besides anchoring the scroller to an object on the page, there's another technique you can use to relate the position of the scroller to your centered table. It does require some manual editing of your HTML source though.

For this, you would need to insert a relative positioned DIV element in the table cell where you want the scroller to be displayed. And then you would need to cut/paste all the scroller HTML into that newly defined relative DIV.

Eg.
<pre id=code><font face=courier size=2 id=code>
&lt;table align="center"&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;div style="position: relative; width: 300px; height: 300px;"&gt;Paste the Scroller Genie HTML here.&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</font id=code></pre id=code>

Make sure to specify the same width/height for the relative DIV as for the scroller, because otherwise the table cell will collapse.
(It will still collapse in NS4.x, so if you need to support that browser you will need to be creative yourself. <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle> )

Furthermore, adjust the top/left coordinate of the scroller to reflect the fact that it is now positioned relative to that DIV instead of to the document.

Hope this helps.

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/


Edited by - MarjaR on 26 Jun 2004 01:38:05

Hi Marja,

Thank you for the extra input. I enjoy learning about and using code when I have the time. Especially when it works <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>. I made a page with your latest input and it works perfectly. The link is below. I've tried it in all browsers and the only problem, which is not a big deal at all, is a dot that appears on the page when viewed in opera and netscape. The dot is just above and left of the top left corner of the scroller. Internet Explorer has no problems. Please take a look. I am guessing that I've done something wrong, but I am hoping there's a way to fix it. Also, I can't tell from looking, but does centering the scroller this way take care of the jumping issue without having to apply the onload behavior and visibilty styles?

home.netcom.com/~jack@netcom.com/scrollcenter_5.htm

Thanks again,

Jack Gaskins

Edited by - userjack on 26 Jun 2004 18:52:21

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>Thank you for the extra input. I enjoy learning about and using code when I have the time. Especially when it works <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>. I made a page with your latest input and it works perfectly. The link is below. I've tried it in all browsers and the only problem, which is not a big deal at all, is a dot that appears on the page when viewed in opera and netscape. The dot is just above and left of the top left corner of the scroller. Internet Explorer has no problems. Please take a look. I am guessing that I've done something wrong, but I am hoping there's a way to fix it. <hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
The dot is an Iframe that is inserted into the page by Scroller Genie. Just cut/paste its code to just outside the relative DIV and it will be fine.
Eg.
<pre id=code><font face=courier size=2 id=code>
&lt;iframe name="dmx1IFrame" id="dmx1IFrame" src="about:blank" width="0" height="0"&gt;&lt;/iframe&gt;
&lt;div id="Layer1" style="position:relative; width:300px; height:300px; z-index:1"&gt;
&lt;div id="dmx1Scroller"&gt;
</font id=code></pre id=code>
instead of
<pre id=code><font face=courier size=2 id=code>
&lt;div id="Layer1" style="position:relative; width:300px; height:300px; z-index:1"&gt;
&lt;iframe name="dmx1IFrame" id="dmx1IFrame" src="about:blank" width="0" height="0"&gt;&lt;/iframe&gt;
&lt;div id="dmx1Scroller"&gt;
</font id=code></pre id=code>
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>Also, I can't tell from looking, but does centering the scroller this way take care of the jumping issue without having to apply the onload behavior and visibilty styles?<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
Yes, that's correct. The scroller is now directly in the right position when the page loads and does not need to be repositioned, thus preventing the 'jump'.

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/


Edited by - MarjaR on 27 Jun 2004 21:33:00

Edited by - MarjaR on 27 Jun 2004 21:34:03

Hi Marja,

Things are looking good, and I hope I won't have to bother you anymore on this topic <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle> . I have one more question. It is out of curiosity, rather than necessity, because I probably won't ever use a layout like this (but you never know). I have made a new page using everything I have learned from you on this topic, and it works flawlessly in every browser except Internet Explorer (the browser that had no problems originally <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle> ).
The one problem is: when I resize the page in IE, the scroller only repositions horizontally, and not vertically. If you resize the window and then reload the page, everything on the page relocates correctly, but I thought there may be another way. Maybe the page could reload automatically on a resize, or maybe there is an easier fix. I hope I am not going beyond the realms of what you'll support for this product.

Oh, and congratulations on the football match. Good luck in the semi-finals!

home.netcom.com/~ /scrollcenter_4.htm

Thanks a bunch,

Jack Gaskins

Edited by - userjack on 28 Jun 2004 03:03:51

Edited by - userjack on 28 Jun 2004 07:38:58

<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
The one problem is: when I resize the page in IE, the scroller only repositions horizontally, and not vertically. If you resize the window and then reload the page, everything on the page relocates correctly, but I thought there may be another way. Maybe the page could reload automatically on a resize, or maybe there is an easier fix.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
That seems to be a bug in IE. You can indeed work around that by reloading the page on window resizing.
Here's a small script to do that:
<pre id=code><font face=courier size=2 id=code>
function reloadPage() {
var bReload = false;
with (navigator) {
if ((appName=="Netscape"&&(parseInt(appVersion)==4)) { bReload = true; }
else if (document.all) { bReload = true; }
}
if (bReload) { location.reload(); }
}
</font id=code></pre id=code>
And then you would need to add an onResize event handler to the BODY tag:
<pre id=code><font face=courier size=2 id=code>
&lt;body
onLoad="dmxFSG1(1,1,7,25,0,0,0,0,'',0,0,0,1);MM_preloadImages('images/0011vscrllup_over.gif','images/0011vscrlldown_over.gif')" onResize="reloadPage()"&gt;
</font id=code></pre id=code>
Note that this onResize thing replaces the default MM_reloadPage() call on the page, so you need to remove that.

Hope this helps.

--
Marja Ribbers-de Vroed
www.flevooware.nl
www.flevooware.nl/dreamweaver/

Hi Marja,

It works great. Thanks for all of your help <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle> .

Regards...Jack Gaskins