scrollable content II compatibility issues

[ghostdeer]

First off, I have spent two days troubleshooting this, and I'm afraid I really don't know enough about javascript to fix it myself. Many, many thanks to anybody who can help me. I don't even know if I've posted this in the right place, so please bear with me.

Here's the problem: I want a dynamic scrollable content window (which will be displaying php includes) to scroll up and down via mouseover imagemapped links. But I want it to be compatible with multiple browsers. I use Opera mostly that is what I'm using to create it. (oh and I have all current versions of the listed browsers)

http://www.theas.net/test2.php

This is where the Dynamic Drive Scrollable Content II code is up.

This is the Dynamic Drive code I'm trying to work with:http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

It definitely scrolls in Opera and IE. But not in Netscape, Mozilla or Firefox.
Ontop of that, the only problem I'm having right now with it scrolling in Opera and IE is that it doesn't scroll all the content. It cuts one sentence completely in half horizontally and then the rest of the content isn't there but blank space.

It's frustrating. I just want a code that works correctly in all those bowsers. I've seen demos that work in multiple browsers but how come when I try to do it, it doesn't work??

[ghostdeer]

This is day 4 of my attempts at getting this code to work right. I would really really like to have this instead of just regular scrollbars.

[Twey]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

[ghostdeer]

sorry. i posted the link to the code this time.

[Twey]

<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><AREA SHAPE="rect" ALT="" COORDS="77,0,190,58" HREF="#"></a>
<a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><AREA SHAPE="rect" ALT="" COORDS="191,0,316,58" HREF="#"></a>

You can't do this. Add the onmouseover and onmouseout handlers directly to the <area>s.

<area onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)" shape="rect" alt="" coords="77,0,190,58" href="#">
<area onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)" shape="rect" alt="" coords="191,0,316,58" href="#">

I don't know what you've done to the page, but earlier I could see your content (in Firefox 1.0.7) and now I can't.

[ghostdeer]

Oh wow. Thanks very much. That's one variation that I didn't try when I tried to fix the mouseover.

I dont know what I did to that page either, but I got it back now, and the new codes you gave me work. Hurray!!

There's only one small problem... It will scroll, but not the content. It'll scroll the container.

If you go back and look again, I have highlighted the content divs in lavender and the container divs in green so you can see what I mean.

Thank you so much for your help!! I'm really grateful.

[Twey]

I think you just need to make the content div bigger.

[ghostdeer]

that doesn't seem to be working, but i'll keep trying things.

[Twey]

Looking at your CSS stylesheet, we can see:

#content {
z-index: 1;
width:337px;
height:374px;

You shouldn't specify the height. If you remove the height: property, it should resize itself to fit the text properly.

[ghostdeer]

That was one of the many height properties I was messing around with last night to see if it made a difference. And it didn't. I was sure that it'd have something to do with that.

It will scroll all the lavender content now. Hurray! But it still scrolls up more of the green container.

But what I did notice is that in this part of the script:

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

If i change the number 100 to something bigger (like 200 or 300), there isn't as big of a space when the green container finally stops scrolling. But the bigger the space, the smaller the number. I will try that and see how that works out for me. It just might do the trick.

What does that bit of code mean anyway?