PDA

View Full Version : Scrolling div over Flash = ouch :(


takethetrain
August 11th, 2006, 12:23 PM
I've created a scrolling div (with overflow:auto) and put it on top of Flash. Since I've had no trouble just putting a plain old div on top of Flash movies (with wmode=transparent), I figured a scrolling div would be no different.. but I was wrong. Sometimes you see no scrollbar at all (but it appears when you select text beyond the borders of the div), sometimes you see a scrollbar but it flickers, or the content itself flickers, or disappears. The behavior is different depending on the browser. Has anyone had this problem before?

I've attached my files, but here is some code if it's quicker.

Here's my CSS code:


#myFlash {
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
}
#myDiv {
position: absolute;
z-index: 2;
left: 60px; top: 120px;
width: 450px; height: 250px;
overflow: auto;
background-color: transparent;
}


And here's my HTML code:


<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="embedder.js"></script>
</head>
<body>
<div id="myDiv">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque ..... (lots of text)</p>
</div>
<div id="myMovie">
<script language="JavaScript" type="text/javascript">
makeFlash();
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="flash.swf" quality="high" bgcolor="#ffffff" wmode="transparent" width="550" height="400" name="flash" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>


Note: The javascript in the HTML code just document.writes the code that you see in <noscript>, to avoid the whole IE Active X issue.
takethetrain
August 11th, 2006, 01:09 PM
Things that don't help my problem:

Setting wmode to opaque
Setting overflow to scroll


In case you were wondering. :puzzled:
takethetrain
August 11th, 2006, 03:09 PM
So no one else has had this problem? Or, no one knows how to solve it? :crying:
takethetrain
August 11th, 2006, 03:57 PM
Another note.. found that an ID tag in the HTML file (myMovie) didn't match the one in my stylesheet (myFlash). But unfortunately that wasn't the cause of the problem.
noTime
August 12th, 2006, 04:51 AM
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_15523

Works in IE only. Consider using other techniques in your website. Duh...
takethetrain
August 12th, 2006, 09:30 AM
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_15523

Works in IE only. Consider using other techniques in your website. Duh...

Honestly.. do you need to be rude about it?

I'm not sure what the purpose of that link was anyway.. as I said in my first post, I do know how to place a div on top of Flash, and have done so successfully on many occasions (and on browsers besides IE). My issue is that the scroll bar won't appear over Flash.

I'm considering the possibility of making a custom scrollbar for my div, like they have on websites like dynamicdrive.com. I'm have trouble finding a source code that actually explains itself, though. Does anyone know of a good tutorial for this sort of thing?
noTime
August 13th, 2006, 06:40 AM
Perhaps I was half asleep, sorry. :)

http://www.javascriptkit.com/domref/style.shtml

There's a lot of interesting things there regarding DOM and manipulating the style attribute.
takethetrain
August 13th, 2006, 09:14 AM
Thanks noTime, that's also something I am familiar with. There is a good reference for changing CSS properties with JS here: http://codepunk.hardwar.org.uk/css2js.htm

It seems the scrollbar issue I am having is not one to be fixed, at least that's my guess based on how little I've found even mentioning that problem (let alone offering a solution). The next step for me, I guess, is to jump into one of those scrolling scripts and hope I can find my way through it!