dropdown list

How are they doing the where to buy drop down lists what library are they using?

Iif you go to the following page here at the very bottom

http://na.blackberry.com/eng/devices/blackberrycurve8300/

stargateatlantisAsked:
Who is Participating?
 
LZ1Connect With a Mentor Commented:
Their actually using a combinatin of CSS and DHTML elements for their drop-down.  The CSS page alone is over 3300 lines.  I squeezed it down for you so you can see what's going on:
<!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> 
/*	Global Styles
------------------------------------------------------------------------------------*/
* {	padding:0;	margin:0;	}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; }
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
select option{ padding:0 5px; }
 
 
 
/* DHTML select replacement */
div.dhtmlselect{ /*style of DHTML Select Menu, main box */
width: 98px ! important; /*default  width of main box */
border: 1px solid #666666 ! important;
position: relative;
text-indent: 3px;
padding: 1px 0px 0px 0px ! important;
cursor: hand;
cursor: pointer;
background-color: #FFFFFF;
height:21px ! important;
float:left!important;
display:block!important;
font-size:10px;
overflow:visible;
margin:0px!important;
}
 
.dhtmlselect .downimage{ /*style of "down" image to the right of the DHTML Select Menu*/
position:absolute;
right:-23px;
top:-1px;
height:22px;
border:1px solid #666666;
}
 
.dhtmlselect div.dropdown{ /*style of Drop Down Menu that appears onMouseover */
position:absolute;
left:-1px!important;
top:22px!important;
width:200px!important; /*default width of drop down menu*/
height:auto!important;
border: 1px solid #666666!important;
padding:0px!important;
margin:0px!important;
display:none;
z-index:5;
font-weight:normal;
}
 
.dhtmlselect div.dropdown a{ /*style of Drop Down Menu's links */
width: auto;
display: block;
background: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
text-indent: 5px;
text-decoration: none;
color: black;
padding-top:3px;
pading-bottom:1px;
}
 
* html .dhtmlselect .dropdown a{ /*IE 6 (and below) hack */
width: 100%;
}
 
.dhtmlselect .dropdown a:hover, .dhtmlselect .dropdown a.selected {
background: #EEEEEE;
}
div.selectLabel {
width:92px!important;
height:20px!important;
padding:0px!important;
padding-top:3px !important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
margin:0px!important;
border:none!important;
}
* html div.selectLabel {
height:18px!important;
}
</style></head>
 
<body>
 
                                <input value="483" name="products" type="checkbox">&nbsp;<span class="boldit">Compare</span>
 
                                  
                        <!-- regions with children -->
                                  
                                    
                                          <select style="display: none;" id="id-0_replaced--1" name="url" onchange="javascript:doOmnitureCarrierEventFromSelect(this);getOptionProvider(this);javascript:gotoSelectionNewWindow(this,0);">
                                                <option value="">WHERE TO BUY</option>
                                                <option value="">&nbsp;</option>
                                                
                          
                            <option value="" class="country_opt">United States</option>
                            
                                                    <option value="http://www.centennialwireless.com/discover_blackberry.php ">
                                                        &nbsp;Centennial Wireless (Silver)
                                                    </option>
                           
                                                    <option value="http://www.cincinnatibell.com/consumer/wireless/phones_and_devices/?id=blackberry_curve">
                                                        &nbsp;Cincinnati Bell (Silver)
                                                    </option>
                           
                          
                                                
                          
                            <option value="" class="country_opt">Canada</option>
                            
                                                    <option value="http://www.rogers.com/curve">
                                                        &nbsp;Rogers Wireless (Silver)
                                                    </option>
                           
                          
                                                
                                          </select>
                                          <script type="text/javascript" language="JavaScript">
                                                if (document.location.href.indexOf("/devices/blackberrycurve") > -1 || document.location.href.indexOf("/devices/blackberrypearl") > -1) {
                                                        dhtmlselect("id-0");
                                                }</script>
<div style="z-index: 98;" onkeydown="dhtmlselect_handleSelectKeyDown(this, event);" rel="0" tabindex="1" id="dhtml_id-0--1" class="dhtmlselect">
<input id="id-0" value="" type="hidden"><div style="top: 22px;" class="selectLabel">WHERE TO BUY</div> 
<img class="downimage" src="http://na.blackberry.com/assets/images/dhtmlselect_dropdown.gif" title="Select an option" onmouseover="this.src='http://na.blackberry.com/assets/images/dhtmlselect_dropdown_over.gif';" onmouseout="this.src='http://na.blackberry.com/assets/images/dhtmlselect_dropdown.gif';">
<div style="display: none;" class="dropdown">
<a class="selected" href="#" onclick="dhtmlselect_handleSelectValueClick(this);" rel="">WHERE TO BUY</a>
<a href="#" onclick="dhtmlselect_handleSelectValueClick(this);" rel="">United States</a>
<a href="#" onclick="dhtmlselect_handleSelectValueClick(this);" rel="http://www.centennialwireless.com/discover_blackberry.php ">&nbsp;Centennial Wireless (Silver)</a>
<a href="#" onclick="dhtmlselect_handleSelectValueClick(this);" rel="http://www.cincinnatibell.com/consumer/wireless/phones_and_devices/?id=blackberry_curve">&nbsp;Cincinnati Bell (Silver)</a>
<a class="" href="#" onclick="dhtmlselect_handleSelectValueClick(this);" rel="">Canada</a><a href="#" onclick="dhtmlselect_handleSelectValueClick(this);" rel="http://www.rogers.com/curve">&nbsp;Rogers Wireless (Silver)</a>
</div></div>
                                  
                        </body>
</html>

Open in new window

0
 
level9wizardConnect With a Mentor Commented:
They are using a combination of CSS and HTML classes to style these dropdowns. So for example something simple, you could do:

<!-- IN YOUR HTML -- >
<select class="my_dropdown" >
    <option>one</option>
    <option>two</option>
    <option>three</option>
</select>

/* IN YOUR CSS */
.my_dropdown
{
    border: 2px solid red;
}


Obviously they are adding a lot more styles (background-image's and so) on but hopefully this helps illustrate the technique.
0
 
stargateatlantisAuthor Commented:
how come when you select the drop down nothing comes up?
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
LZ1Connect With a Mentor Commented:
There are scripts which are also running that don't have the absolute path, so you are missing that.  Notice that it is not an ordinary SELECT box though.
0
 
stargateatlantisAuthor Commented:
But i don't see any .js files in the code you gave me.  I want the code to work on any page i implement it on.
0
 
LZ1Connect With a Mentor Commented:
In all actuality it's not a combobox as you may think.  It's actually a Java scripted element.  
You may have better luck downloading an opensource or free script like this rather than copying or taking Blackberry's:
http://www.webfx.nu/dhtml/combobox/combobox.htm
 
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.