Not signed in (Sign In)

Vanilla 1.0.3 is a product of Lussumo. More Information: Documentation, Community Support.

JavaScript: Trying to remove Select element border....but no luck

Bottom of Page

1 to 3 of 3

  1.  
    •  
      CommentAuthorarif_iq
    • CommentTimeDec 8th 2006 edited
     
    Hi All,

    I am facing strength problem in html page, trying to make a mask on top of SELECT list box by using clip: rect(top right bottom left).

    I don't want to show SELECT border to the users for IE, as we don't have any IE specific property to make the SELECT border invisible to end users.

    Then I have made a thought of about clip:rect() property to hide specific area of SELECT element.

    But unfortunately I am getting border at bottom while removing first element from SELECT by JavaScript, it should not be as expected.

    FF and Opera are behaving correctly; they are not showing any border of SELECT list box.

    Can anybody help me out?

    Any help would be greatly appreciated.

    I am also attaching the code as below.


    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <script>
    function removeelement()
    {
    var element = document.getElementById("testSelect");

    for(var i=0;i< element.options.length; i++)
    {
    if(element.options[i].selected && element.options[i].value != "")
    {
    element.options[i].value = "";
    element.options[i].text = "";
    element.options[i] = null;
    }
    }
    element.size = element.options.length;
    setClip();
    }

    function setClip()
    {
    var element = document.getElementById("testSelect");
    var height = element.clientHeight-3;
    var width = element.clientWidth-3;
    alert('element.clientHeight '+element.clientHeight+' element.clientWidth '+element.clientWidth );
    element.style.position = "absolute";
    element.style.clip ="rect("+3+"px "+width+"px "+height+"px "+3+"px)" ;
    alert('height '+height+' width '+width );
    }
    </script>
    </head>
    <body bgcolor="#FFFFFF" text="#000000" onLoad="setClip()">
    <TABLE align="center" width="100%" cellpadding="5" cellspacing="0" border="0" >
    <TR>
    <TD vAlign=top noWrap align=left width="21%">
    <div id="tst" style="width:200px; height:177px; overflow:auto; background:#00FF00">
    <Select id="testSelect" multiple size="8" style="background:#FFFF00">
    <option value="acknowledge.gif">acknowledge.gif</option>
    <option value="Alliance Partnership-B.GIF">Alliance Partnership-B.GIF</option>
    <option value="Alliance Partnership-F.GIF">Alliance Partnership-F.GIF</option>
    <option value="alliancepart.gif">alliancepart.gif</option>
    <option value="Application Support- SQL Server.gif">Application Support- SQL Server.gif</option>
    <option value="bo-logo.gif">bo-logo.gif</option>
    <option value="contactus.jpg">contactus.jpg</option>
    <option value="x-click-but21.gif">x-click-but21.gif</option>
    </select>
    </div>
    </TD>
    <TD vAlign=top noWrap align=left width="79%" id='ImgTd' ></TD>
    </TR>
    <TR>
    <TD>
    <A HREF="javascript:removeelement()">Remove Selected Element</A>
    </TD>
    </TR>
    </TABLE>
    </body>
    </html>


    Thanks for your time.

    Mohammed Arif
    Site Developer
    http://www.mohammedarif.com
    • CommentAuthorrobert
    • CommentTimeMar 7th 2007 edited
     
    hi, arif,

    I had download your code and try it,

    if you need not showing any border of SELECT list box. you must modify "div" style,
    change overflow form "overflow:auto;" to "overflow:fixed;".

    like:
    <div id="tst" style="width:200px; height:177px; overflow:fixed; background:#00FF00">

    this code can run good with IE and FF.

    good luck.


    software reviews
    •  
      CommentAuthorarif_iq
    • CommentTimeMar 11th 2007
     
    Hey Robert,

    Thanks for reply, but I already fixed it using position:static.

    It worked for me.

    Thanks
    Mohammed Arif
    Site Developer
    http://www.mohammedarif.com

1 to 3 of 3

  1.