Forum Moderators: not2easy

Message Too Old, No Replies

Alternative for select list

         

Dirk

11:13 pm on Jul 26, 2004 (gmt 0)

10+ Year Member



Hi,

I have been reading most of the post on changing CSS styles on the select tag.
I know now that you can only change background-color and color.

Doesn't anyone have an alternative. I was thinking of replacing the select list with dynamic html the way menu's are created.

hakre

11:29 am on Jul 28, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



hi dirk,

i haven't tried this yet:

- create an iframe or div with scrolling overflow
- put your styled content in there
- write a js routine to show/hide that div / iframe
- place another div for the select stuff on top
- fill it with js (dom) from the current selection in the show/hide div
- maybe a html list will help you out to modularize the content in the show/hide div (dom access) for easy access for the current selection

so far a lot to do for something which will only work in selected browser with script enabled.

my opinion: stay with select and css and forget about scripts. don't rely on these ugly scripts any longer. for most browsers (ie on top) this is a security issue and everyone should have this turned off except in really trusted sites (like localhost and intranet, but even there this can be very stupid).

--hakre

Mobull

11:56 am on Jul 28, 2004 (gmt 0)

10+ Year Member



what do you want to achieve? Iunderstand that colors will not do for you, but what is it you want to show then?

Jumper Willow

6:03 pm on Jul 28, 2004 (gmt 0)

10+ Year Member



If I'm understanding correctly, this might be something close to what you desire:

[code]
<head>
<style type="text/css">
table.menu { position:absolute; visibility:hidden; }
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>
</head>
<body>

<table>
<tr>
<td onmouseover="showmenu('menu1')" onmouseout="hidemenu('menu1')">
Menu heading text

<table class="menu" id="menu1">
<tr><td>selection 1</td><tr>
<tr><td>selection 2</td></tr>
</table>

</td></tr></table>

It's hack and slash how I put it up and there might be a few typos, but there's a BASIC css menu that i've come across online. it uses mouseover though and I haven't gotten it to work on my mozilla setup. If you are looking for it to validate xhtml strict (as I have tried too), the mouseover on the td fails as well.

If you are intending this for an IE audience though, it does work in my browser. the "selection 1" can be changed to have <a> links in it and images or whatever and you can have many section headers next to each other for a fully functional menu bar with pop-downs.

Hope this wasn't completely off topic.