Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

google Suggest Question? 1

Status
Not open for further replies.
bean1234

bean1234

Technical User
Nov 14, 2006
45
US
Hello All,

I have implemented Google Suggest like functionality using the dynamically created divs, if you look at the google suggest the drop down created overlaps the search buttons , by overlap I mean it hides the buttons when it needs to display the dropdown, however in my case the dynaically created dropdown is transparent i.e Th button would be visible.I dont want to use any colors.Please let me know how I can accomplish this.

Thanks in Advance!!
 
Sort by date Sort by votes
If you want the buttons to not be shown, but yet to have a transparent drop-down, then your only option is to hide the buttons by setting their display properties.

You could set their "display" style to "none", but if you prefer to keep the page layout the same, set their "visibility" style to "hidden" (and back to "visible" again afterwards):

Code: 
someObj.style.visibility = 'hidden';
...
someObj.style.visibility = 'visibile';

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks for the reply Dan, I not only want to hide the buttons but also some text beneath teh drop down , if you look at the google suggest page you would see that even the etxt is hidden when the dropdown appears, I dont neccessarily mean that the drop down has to be transparent , it just needs to be in white color, do you have anymore suggestions.Thanks!
 
Upvote 0 Downvote
I don't want to use any colors
Click to expand...

Any reason why? That's how google suggest gets the stuff to disappear behind the div - they set a background of white to the div that pops up. By default a div will have a transparent background, so all you have to do is set the background of the popup div to white and it will hide everything behind it.

For extra added sexiness, you can even add a touch of opacity to the div so that the elements below subtly fade thru the popup. Here's a simple example:

[small](take out the opacity styles marked in red to have a solid white background)[/small]
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function showDiv(obj) {
   document.getElementById("theDiv").style.display = (obj.value.length) ? "block" : "none";
}

</script>

<style type="text/css">

* {
   padding:0px;
   margin:0px;
}

div#theDiv {
   position:absolute;
   background-color:#ffffff;
   color:#000000;
   display:none;
   top:22px;
   left:0px;
   border:1px solid #ff0000;
   [!]opacity: 0.9;
   -moz-opacity: 0.9;
   -khtml-opacity: 0.9;
   filter: alpha(opacity=90);[/!]
}
</style>
</head>
<body>
<div id="theDiv">
   Here is where all the crazy suggest stuff goes.<br />
   Just more text for filler<br />
   Last line
</div>
<input type="text" onkeyup="showDiv(this)">
<br />
<input type="button" value="I'm a button" /> <input type="button" value="I'm another button" />
<p>And you said you wanted<br />to have a little text too</p>
</body>
</html>

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
Thanks a lot Kaht for your great example, thats what I was looking for , and I did use yor sexiness approach to make it look even better.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
447
JScannell
JScannell
BobMCT
  • Locked
  • Question
php + js + jquery + $.post combination question(s)???
Replies
1
Views
121
BobMCT
BobMCT
javierdlm001
  • Locked
  • Question
Rookie question: About JS Frameworks and Libraries, use'em all, or stick to one? 1
Replies
2
Views
124
javierdlm001
javierdlm001
DougP
  • Locked
  • Question
Newbie question about making functions to pass image names for viewing larger
Replies
7
Views
200
vacunita
vacunita
audiopro
  • Locked
  • Question
Multiple Draggable Markers on Google Maps
Replies
0
Views
89
audiopro
audiopro

Part and Inventory Search

Sponsor

Back
Top