SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    Kiwi Fr00t jylyn's Avatar
    Join Date
    Apr 2005
    Location
    New Zealand
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "Fake" select dropdown

    Hi

    I'm trying to make a dropdown font selector using javascript. I want it to look like the ones in graphics programs where the dropdown has a sample of each font instead of just the name. So basically what I'm trying to do is put images in my select options instead of just words. I can't get that to work so I have made a layer containing my images which I can use as a fake dropdown. That's all good.

    The problem is I want to have an actual select field at the top of my dropdown so that it won't look out of place in different browsers. When users click on the select it should blur, and instead of dropping down, should show my hidden layer instead. Trouble is it only seems to work in Firefox.

    Here's a link to the page so you'll see what I mean. (It takes a while to load and doesn't do anything yet, I'm just trying to fix this problem at the moment).

    This is the bare bones of it:
    HTML Code:
    <div id='fontInputWrapper'>
        <select name='fontInput' id='fontInput' size='1' onFocus="javascript:this.blur();toggleDisplay('fontSelector','block',false);" /> 
            <option value=''>$fontName</option> 
        </select>
    </div>
    <div id='fontSelector'>
      *font images in here*
    </div>
    In IE the blur() doesn't do anything. I've tried window.focus() as well as this.blur() and it's better, but the options still drop down before disappearing. I've also tried onMouseDown instead of onFocus but IE doesn't seem to tie the mouseDown event to the select tag and instead activates whenever the mouse is clicked anywhere on the screen.

    I've tried putting the select field in a layer with height:20px and overflow:hidden but the options still come up over the top. Same with z-index.

    If anybody has any other ideas about how to do this I will try whatever you can suggest...

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it helps at all IE 7 seems to work fine, but IE6 is a bit messed up.

    Dave

  3. #3
    Kiwi Fr00t jylyn's Avatar
    Join Date
    Apr 2005
    Location
    New Zealand
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dwees
    If it helps at all IE 7 seems to work fine, but IE6 is a bit messed up.
    Thanks, it's good to know...

  4. #4
    Kiwi Fr00t jylyn's Avatar
    Join Date
    Apr 2005
    Location
    New Zealand
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed the dropdown div to an iframe and it seems to work better.

    Totally broken in Konqueror and only works every second time in IE, but it's getting closer...


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
  •