...

View Full Version : Object.style.backgroundColor="color|inherit|transparent"



JonesJ
10-05-2011, 10:02 PM
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.

Old Pedant
10-05-2011, 10:35 PM
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.


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.

DanInMa
10-05-2011, 10:37 PM
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

JonesJ
10-06-2011, 12:09 AM
Thank You Old Pedant and DanInMa for the comments,

The code with the .zIndex = 9999; inclusion:


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.

DanInMa
10-06-2011, 12:22 AM
its probabaly time to show your entire code.

Old Pedant
10-06-2011, 02:07 AM
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.

JonesJ
10-06-2011, 11:54 AM
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:


<!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):


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):


<?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):


<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.

Old Pedant
10-06-2011, 09:12 PM
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:


<!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>

JonesJ
10-06-2011, 09:28 PM
It works. You are amazing.

JonesJ
10-06-2011, 11:20 PM
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.

Old Pedant
10-06-2011, 11:44 PM
Well, you could add

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.

JonesJ
10-10-2011, 08:10 PM
Hi (and thank you for the previous comments),

This one is so far the best working solution so that the links will work:


<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.

Old Pedant
10-10-2011, 09:02 PM
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.

JonesJ
10-10-2011, 10:05 PM
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.

Old Pedant
10-10-2011, 10:37 PM
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.

blaze4218
10-10-2011, 10:52 PM
I see the problem he is referencing.
If you mouse over,then out the suggestion box disappears, also if you don't give the search pane focus immediately there is also a chance that it won't appear. Either way, once it disappears the first time it won't return without refreshing the page.

Old Pedant
10-10-2011, 11:07 PM
Okay...I got it to happen.

Well, the whole thing is just too complex. There's nothing that forces it visible except onmouseover, but if it's already hidden then onmouseover won't even get captured. The onmouseover should be on the <input>, to make it appear.

Why the need to change the background color or border or or or???

Make it invisible or visible. Period.

Don't change any of the other styles. And rely *only* on onmouseover to make it visible. If it has no content, just hide the content.



<style>
div.livesearch {
position: relative;
border: 1px solid #A5ACB2;
width: 300px;
background-color: #FFFF00;
z-index = 99999;
}
</style>

and


var hasContent = false;
var theSearch = null;

function showResult(str)
{
theSearch = document.getElementById("livesearch");
if (str.length==0)
{
hasContent = false;
theSearch.innerHTML="";
theSearch.style.visibility = "hidden";
}
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)
{
theSearch.innerHTML = live_xmlhttp.responseText;
theSearch.style.visibility = "visible";
hasContent = true;
}
}
live_xmlhttp.open("GET","livesearch.php?q="+str,true);
live_xmlhttp.send();
}

and


<input type="search" size="30" onkeyup="showResult(this.value)"
onmouseout="document.getElementById('livesearch').style.visibility='hidden';"
onmouseover="if ( hasContent ) document.getElementById('livesearch').style.visibility='visible';" />
<div id="livesearch"></div>

Untested...maybe?

JonesJ
10-10-2011, 11:14 PM
That way it works. But if one brings the mouse on top of the search results and then to other part of the page; it stops working.

Old Pedant
10-10-2011, 11:17 PM
Ahh...I see...

We need onmouseover and out on *BOTH* the <input> and the <div>.

And we need to *delay* the effect of onmouseout long enough for the cursor to get captured by the div's onmouseover.

blaze4218
10-10-2011, 11:20 PM
*delay* the effect of onmouseout long enough for the cursor to get captured by the div's onmouseover
How exactly would you go about that? because I've actually tried many ways from sunday to do just that, and eventually gave up on it. (in my own projects that is)

Old Pedant
10-10-2011, 11:26 PM
<input type="search" size="30" onkeyup="showResult(this.value)"
onmouseout="hideSearch();"
onmouseover="showSearch();"/>
<div id="livesearch"
onmouseout="hideSearch();"
onmouseover="showSearch();" ></div>

and then


var hasContent = false;
var theSearch = null;
var pause = null;

function showResult(str)
{
... as before ...
}

function showSearch()
{
if ( pause != null ) clearTimeout(pause);
pause = null;
if ( hasContent ) theSearch.style.visibility = "visible";
}
function hideSearch()
{
if ( pause != null ) clearTimeout(pause);
pause = setTimeout( "theSearch.style.visibilty='hidden'", 250 ); // adjust time as needed
}

JonesJ
10-11-2011, 12:53 AM
Working!

Pretty slow though; the search. Maybe because of the server.

With this method the search results stay on if mouse is leaving the input area. Whereas, when leaving the search box area; the box disappears.



<div id="search_area">
<span>Search a topic:</span>
<form>
<input type="search" size="30" onkeyup="showResult(this.value)"
onmouseover="document.getElementById('livesearch').style.visibility='visible';"
onmouseout="document.getElementById('livesearch').style.visibility='visible';" />

<div id="livesearch"
onmouseover="document.getElementById('livesearch').style.visibility='visible';"
onmouseout="document.getElementById('livesearch').style.visibility='hidden';" >
</div>
</form>
</div><!-- end of search_area -->

JonesJ
10-11-2011, 10:14 AM
By having window.onload after calling the js function in the head section makes the search fast.



<script type="text/javascript" src="livesearch.js"></script>
<script type="text/javascript">
window.onload=showResult;
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum