How to adjust custom width in google search iframe?

Question

I am trying to use Google search for my site:

http://www.houseofhawkins.com/search.php

It does not play well with some screen resolutions. Here is the code provided by google:

<div id="cse-search-results"></div> <script type="text/javascript"> var googleSearchIframeName = "cse-search-results"; var googleSearchFormName = "cse-search-box"; var googleSearchFrameWidth = 250; var googleSearchDomain = "www.google.com"; var googleSearchPath = "/cse"; </script> <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> 

I changed the "googleSearchFrameWidth" to 250 with the mouse, which should set the width to px (starting at 600). But with smaller screens (1024 * 768) it sticks out from the side of my divs.

Am I doing something stupid?

Answer 1

You got into the same problem you wanted to resize the iFrame. You think that changing the value of googleSearchFrameWidth will do the trick, but no.

Therefore, I resorted to manipulating the DOM. Since the iFrame name is " googleSearchFrame ", right after

 <script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> 

I added another <script> with the following:

 <script type="text/javascript"> document.getElementsByName('googleSearchFrame').item(0).width = 600; </script> 

The above sets the iFrame width to 600px . In your case, obviously, you want to set it to 250 . If you are paranoid that Google may one day change the name of the iFrame, simply use the getElementsByTagName('iFrame') method and narrow it down to the position of your iFrame in the document (if you have multiple iFrames).

Answer 2

I have three settings that you can configure, a combination of which, I hope, will lead you to where you need to:

• googleSearchFrameWidth . Set this in JavaScript to the desired width. This is the most obvious and the one you probably already configured.
• Width of cse-search-results div . Use the inline style statement (for example, style ="width:500" ) to set the width of the div.
• Set IFrame style . If you check, you will probably notice that all this content is displayed on Google through an IFrame. This is a little harder to set up, but doable. To do this, add an instruction at the end of your stylesheet, for example #cse-search-results iframe { } , including the actual iframe style in brackets.

I hope that one of these or a combination of these will be your answer. If in doubt, use a DOM inspector, such as the one available in Firebug, to analyze the effect of your changes on the DOM. Hope this helps.

Answer 3

UPDATE 22/06/10 . A simpler solution has been found here. Change the FORID value in the code to FORID: 11 . Therefore, one line of your code should look something like this:

 <input type="hidden" name="cof" value="FORID:11;NB:1" /> 

---

Try to add

 #cse-search-results iframe {width: 100%;} 

in your CSS.

Answer 4

Simple steps to change googleSearchFrameWidth on your site:

• DOWNLOAD your own show_afs_search.js file from http://www.google.com/afsonline/show_afs_search.js and save it in the same directory where you have the results. htm web page.

• Open the webpage results.htm and CHANGE the line code in the script ... src = "http://www.google.com/afsonline/show_afs_search.js" TO: src = "show_afs_search.js"

• Open your own show_afs_search.js file and change the width of the setting: a to the width: "600" (or whatever you want to set the width in pixels) and save your own show_afs_search.js file.

• Upload both files to your hosting site in the same directory: results.htm and show_afs_search.js

DONE!

Answer 5

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("iframe[name='googleSearchFrame']").css("width","100%"); }); </script> 

Answer 6

Google will not allow you to use a width of less than 500 pixels. It is best to create an iframe style:

 <style> #cse-search-results iframe {width: 200px; } </style>