Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

google Custom Search layout

Posted on 2008-10-21
5
Medium Priority
?
264 Views
Last Modified: 2013-12-09
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
Comment
Question by:uk1900
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:ShaneJones
ID: 22774265
Can you post the code for the custom search box please?
0
 

Author Comment

by:uk1900
ID: 22783659
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
 
LVL 12

Accepted Solution

by:
ShaneJones earned 2000 total points
ID: 22784000
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
 

Author Closing Comment

by:uk1900
ID: 31508623
thx
0
 
LVL 12

Expert Comment

by:ShaneJones
ID: 22784374
Awesome, Hope this helps!
0

Featured Post

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question