SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    scrolling a listbox\SELECT using mouseover

    Hi,
    Anyone able to give me a quick start on this?
    I'm trying to save screen real estate by taking the scrollbar off of a <SELECT> and thought I'd put two images (one above and one below) which onmouseover would cause the list to scroll up or down respectively...

    Thanks
    Vida

  2. #2
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    selectedItem ? in a setInterval on the mouse down...

    (probably a bit too quick ...)

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think that it's possible to remove the scrollbar from a select element.

    You'll need to use a DHTML select element emulation script.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DHTML select element emulation script

    Oh right... hmmm.. and I'd have to hack it around cos the data is coming from a database query...
    Any links to one? I've been diggin around in hotscripts etc.. but nothing terribly useful there that I can see...

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These are the only relevant pages that I could find in a few minutes.
    http://www.webmasterworld.com/forum91/2920.htm
    http://www.codingforums.com/archive/index.php/t-14300
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that!
    Usual story, am in screaming rush.. can never find half as much stuff as when I'm relaxed and just browsin round...
    Thanks again
    Vida

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Google suggest uses a fake select element, their JS code is quite nasty to try and understand but...
    http://www.google.com/webhp?complete=1&hl=en

  8. #8
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know a site where you can retrieve a script for a fake select fully personalisable ...
    But it's all in french ...

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bit rough at the moment (just started)

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    script language="JavaScript" type="text/javascript">
    <!--
    var 
    zxcSelWidth=100;
    var 
    zxcSelSize=1;
    var 
    zxcSelOverflow='hidden'// or 'auto'


    var zxcHTML='';
    function 
    zxcMakeSel(zxcobj){
     
    zxcObj=document.getElementById(zxcobj);
     for (
    zxc0=0;zxc0<zxcObj.length;zxc0++){
      
    zxcHTML+='<div style="position:absolute;left:0px;top:'+(zxc0*20+1)+'px;width:'+(zxcSelWidth-18)+'px;height:20px;background-color:white;" ';
      
    zxcHTML+='title=" " ';
      
    zxcHTML+='onmouseover="javascript:zxcSelOver(this);" >&nbsp;'+((zxcObj.options[zxc0].text))+'</div>';
     }
     
    zxcParent=document.getElementById(zxcobj+'Div');
     
    zxcParent.innerHTML=zxcHTML;
     
    zxcDivs=zxcParent.getElementsByTagName('DIV');
     for (
    zxc1=0;zxc1<zxcDivs.length;zxc1++){
      
    zxcDivs[zxc1].info=zxcobj+'^'+zxcObj.name+'^'+zxc1+'^'+(zxcObj.options[zxc1].value)+'^'+(zxcObj.options[zxc1].text)
     }

     
    zxcParent.max=(zxcDivs.length*20);
     
    zxcParent.min=(20);
     
    zxcParent.style.position='relative';
     
    zxcParent.style.overflow=zxcSelOverflow;
     
    zxcParent.style.top=(0)+'px';
     
    zxcParent.style.height=(20*zxcSelSize)+'px';
     
    zxcParent.style.width=(zxcSelWidth)+'px';
     
    zxcParent.style.backgroundColor='white';
     if (
    zxcSelSize==1&&zxcSelOverflow=='auto'){
      
    zxcParent.onmouseover=function(){ this.style.height=this.max+'px'; }
      
    zxcParent.onmouseout=function(){ this.style.height=this.min+'px'; }
     }
     
    zxcObj.style.position='absolute';
     
    zxcObj.style.visibility='hidden';

    }

    function 
    zxcSelOver(zxcobj){
     
    zxcobj.style.backgroundColor='navy';
     
    zxcobj.style.color='white';
     
    zxcobj.onmouseout=function(){this.style.backgroundColor='white'this.style.color='black'; }
     
    zxcobj.onclick=function(){zxcSelChange(this); }
     
    document.getElementById(zxcobj.info.split('^')[0]).selectedIndex=zxcobj.info.split('^')[2]
    }

    function 
    zxcSelChange(zxcobj){
     
    alert('id = '+zxcobj.info.split('^')[0])
     
    alert('name = '+zxcobj.info.split('^')[1])
     
    alert('selected Index = '+zxcobj.info.split('^')[2])
     
    alert('value = '+zxcobj.info.split('^')[3])
     
    alert('text = '+zxcobj.info.split('^')[4])
    }

    function 
    zxcSelUp(zxcobj,zxcdir){
     
    zxcDivs=document.getElementById(zxcobj).getElementsByTagName('DIV');
     for (
    zxc1=0;zxc1<zxcDivs.length;zxc1++){
      if (
    zxcDivs[zxcDivs.length-1].offsetTop>1&&zxcdir=='Up'){
       
    zxcDivs[zxc1].style.top=(zxcDivs[zxc1].offsetTop-20)+'px';
      }
      if (
    zxcDivs[0].offsetTop<0&&zxcdir=='Down'){
       
    zxcDivs[zxc1].style.top=(zxcDivs[zxc1].offsetTop+20)+'px';
      }
     }
    }
    //-->
    </script></head>

    <body style="background-color:red"  onload="zxcMakeSel('joe');">

    <br>
    <br>
    <br>
    <br>
    <table width="150" border=1 style="position:relative;text-Align:center;">
      <tr>
        <td onclick="javascript:zxcSelUp('joeDiv','Up');" >
        Scroll Up
        </td>
      </tr>
      <tr>
        <td>
     <div id="joeDiv" ></div>
     <select name="fredy" id="joe" size="1">
     <option value="0">Zero</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Tree</option>
     <option value="4">Four</option>
     </select>

        </td>
      </tr>
      <tr>
        <td onclick="javascript:zxcSelUp('joeDiv','Down');" >
        Scroll Down
        </td>
      </tr>
    </table>




    </body>

    </html>

    but as many fake selects as you want on a page 

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    see

    http://www.vicsjavascripts.org.uk/Fa...FakeSelect.htm

    any feedback would be appreciated

  11. #11
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  12. #12
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help guys.. I'm sorry to say though that I couldn't get either of these to work in IE6..
    Vida

  13. #13
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have just update my script for 'Fake Select' to allow for changing width

    Tested with IE and MozFF and it works with ME and 2000.

    Havent tried XP

    Try the link I gave and see if that works if it does
    supply a link to your page and I will implement it for you

    if not let me know what errors you get

  14. #14
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Oh yeah !

    Oh thats very cool!
    Great Stuff Vic!
    Thanks very much.
    I'd send you on a link to where I'm using it.... but its on an intranet.

    Thanks,
    Vida

  15. #15
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, one quick question about this.. is there an easy way to do away with the scrollbar on the rhs?


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
  •