• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 268
  • Last Modified:

google Custom Search layout

hi expert,

I am trying to use google Custom Search  that uses (AJAX Search API)
the problem with the "overlay" thing, how can I put the results in a div (not the floating one)
0
uk1900
Asked:
uk1900
  • 3
  • 2
1 Solution
 
ShaneJonesCommented:
Can you post the code for the custom search box please?
0
 
uk1900Author Commented:
hi shane,

this is the entire code u need to run google Custom Search  that uses (AJAX Search API)
the result is stored in <div id="results_014225229805397440211:2nf7dwv2h4e">
even if I put this div in a table it still float!


<form action="" id="searchbox_014225229805397440211:2nf7dwv2h4e" onsubmit="return false;">
  <div>
    <input type="text" name="q" size="40"/>
    <input type="submit" value="Search"/>
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_014225229805397440211%3A2nf7dwv2h4e&lang=en"></script>
 
<div id="results_014225229805397440211:2nf7dwv2h4e" style="display:none">
  <div class="cse-closeResults"> 
    <a>&times; Close</a>
  </div>
  <div class="cse-resultsContainer"></div>
</div>
 
<style type="text/css">
@import url(http://www.google.com/cse/api/overlay.css);
</style>
 
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAtxM1lWeZiDd1zIcRffMrthQtyEiWRX5NtO9WcwCf_PcxrQYPQBQvGKuOH_Zu-yn_FSgyhelqhIoHIQ&hl=en" type="text/javascript"></script>
<script src="http://www.google.com/cse/api/overlay.js" type="text/javascript"></script>
<script type="text/javascript">
function OnLoad() {
  new CSEOverlay("014225229805397440211:2nf7dwv2h4e",
                 document.getElementById("searchbox_014225229805397440211:2nf7dwv2h4e"),
                 document.getElementById("results_014225229805397440211:2nf7dwv2h4e"));
}
GSearch.setOnLoadCallback(OnLoad);
</script>

Open in new window

0
 
ShaneJonesCommented:
Line 17 links to http://www.google.com/cse/api/overlay.css

I'd suggest makign a copy of this at www.yourdomain.com/css/overlay.css

You can then edit it now.

Download a firefox plug in called Firebug, it lets you inspect elements. Make the search and get the box that floats in your browser, then hit F12 to launch firebug. Click on Inspect element on the left of the firebug window.

You will now see that the elements in the main window go a blue colour when you highlight them. find the element that is floating and left click.

in the firebug panel you will now see the code and on the right its css. Play around with the css to make the desired effect. When you have the panel how you want. edit your local copy of overlay.css

Hope this helps. let us know.
0
 
uk1900Author Commented:
thx
0
 
ShaneJonesCommented:
Awesome, Hope this helps!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now