Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post

    custom dropdown in form

    I have a drop-down list in my form and I'm wondering how I can customize it so that it doesn't have the generic "look" (like the fonts/sizes/etc dropdowns right here in these post-thread boxes). Does anyone know of any resources or tutorials that could help me?

    thank you!

  • #2
    New Coder
    Join Date
    Jun 2008
    Location
    Bradford, OH (30 mins from Dayton)
    Posts
    36
    Thanks
    1
    Thanked 11 Times in 11 Posts
    I did a simulation of a drop down menu <select> for our French Canada website here: http://www.lexisnexis.ca/fr/our-solu...w/default.aspx

    On the right side column where it says "Sélectionez une option »". That 'drop down' select menu is actually a drop down menu just like the top navigation bar with the dots. I created a separate CSS file for it, you can see it here: http://www.lexisnexis.ca/css/by-business-n...flyout-menu.css

    Resources:

    1. There's a way to style the select but there's no way to style the box/drop-down-menu, here's a good example: http://pennypacker.net/articles/css_tricks_select_menu

    2. Here's a more interesting example where the box/drop-down-menu is actually styled (well, not really, it's just a <ul>): http://v2.easy-designs.net/articles/replaceSelect/

    BTW, styling a select menu (option 1.) doesn't work in IE6/7, it does work on Opera 9.x, Safari 3.x, Firefox 2.x/3.0

  • Users who have thanked rzea for this post:

    yankeeschick (07-01-2008)

  • #3
    Regular Coder
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post
    I like the one you created a lot, but rather than having the page jump to your selection right when you select it, I want to use a "submit" button, if that makes sense. What changes would I need to make?

    Thx again!

  • #4
    New Coder
    Join Date
    Jun 2008
    Location
    Bradford, OH (30 mins from Dayton)
    Posts
    36
    Thanks
    1
    Thanked 11 Times in 11 Posts
    We had thought of that same idea but just ended creating the drop down and having the action take place without a button, mostly for space requirements, we didn't have enough space in that column to fit the drop down and the button.

    What I know is that you will complicate things more than they should, you're going to have to use a Javascript for the drop down now (and of course maintain it).

    I'm not a Javascript programmer though so I wouldn't know how to efficiently tell you what to do.

    Perhaps in http://www.dynamicdrive.com you could find something to implement.

    Let's wait for one of the programming gurus here to tell us how to do it

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    do you have the script set up with your html/css? If you do post it and we can take a look at it.

  • #6
    Regular Coder
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post
    Here's my code for the basic boring form:

    CSS:
    Code:
    
    
    
    .searchbar {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	width: 911px;
        border: 0px;
    	background-image: url(directory-images/searchbar2.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    }
    HTML:
    Code:
    <table class="searchbar"><tr><td align="center"><form action="">
    <input type="text" name="search" size="55">
    &nbsp;
    <select name="region">
    <option value="select">Select Country/Region</option>
    <option value="usa">USA</option>
    <option value="canada">Canada</option>
    <option value="UK">UK</option>
    <option value="China">China</option>
    </select>
    &nbsp;&nbsp;
    <INPUT TYPE="IMAGE" SRC="directory-images/searchbutton_03.gif" ALT="Submit button" valign="middle">
    </form></td></tr></table>

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try this

    JS

    Code:
    <SCRIPT LANGUAGE="JavaScript"><!-- 
    function openURL()
    { 
    
    // grab index number of the selected option
    selInd = document.theForm.region.selectedIndex; 
    
    // get value of the selected option
    goURL = document.theForm.region.options[selInd].value;
    
    // redirect browser to the grabbed value (here a URL)
    top.location.href = goURL; 
    
    }
    
    //--> 
    </SCRIPT>
    HTML

    Code:
    <table class="searchbar"><tr><td align="center">
    <form name="theForm" action="">
    <input type="text" name="search" size="55">
    &nbsp;
    <select name="region">
    <option value="select.html">Select Country/Region</option>
    <option value="usa.html">USA</option>
    <option value="canada.html">Canada</option>
    <option value="UK.html">UK</option>
    <option value="China.html">China</option>
    </select>
    &nbsp;&nbsp;
    <INPUT TYPE="IMAGE" SRC="directory-images/searchbutton_03.gif" ALT="Submit button" valign="middle" onClick="openURL()">
    </form></td></tr></table>
    see if thats what u need

  • #8
    Regular Coder
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post
    was I supposed to add anything to the javascript or html?

  • #9
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    no, it should work with your form

  • #10
    Regular Coder
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post
    it didn't change anything; just looked the same

  • #11
    New Coder
    Join Date
    Jun 2008
    Location
    127.0.0.1
    Posts
    43
    Thanks
    1
    Thanked 6 Times in 6 Posts
    He was up to styling the form, not a redirect-on-click. I think you misunderstood it jc.

  • #12
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    i thought you wanted to have a user select a item then have them press the submit and it takes them to the selected url?

    EDIT**

    oops, sorry i guess i did.. well there you go, just incase you need it one day!!

  • #13
    Regular Coder
    Join Date
    Jun 2008
    Posts
    130
    Thanks
    23
    Thanked 1 Time in 1 Post
    hehe, thank you anyway

    if anyone else knows of any resources for pretty-ing up the <select> dropdown menus for a form, let me know.

    thx!

  • #14
    New Coder
    Join Date
    Jun 2008
    Location
    Bradford, OH (30 mins from Dayton)
    Posts
    36
    Thanks
    1
    Thanked 11 Times in 11 Posts
    yankeeschick, read post Post #2

  • #15
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    Read your post with interest. don't know if this helps, but I've currently got a project where I need to implement a better looking Drop Down List, than standard.

    I use asp.net, and a good solution can be found here:
    http://www.asp.net/AJAX/AjaxControlT.../DropDown.aspx

    But basically, it's easy to implement the same thing using pure css and a few lines of javascript. Just use a text box, and then combine a pop up div when the user clicks into the text box to reveal a list of items, all done using a div with css element overflow: auto or scroll to acheive the scrolling drop down. Each item in the list is just a link:

    <input name="TextBox1" type="text" onclick="popuplist" value="Make your selection" id="TextBox1" />
    <div id="DropPanel" style="display :none; visibility: hidden;">
    <a href="javascript:makeselection('Option 1')">Option 1</a>
    <a href="javascript:makeselection('Option 2')">Option 2</a>
    </div>

    The javascript just places the selection into the text box, then closes the pop-up:

    function popuplist()
    {
    //script to show pop up
    }

    function makeselection(Selection)
    {
    document.forms[0].TextBox1.value = Selection;
    //script to close pop-up
    }

    Obviously, you need some css to make it look pretty and a bit of added javascript to open and close the pop-up.

    Regards
    Gerard

    Warwickshire web design


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •