So the other day I became completely fed up with the lack of styling
options on the "select" element and decided to create an alternative
with Javascript using the Prototype framework.
I have a disabled text input field with an unordered list below it and
set to display none. I have a button that is absolutely positioned
over top and to the right of the input. This button has a click
handler to display the list and an onblur handler to hide it. The
problem I''m having is Safari is not recognizing my onBlur handler.
I''ve still got a ways to go as I eventually want to turn it into a
reusable class but for now here''s my basic setup. Any help or
suggestions would be great. There is also a ZIP file so feel free to
grab that and check it out.
ZIP File Address:
http://www.htmlforums.com/attachment.php?attachmentid=8938&d=1200062990
My Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
body { padding: 15px; background: #ddd; font: Verdana, Arial,
Helvetica, sans-serif; }
a { text-decoration: none; outline: none; }
#category_menu { width: 160px; height: 29px; position: relative;
background: url(field-bg.gif) no-repeat 0 0; }
#category_menu input { padding: 4px 0 0 5px; width: 155px; color:
#333; background: none; border: none; font-size: 16px; }
#option { width: 25px; height: 29px; display: block; position:
absolute; top: 0; right: 0; background: url(field-option-bg.gif) no-
repeat 0 0; text-indent: -9999px; }
#option_list { width: 151px; display: none; position: absolute;
top: 28px; left: 2px; z-index: 1000; border: 1px solid #9c9c9c; }
#option_list ul { background: #fff; list-style: none; }
#option_list li { vertical-align: middle; }
#option_list li a { padding: 3px 5px; height: auto !important;
height: 1%; display: block; color: #2a94d1; background: #fff; }
#option_list li a:hover { color: #333; }
.open #option_list { display: block; }
.open #option { background-position: 0 -29px; }
</style>
<script type="text/javascript" language="javascript"
src="prototype.js"></script>
<script type="text/javascript" language="javascript">
function initDropDown()
{
$( ''option'' ).observe( ''click'',
function( event ){
toggleOptionList( ''open'' );
});
$( ''option'' ).observe( ''blur'', function(
event ){
setTimeout( ''toggleOptionList( \''close\''
)'', 200 );
});
var listAnchors = $( ''option_list'' ).getElementsByTagName(
''a'' );
for ( var i = 0; i < listAnchors.length; i++ ) {
listAnchors[ i ].observe( ''click'', function( event ){
toggleSearchCategory( this.id );
});
}
}
function toggleOptionList( _direction )
{
( _direction == ''open'' ) ? $
( ''category_menu'' ).addClassName( ''open'' ) :
$
( ''category_menu'' ).removeClassName( ''open''
);
}
function toggleSearchCategory( _category )
{
$( ''search_find'' ).setAttribute( "value",
_category );
}
Element.observe( document, ''dom:loaded'', function() {
initDropDown();
});
</script>
</head>
<body>
<div id="category_menu">
<input type="text" name="category"
id="search_find"
value="Businesses" disabled="disabled" />
<a href="#" id="option">Previous
Searches</a>
<div id="option_list">
<ul>
<li><a href="#"
id="Businesses">Businesses</a></li>
<li><a href="#"
id="Marketplace">Marketplace</a></li>
<li><a href="#"
id="Blogs">Blogs</a></li>
<li><a href="#"
id="Groups">Groups</a></li>
</ul>
</div>
</div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---