PDA

Click to See Complete Forum and Search --> : transparant scrollable div and selection lists

keesvandieren
09-24-2005, 06:23 AM
Hi,

The content of my website is rendered in a div whitch requires to be transparant. This can be done in IE with the css filter attribute, value croma.


However, selection lists (html select tag) become totally crap when being used in this div.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
div#content_part {
overflow: auto;
overflow-x:auto;
overflow-y:scroll;
width:469px;
height:300px;
background-color: #FFFFFE;
text-align:left;
float:left;
padding-left:10px;
padding-right:10px;
scrollbar-face-color: #FFFFFE;
scrollbar-shadow-color: #3FB404;
scrollbar-highlight-color: #FFFFFE;
scrollbar-3dlight-color: #3FB404;
scrollbar-darkshadow-color: #FFFFFE;
scrollbar-track-color: #FFFFFE;
scrollbar-arrow-color: #3FB404;
scrollbar-base-color: #FFFFFE;
z-index:600;*/
FILTER: chroma(color=#FFFFFE);

}
</style>
</head>
<body>
<div id="content_part">
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
BLA<br/>
before<br/>
<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
after<br/>
BLA<br/>
BLA<br/>
</div>
</body>
</html>


When you run this, the list will be invisible or party visible only (tested in IE 5.5 and 6.0).

Has someone ever had the same problem, and is it possbile to get drop downs working on a scrollable transparant div?

Thanks in advance.

Regards,

Kees van Dieren
Kravvitz
09-24-2005, 01:36 PM
The filter property seems to be causing that.

You should also test in good browsers like Firefox (http://www.mozilla.org/products/firefox/) and Opera (http://www.opera.com/).
keesvandieren
09-25-2005, 10:58 PM
Thanks for your reply.

It works in Firefox. However, most visitors use Internet Explorer so it should work in IE also.
Kravvitz
09-25-2005, 11:20 PM
Huh? It works fine in IE if you make the change I suggested.
keesvandieren
09-26-2005, 12:21 AM
Sorry,
I knew that the filter causes it. I thought you suggested the visitors to use Firefox as a solution :).

The filter is required, to make the scrollbars transparant. There is a background behind the div which has to be visible throught the scroll bars. Is there another way to make this background visible through the scrollbars?

Thanks very much
keesvandieren
10-01-2005, 09:55 AM
I've fixed it by creating my own select tag implementation with dom.

Click here (http://flexexpress.resulting-it.nl/werkzoekenden/inschrijven/) to see it in action (field "opleiding").

It currently only works good in IE, have to make it work in FF. Keyboard navigation also is not implemented yet.
Kravvitz
10-01-2005, 01:42 PM
Well it looks good in IE, but what happens to the 10% of users who use a browser that does not have JavaScript enabled?
LJK
10-01-2005, 11:56 PM
Hi -
"I thought you suggested the visitors to use Firefox as a solution."
They didn't, but I will ;-)
or at least you could,
for development, to
make sure that everyone
else can view the site w/out
all the proprietary coding
making that a difficulty.

El
keesvandieren
10-02-2005, 11:56 PM
Thanks again for all the feedback!


Hi -
"I thought you suggested the visitors to use Firefox as a solution."
They didn't, but I will ;-)
or at least you could,
for development, to
make sure that everyone
else can view the site w/out
all the proprietary coding
making that a difficulty.

EL


I've made it an IE only feature, since the normal select works well in Firefox.

Well it looks good in IE, but what happens to the 10% of users who use a browser that does not have JavaScript enabled?

If javascript is not enabled, it should show the normal select. In the XHTML the select wit its options are added. With DOM the select including its options is used to collect the data, and replaced with the dynamic selection list.

For those who are interested: the /js/list.js and /css/list.css are used to render the list.

This means it will still be crap for users that have javascript disabled AND use IE.