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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OOTB search code displays extraneous white bar

    Currently I'm trying to modify OOTB code for a search box.

    I'm not sure if this is best addressed within the JavaScript or CSS.

    After a search term has been typed in, the users picks a match which opens in a new window, then they close the new window, and try to back space over the typed term, there is a white bar that remains below the text entry box.

    For example, if the word bathroom is typed in the text box, a list of possible matching topics is displayed. You pick the option to Where is the bathroom?. This opens a new window/tab - just close the tab. The original search box still displays the term bathroom, but if you backspace to remove the term, then a white bar remains below the text entry box.

    How do I get rid of the white bar when the text entry box is empty?

    The code being used is shown below - attachment shows the problem as it appears in IE and FF:

    A temporary page with the search box.

    Code:
    <style type="text/css">
                                
            
            /* autosuggest css */
    /* the look of the overlay div with results */
            #la_results { 
               border: 1px solid #bbb;
                border-color: #bbb #6f6f6f #6f6f6f #bbb;
                border-top: 0;
                -moz-box-shadow: 3px 3px 8px #444;
                -webkit-box-shadow: 3px 3px 8px #444;
                -moz-border-radius-bottomright: 5px;
                -moz-border-radius-bottomleft: 5px;
                -webkit-border-bottom-right-radius: 5px;
                -webkit-border-bottom-left-radius: 5px;
                background: #fff;
    
            }
    
            /*the two divs below control the look and feel of individual results, which show up as LI elements in the overlay div */
            #la_results ul {  list-style-type: none; margin:0; padding:0; font:normal 11px Geneva, Arial, Helvetica, sans-serif;}
            #la_results ul li a {    display: block; text-decoration:none; padding:3px    }
    
            .itemwhite { background-color:#fff;} /* the color of the "white" stripe in the results div */
            .itemcol { background-color:#efefef;} /* the color of the "color" stripe in the results div */
    
            #la_results li a:hover {    background-color: #f8bb49;} /*the color of the hover effect when the user goes thru the results */
    
            /* the class below controls the font and the look of the "more search/full text search stripe */
            .itemsrch {color:#cc3333;font:bold 11px Geneva, Arial, Helvetica, sans-serif; background-color:#FFFFCC;} 
    
            .nwylf { color:#900;} /* "not what you are looking for?" text color */
            &lt;/style&gt;
    
    <!-- start of LA widget -->
    <div id="la_wrapper" style="width:500px;background-color:#F3f3f3;margin:0;padding:6px;border: solid 1px #a9cee7;">
        <p>Type a question:</p>
        <input type="text" id="la_suggest" style="display:block; margin-top: 6px; width: 100%; height: 24px; font-size: 14px" onFocus="document.getElementById('la_results')[removed]=''" onKeyUp="if (this.value) {laFQM(this.value)} else {document.getElementById('la_results')[removed]=''}" value="" >
    
        <div id="la_results" style="padding-top: 2px; font-family: Helvetica, Arial, sans-serif; font-size:11px; position:absolute; margin-top:0px; width:500px; border: solid 1px #ccc;display:none"></div>
    </div>
    
    <script language="javascript">var lahilite="efefef"; var lanw=1;</script>
    <script language="javascript" src="http://api.libanswers.com/api/ladata-32.js"></script>

    Thanks much.
    Attached Thumbnails Attached Thumbnails OOTB search code displays extraneous white bar-problembar.png  

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    Might want to try to help you, but that JS code is purposely written to be as obscure as possible. Since this only happens with MSIE, and since the dropdown looks much uglier in MSIE, anyway, your IE users may just have to live with it. It's a little disappointing that the list of questions is so small and is prepopulated into the JS code. I would have thought you'd use a database and search it, via AJAX code, instead.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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