Results 1 to 2 of 2

Thread: Custom Select Box : Style Box, scroll, and multiline

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default Custom Select Box : Style Box, scroll, and multiline

    I'm looking for a script for select box.
    I make the new design like in the screenshot, i already try to find jquery, javascript, css3 to cover what my design need, but can't find one.


    I try to make one with the script i find but, still it's not perfect like i hope.
    http://davejob.com/ex/selectbox/

    So please if you have any suggestion just post it here.
    Thank you so much.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	1.jpg 
Views:	773 
Size:	12.5 KB 
ID:	5564  
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, let's start with the easy/obvious stuff and see how that goes.

    Those don't look like valid option tags to me. Is that how the demo instructs you to make them? Even if it is, one could try using the opening and closing tag:

    HTML Code:
            <select name="speedA" id="speedA">
            	<option selected="selected">Select a Patient</option>
                <option>Angelina Jolie - Jl. Biduan No. 10, Jakarta - HP: 0812-3456789</option>
                <option>Jeniffer Aniston - Jl. Biduan No. 10, Jakarta - HP: 0812-3456789</option>
                <option>Kate Hudson - Jl. Biduan No. 10, Jakarta - HP: 0812-3456789</option>
            </select>
    With or without that change, it looks like the most glaring deviation from what you are after is a missing second line break for each option. Even though it's not valid (option tags are not allowed children other than text nodes), you could try a br tag:

    HTML Code:
            <select name="speedA" id="speedA">
            	<option selected="selected" />Select a Patient
                <option />Angelina Jolie - Jl. Biduan No. 10, Jakarta<br>HP: 0812-3456789
                <option />Jeniffer Aniston - Jl. Biduan No. 10, Jakarta<br>HP: 0812-3456789
                <option />Kate Hudson - Jl. Biduan No. 10, Jakarta<br>HP: 0812-3456789
            </select>
    Especially because these option tags are replaced by span tags after the script runs, that has a chance of working. If not, we could add our own code to replace - with <br> after the main custom select code ran. This BTW is what a single option looks like to the browser once the script code transforms it:

    HTML Code:
    <li role="presentation" class="ui-selectmenu-item-selected"><a href="#nogo" tabindex="-1" role="option" aria-selected="true" id="ui-selectmenu-item-0">
    <span class="ui-selectmenu-item-header">Angelina Jolie</span>
    <span class="ui-selectmenu-item-content">Jl. Biduan No. 10, Jakarta - HP: 0812-3456789
                </span></a></li>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Custom Scroll bar help and custom icon
    By katebellami in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 02-04-2013, 07:43 PM
  2. DD Content Tab + Custom Select Box CSS Style Plugin
    By why not in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-18-2012, 11:53 AM
  3. Help with custom scroll bar
    By bizzy in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-20-2008, 01:39 PM
  4. Custom Scroll Bar
    By wuhaa in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-18-2006, 06:21 PM
  5. Custom scroll bar
    By Vinxent in forum HTML
    Replies: 5
    Last Post: 07-26-2006, 03:53 AM

Bookmarks

Posting Permissions

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