Solved

dropdown list

Posted on 2009-04-03
6
252 Views
Last Modified: 2012-05-06
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/

0
Comment
Question by:stargateatlantis
  • 3
  • 2
6 Comments
 
LVL 11

Assisted Solution

by:level9wizard
level9wizard earned 100 total points
ID: 24061679
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
 
LVL 30

Accepted Solution

by:
LZ1 earned 400 total points
ID: 24062150
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
 

Author Comment

by:stargateatlantis
ID: 24062692
how come when you select the drop down nothing comes up?
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 400 total points
ID: 24062753
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
 

Author Comment

by:stargateatlantis
ID: 24062854
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
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 400 total points
ID: 24063033
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

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to read data from SQL server  to sharepoint 2013 ? 3 28
Json Schema 8 32
jquery tab header text 1 23
HTML <font style="color:red"> 9 32
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question