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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Object.style.backgroundColor="color|inherit|transparent"

    Hi,
    There is a live search on my web page but the box of available options which falls below the 'input' field has a transparent background color. How can it be changed to non-transparent?

    This line below makes the background white, but all the text on the page shines through, since the default is transparent.
    [CODE]
    document.getElementById("linksearch").style.backgroundColor="#FFFFFF";
    [CODE]

    This instruction line does not help much 'cos I can't figure out the correct way to make it work:
    [CODE]
    Object.style.backgroundColor="color|inherit|transparent".
    [CODE]

    Thanks.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    You are trying to interpret a syntax description as an example.

    It is not.

    That *description* means you can use EITHER a color value OR the keyword "inherit" OR the keyword "transparent" in this coding.

    You say the text "shines through" but I don't think that is possible *IF* the object in question has a HIGHER z-index than the "text".

    You may simply need to also alter then z-index.
    Code:
    document.getElementById("linksearch").style.backgroundColor="#FFFFFF";
    document.getElementById("linksearch").style.zIndex = 9999;
    Incidentally, when showing code in these forums, the trailing tag should be [/CODE] not as you have it.
    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.

  • Users who have thanked Old Pedant for this post:

    JonesJ (10-05-2011)

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    is the text showing through the white background? almsot like you put a piece of paper on it btu you can still see the writing from the page underneath?

    if so it sounds like you have some kind of opacity filter set in your css.

    just a shot in the dark

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Thank You Old Pedant and DanInMa for the comments,

    The code with the .zIndex = 9999; inclusion:
    Code:
    document.getElementById("linksearch").style.backgroundColor="#FFFFFF";
    document.getElementById("linksearch").style.zIndex = 9999;
    did not give any results. Headings, text and links on the site still comes fully through the white background while the css graphics and pictures does not. The result is the same with or without the zIndex. I have not used it in other parts of the page but it seems like that text have higher 'zIndex' value than the backgroundColor and it is impossible to overcome.

    The 'opacity' is part of css and it fades text or picture but it does not create layers like z-index or zIndex does.

    I gave low z-index values with css for the text on the page and at the same time high zIndex values for 'live search' search suggestion box, but still with no result. The z-index was only working when the text got minus values. This meant that the text disappeared from the page, so...

    I still search if the 'zIndex' or other method will work.

    Thanks for the comments.

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    its probabaly time to show your entire code.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Yeah, it occurs to me that we have no idea what kind of HTML element your linksearch object is. Is it a <div>? A <span>? Or what?

    Let's see some real code, please.
    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.

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Hi,
    I kept on exploring the z-index and gave for css color area value 1, css text area value 2 and for the 'live search option box' a zIndex 3. The result was that css color and text areas came on top of the area which had the zIndex 3. That was not what I expected to happen.

    Anyway, here is the working code shortly and simply:

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <script type="text/javascript" src="livesearch.js"></script>
    <style type="text/css">
    #search_area {
    	height: 50px;
    	width: 250px;
    	background-color: #93C9FF;
    	margin-bottom: 9px;
    }
    #text_area {
    	width: 500px;
    	border: 1px solid #C0C0C0;
    }
    #color {
    	background-color: #93C9FF;
    }
    </style>
    </head>
    <body>
    
    <div id="search_area">
    	<span>Search a topic:</span>
    	<form>
    		<input type="text" size="30" onkeyup="showResult(this.value)" />
    		<div id="livesearch"></div>
    	</form>
    </div><!-- end of search_area -->
    
    <div id="text_area">
    	<div id="color">
    		<h1>Lorem ipsum dolor sit amet</h1>
    	</div><!-- end of color -->
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod nisl ut erat varius varius. Suspendisse mauris lorem, lobortis eu varius nec, viverra dignissim magna. Curabitur vitae orci quis sapien malesuada mollis. Sed malesuada blandit sapien vel iaculis. Nullam turpis nibh, porttitor ut tincidunt in, laoreet at dui. Phasellus sollicitudin orci eu nibh rhoncus rhoncus. Donec vitae nisl massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum quis auctor tellus. Donec fermentum purus et massa gravida imperdiet eget eu dolor. Nunc fermentum auctor dolor, at cursus dolor interdum sed. Pellentesque egestas elit id felis cursus rutrum. Morbi et diam et diam bibendum hendrerit vel in orci.</p>
    </div><!-- end of text_area -->
    
    </body>
    </html>
    Javascript (livesearch.js):
    Code:
    function showResult(str)
    {
    if (str.length==0)
      { 
      document.getElementById("livesearch").innerHTML="";
      document.getElementById("livesearch").style.border="0px";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      live_xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      live_xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    live_xmlhttp.onreadystatechange=function()
      {
      if (live_xmlhttp.readyState==4 && live_xmlhttp.status==200)
        {
        document.getElementById("livesearch").innerHTML=live_xmlhttp.responseText;
        document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    	document.getElementById("livesearch").style.width="300px";
    	document.getElementById("livesearch").style.backgroundColor="#FFFF00";
    //	document.getElementById("livesearch").style.zIndex = 99999;
        }
      }
    live_xmlhttp.open("GET","livesearch.php?q="+str,true);
    live_xmlhttp.send();
    }
    PHP (livesearch.php):
    Code:
    <?php
    $live_xmlDoc=new DOMDocument();
    $live_xmlDoc->load("livesearch_cities.xml");
    
    $xx=$live_xmlDoc->getElementsByTagName('link');
    
    //get the q parameter from URL
    $qq=$_GET["q"];
    
    //lookup all links from the xml file if length of q>0
    if (strlen($qq)>0)
    {
    $hint="";
    for($ii=0; $ii<($xx->length); $ii++)
      {
      $yy=$xx->item($ii)->getElementsByTagName('title');
      $zz=$xx->item($ii)->getElementsByTagName('url');
      if ($yy->item(0)->nodeType==1)
        {
        //find a link matching the search text
        if (stristr($yy->item(0)->childNodes->item(0)->nodeValue,$qq))
          {
          if ($hint=="")
            {
            $hint="<a href='" . 
            $zz->item(0)->childNodes->item(0)->nodeValue . 
            "' target='_self'>" . 
            $yy->item(0)->childNodes->item(0)->nodeValue . "</a>";
            }
          else
            {
            $hint=$hint . "<br /><a href='" . 
            $zz->item(0)->childNodes->item(0)->nodeValue . 
            "' target='_self'>" . 
            $yy->item(0)->childNodes->item(0)->nodeValue . "</a>";
            }
          }
        }
      }
    }
    
    // Set output to "no suggestion" if no hint were found
    // or to the correct values
    if ($hint=="")
      {
      $response="no suggestion";
      }
    else
      {
      $response=$hint;
      }
    
    //output the response
    echo $response;
    ?>
    XML (livesearch_cities.xml):
    Code:
    <pages>
    	<link>
    		<title>Codingforums</title>
    		<url>http://www.codingforums.com</url>
    	</link>
    	<link>
    		<title>Codingforums</title>
    		<url>http://www.codingforums.com</url>
    	</link>
    	<link>
    		<title>Codingforums</title>
    		<url>http://www.codingforums.com</url>
    	</link>
    	<link>
    		<title>Codingforums</title>
    		<url>http://www.codingforums.com</url>
    	</link>
    	<link>
    		<title>Audi</title>
    		<url>http://www.audi.com/com/brand/en.html</url>
    	</link>
    	<link>
    		<title>Audi</title>
    		<url>http://www.audi.com/com/brand/en.html</url>
    	</link>
    	<link>
    		<title>Audi</title>
    		<url>http://www.audi.com/com/brand/en.html</url>
    	</link>
    	<link>
    		<title>Audi</title>
    		<url>http://www.audi.com/com/brand/en.html</url>
    	</link>
    	<link>
    		<title>Audi</title>
    		<url>http://www.audi.com/com/brand/en.html</url>
    	</link>
    </pages>


    Thank you.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Okay, this had nothing whatsoever to do with JavaScript.

    It is 100% a CSS problem.

    And the basic problem was that you omitted the position: relative; from your CSS.
    (Or could be position: absolute, of course.)

    Here's my modification. Using crazy colors just for demonstration purposes:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    <style type="text/css">
    #search_area {
            position: relative;
    	height: 50px;
    	width: 250px;
    	background-color: yellow;
    	margin-bottom: 9px;
    }
    #text_area {
    	width: 500px;
    	border: 1px solid red;
            background-color: pink;
            z-index: 1;
    }
    #color {
    	background-color: lightblue;
    }
    #livesearch {
        position: relative;
        background-color: lime;
        z-index: 99;
    }
    </style>
    </head>
    <body>
    
    <div id="search_area">
    	<span>Search a topic:</span>
    	<form>
    		<input type="text" size="30" onkeyup="showResult(this.value)" />
    		<div id="livesearch">
    		<a href="http://www.codingforums.com">Codingforums</a><br/>
    		<a href="http://www.codingforums.com">Codingforums</a><br/>
    		<a href="http://www.codingforums.com">Codingforums</a><br/>
    		<a href="http://www.codingforums.com">Codingforums</a><br/>
    		<a href="http://www.codingforums.com">Codingforums</a><br/>
    		<a href="http://www.codingforums.com">Codingforums</a><br/>
    		<a href="http://www.codingforums.com">Codingforums</a><br/>
    		</div>
    	</form>
    </div><!-- end of search_area -->
    
    <div id="text_area">
    	<div id="color">
    		<h1>Lorem ipsum dolor sit amet</h1>
    	</div><!-- end of color -->
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod nisl ut erat varius varius. Suspendisse mauris 
    
    lorem, lobortis eu varius nec, viverra dignissim magna. Curabitur vitae orci quis sapien malesuada mollis. Sed malesuada blandit 
    
    sapien vel iaculis. Nullam turpis nibh, porttitor ut tincidunt in, laoreet at dui. Phasellus sollicitudin orci eu nibh rhoncus 
    
    rhoncus. Donec vitae nisl massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum 
    
    quis auctor tellus. Donec fermentum purus et massa gravida imperdiet eget eu dolor. Nunc fermentum auctor dolor, at cursus dolor 
    
    interdum sed. Pellentesque egestas elit id felis cursus rutrum. Morbi et diam et diam bibendum hendrerit vel in orci.</p>
    </div><!-- end of text_area -->
    
    </body>
    </html>
    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.

  • Users who have thanked Old Pedant for this post:

    JonesJ (10-06-2011)

  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts
    It works. You are amazing.

  • #10
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts
    The live search works fine when using it. But if mouse is clicked outside of input field, the search option box should disappear but it does not.

    I tried different things with css for id="livesearch", but it seems like that something should be added to input field or to javascript file. The event used is onkeyup at the moment on input line and by changing it will not work since it will only affect the way the search is done.

    Any suggestions?



    Thank you.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Well, you could add
    Code:
        onblur="document.getElementById('livesearch').style.zIndex = -99;"
    to the <input> box, but then how will you copy/paste anything from the livesearch??

    Not sure what your ultimate purpose for the livesearch is.
    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.

  • Users who have thanked Old Pedant for this post:

    JonesJ (10-06-2011)

  • #12
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Hi (and thank you for the previous comments),

    This one is so far the best working solution so that the links will work:
    Code:
    <input type="search" size="30" onkeyup="showResult(this.value)" />
    <div id="livesearch" 
    onmouseout="document.getElementById('livesearch').style.visibility='hidden';" 
    onmouseover="document.getElementById('livesearch').style.visibility='visible';" >
    </div>
    The only thing missing is that whenever the mouse is gone from the search result area and the search results are hidden again as wanted, how to activate the search again.

    By typing on the input area which is constantly in active state, will give no search results. Even if clicking again the already active input area; will give no results.

    Somehow the whole 'livesearch' has been disabled after the onmouseout and onmouseover events.

    Only option is to reload the page to be able to search again.

    How this can be done fluent without page refresh?

    Thanks.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Can you show the live page? That is, show us a URL to look at?

    I can't see why what you describe is happening.

    We *could* improve the code a bit in the process, but I want to see why what you report is happening, first.
    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.

  • #14
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Okay,
    The address is http://www.bangwoo.org/livesearch.html

    The search is little bit slow. It takes a second or two and the results are there.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    I don't see what you mean.

    If the list disappears, I can just type another character and it comes back.

    For example, type "c" and see "codingforums". Hit backspace, type "i". See both "codingforums" and "audi" come up.

    It seems to work fine, to me. Except that it's so slow as to be nearly unusable.
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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