How can I set a custom width on my Google search iframe?

Question

I am trying to use google search for my site:

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

It is not playing nice with some screen resolutions. Here is the code given from 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" down to 250 thinking that should be setting the width in px, (it was 600 to start with). But with smaller screens (1024 * 768) it sticks out the side of my divs.

Am I doing something stupid?

Answer 1

Ran into the same trouble you did wanting to resize the iFrame. You'd think changing the googleSearchFrameWidth value would do the trick, but nope.

So I resorted to DOM manipulation. Since the name of the iFrame is "googleSearchFrame", Right after the

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

reference, I added another <script> tag with the following:

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

The above sets the width of the iFrame at 600px. In your case, obviously, you'd want to set it to 250. If you're paranoid that Google might change the iFrame name some day, just go with 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 tweak, a combination of which I hope will get you where you need to go:

1. googleSearchFrameWidth - Set this in the JavaScript to your desired width. This is the most obvious one and the one you've probably already tweaked.
2. Width of cse-search-results div - Use an inline style statement (e.g. style ="width:500") to set the width of the div.
3. Set the IFrame Style - If you check, you'll probably notice that all of this content is being rendered from Google via an IFrame. This is a bit harder to tweak but doable. To do this, add a statement to the end of your stylesheet such as #cse-search-results iframe { }, including the actual iframe style within the brackets.

I hope one of these or a combination of these proves to be the answer for you. When in doubt, use a DOM inspector such as the one available in Firebug to analyze the impact of your changes on the DOM. Hope this helps.

Answer 3

UPDATE 22/06/10 - Found a simpler solution that below. Change the FORID value in the in code to FORID:11. Therefore one line of you code should look similar to this:

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

---

Try just adding

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

in your CSS.

Answer 4

Easy steps to modify the googleSearchFrameWidth in your site:

1. 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 you results.htm webpage.

2. Open your results.htm webpage and MODIFY the line code into the script ... src="http://www.google.com/afsonline/show_afs_search.js" TO: src="show_afs_search.js"

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

4. Upload both files to your hosting site at 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 smaller than 500px. Your best bet is to create a style for the iframe:

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