Solved

google Custom Search layout

Posted on 2008-10-21
5
255 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
  • 3
  • 2
5 Comments
 
LVL 12

Expert Comment

by:ShaneJones
Comment Utility
Can you post the code for the custom search box please?
0
 

Author Comment

by:uk1900
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
thx
0
 
LVL 12

Expert Comment

by:ShaneJones
Comment Utility
Awesome, Hope this helps!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Both Easy and Powerful How easy is PHP? http://lmgtfy.com?q=how+easy+is+php (http://lmgtfy.com?q=how+easy+is+php)  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now