Как установить произвольную ширину в моем поисковом окне Google?

Question

Я пытаюсь использовать поиск Google для моего сайта:

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

Не очень приятно играть с некоторыми разрешениями экрана. Вот код, полученный от 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>

Я изменил «googleSearchFrameWidth» до 250, подумав, что нужно установить ширину в пикселях (это было 600 для начала) Но с экранами меньшего размера (1024 * 768) он выпирает на бок моих дивов.

Я что-то делаю глупо?

Answer 1

У меня есть три параметра, которые вы можете настроить, комбинация которых, я надеюсь, приведет вас туда, куда вам нужно:

1. googleSearchFrameWidth - установите в JavaScript желаемую ширину. Это наиболее очевидный и тот, который вы, вероятно, уже подправили.
2. Ширина cse-search-results div - Используйте встроенный оператор стиля (например, style ="width:500"), чтобы установить ширину div.
3. Установите стиль IFrame - Если вы проверите, вы, вероятно, заметите, что весь этот контент воспроизводится из Google через IFrame. Это немного сложнее, но выполнимо. Для этого добавьте в конец таблицы стилей оператор, такой как #cse-search-results iframe { }, включая фактический стиль iframe в скобках.

Я надеюсь, что один из них или их комбинация окажется для вас ответом. В случае сомнений используйте инспектора DOM, такого как тот, который доступен в Firebug, чтобы проанализировать влияние ваших изменений на DOM. Надеюсь, это поможет.

Answer 2

ОБНОВЛЕНИЕ 22/06/10 - Нашли более простое решение, приведенное ниже. Измените значение FORID в коде на на FORID: 11 . Поэтому одна строка вашего кода должна выглядеть примерно так:

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

---

Попробуйте просто добавить

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

в вашем CSS.

Answer 3

Столкнулся с той же проблемой, что и вы, когда захотел изменить размер iFrame. Можно подумать, что изменение значения googleSearchFrameWidth поможет, но нет.

Так что я прибег к манипуляциям с DOM. Поскольку имя iFrame - "googleSearchFrame", сразу после

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

ссылка, я добавил еще один тег <script> со следующим:

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

Приведенное выше значение устанавливает ширину рамки на 600px. В вашем случае, очевидно, вы захотите установить его на 250. Если вы не уверены, что Google когда-нибудь изменит имя iFrame, просто воспользуйтесь методом getElementsByTagName('iFrame') и сузьте его до положения вашего iFrame в документе (если у вас несколько iFrame).

Answer 4

<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 5

Простые шаги для изменения googleSearchFrameWidth на вашем сайте:

1. ЗАГРУЗИТЕ свой собственный файл 'show_afs_search.js' из http://www.google.com/afsonline/show_afs_search.js и сохраните его в том же каталоге, где находится ваша страница results.htm.

2. Откройте веб-страницу results.htm и измените код строки в сценарии. ... src = "http://www.google.com/afsonline/show_afs_search.js" TO: src =" show_afs_search.js "

3. Откройте свой собственный файл 'show_afs_search.js' и ИЗМЕНИТЕ ширину настройки: a в ширину: "600" (или что угодно, чтобы установить ширину в пикселях) и сохраните свой собственный файл 'show_afs_search.js'.

4. Загрузите оба файла на свой хостинг-сайт в одном каталоге: results.htm и show_afs_search.js '

СДЕЛАНО!

Answer 6

Google не разрешит вам использовать ширину меньше 500 пикселей. Лучше всего создать стиль для iframe:

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