Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Реклама, в зависимости от ширины экрана (https://javascript.ru/forum/misc/2576-reklama-v-zavisimosti-ot-shiriny-ehkrana.html)

Asdvin 18.01.2009 07:00

Реклама, в зависимости от ширины экрана
 
Ребята, здравствуйте! Прощу вашей помощи, т.к. сам в этом не шарю. Проблема такова: Имеется сайт. На нём, в шапке стоит рекламный банер от гугла. Стоит "Большой" банер и при ширине экрана 1280 или болше - всё смориться отлично, но если ширина экрана меньше, то часть шапки уезжает вправо за границу экрана и появляется полоса прокруткм. Это решается, установкой "Маленького" банера. При разрешениях <1280 маленький банер смотриться отлично, но при больших - как иголка в стогк сена....

Короче, в чём суть.....

Вот код "Большого" банера:

<script type="text/javascript"><!--
google_ad_client = "pub-6440865706843912";
/* графика для Asdvin */
google_ad_slot = "5469918724";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>



Вот код "Маленького" банера:

<script type="text/javascript"><!--
google_ad_client = "pub-6440865706843912";
/* Тестовый маленький */
google_ad_slot = "3966141518";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


Как мне слепить из этого такую логику:

Если (ширина экрана <1280) выводить МАЛЕНЬКИЙ банер Иначе БОЛЬШОЙ банер.

Друзья, помогите пожалуйста! Уже несколько дней не могу справиться с этой проблемой. На форуме моего Хостинга никто ничего толкового сказать не может.... Ведь для знатаков яваскрипта, этот код не представляет никаких сложностей.....

Заранее спасибо...

Asdvin 18.01.2009 11:03

Ну, что же вы, товарищи программисты! Пожалуйста, помогите, очень прошу!

Octane 18.01.2009 13:04

Спят товарищи программисты в 7 часов утра в воскресенье :)

не получится так вставлять гугловский скрипт, он использует document.write и перезапишет станицу, если его вставить после загрузки документа.

Asdvin 18.01.2009 13:09

А как же быть, друг? Если можешь, хотя бы подскажи в каком направлении двигаться, в поисках решения?

Сделать универсально - не вариант. Просто при разных разрешениях, (Неподходящих) смотриться действительно ущербно.....

Могу дать ссылку на сайт, если нужно. Щас не выкладываю, чтоб не посчитали за рекламу.

Asdvin 18.01.2009 13:10

Да, забыл сказать, сайт на Юкозе... (Ну начинаю я только, что поделаешь...)

Это я к тому, что там PHP не работает....

Asdvin 18.01.2009 14:54

Хорошо... Ребят, упростим задачу.. Вы могли бы мне написать ПРАВИЛЬНЫЙ код, но вместо объявлений, будут выводиться просто картинк - ссылки..?

Shock 18.01.2009 15:33

<script type="text/javascript"><!--
google_ad_client = "pub-6440865706843912";
if(screen.width > 1280) {
    /* графика для Asdvin */
    google_ad_slot = "5469918724";
    google_ad_width = 728;
    google_ad_height = 90;
} else {
    /* Тестовый маленький */
    google_ad_slot = "3966141518";
    google_ad_width = 468;
    google_ad_height = 60;
}
//-->
</script>

Asdvin 18.01.2009 19:36

Shock,
Большое спасибо, за попытку помочь, но, к сожалению, этот код не работает. Не выводятся вообще ни какие объявления.... :-(

Андрей Параничев 18.01.2009 19:39

Asdvin,
А вот это вставили после вышеприведенного кода?
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Octane 18.01.2009 19:59

Окно браузера нередко бывает не развернуто во весь экран, особенно сейчас, когда большая часть мониторов, которые продаются, являются широкоформатными 16:10, и часть пространства по горизонтали отъедают всякие меню и виджеты, поэтому проверять ширину экрана совершенно бесполезно, а узнать ширину body, можно только после загрузки страницы, что делает невозможным вставку рекламы от Google, использующей в своих кодах document.write, в зависимости от размеров окна браузера.

Zibba 21.01.2009 10:28

А нельзя как вариант использовать определение размеров рабочей области браузера как нибудь так:

var g = {};

if(window.innerWidth){// Все браузеры кроме IE
	g.width = window.innerWidth;
	g.height = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientWidth){
	// Эти ф-ции для IE6 и документов с объявлением DOCTYPE
	g.width = document.documentElement.clientWidth;
	g.height = document.documentElement.clientHeight;
} else if (document.body.clientWidth){
	// Эти ф-ции для IE4, IE5 и IE6 без объявления DOCTYPE
	g.width = document.body.clientWidth;
	g.height = document.body.clientHeight;
}


И дожидаться загрузки документа не придется.
Хотя с рекламой от google не сталкивался, так что не заю поможет ли.

Octane 21.01.2009 14:10

Получить размеры body можно только после загрузки документа.

Zibba 21.01.2009 14:23

Ну так в моем случае
// Эти ф-ции для IE4, IE5 и IE6 без объявления DOCTYPE
g.width = document.body.clientWidth;
g.height = document.body.clientHeight;


Т.е. если нет объявления DOCTYPE то топик стартеру должно подойти :) , а что ему мешает его не делать!?)

Kolyaj 21.01.2009 14:49

Zibba,
перечитайте еще раз
Цитата:

Сообщение от Octane
Получить размеры body можно только после загрузки документа.


Zibba 21.01.2009 15:12

Kolyaj,
Извиняюсь, я напортачил в изложении своей мысли. Я имел ввиду что способ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
	</head>
	<body>
		<script type="text/javascript">
		function getGeometry(){// Функция определения размеров клиентской области окна
			var g = {};

			if(window.innerWidth){// Все браузеры кроме IE
				g.width = window.innerWidth;
				g.height = window.innerHeight;
			} else if (document.documentElement && document.documentElement.clientWidth){
				// Эти ф-ции для IE6 и документов с объявлением DOCTYPE
				g.width = document.documentElement.clientWidth;
				g.height = document.documentElement.clientHeight;
			} else if (document.body.clientWidth){
				// Эти ф-ции для IE4, IE5 и IE6 без объявления DOCTYPE
				g.width = document.body.clientWidth;
				g.height = document.body.clientHeight;
			}

			return g;
		}
			
		var g = getGeometry();
		alert(g.width + '\n' + g.height);
		</script>
	</body>
</html>

Будет работать в IE6+ и всех остальных браузерах. (Ну покрайней мере у меня каким то чудодейственным способом работает :) )
Не думаю что топик стартеру нужно осуществлять это и для такого старья как IE5--

P.S. Если я снова ступил, то тыкинте прямо носом в точку ошибки и разъясните, а то так и не поняв не смогу спать спокойно :(

Octane 21.01.2009 15:25

Zibba, размеры <body> и <html> можно узнать только после загрузки документа! То есть документ будет уже закрыт для записи в поток и document.write, который есть в Google-скриптах, перезапишет весь документ.

Kolyaj 21.01.2009 15:44

Браузер сам не знает размеры документа, пока он полностью не загружен (что не удивительно).

Zibba 21.01.2009 15:46

Ну так а я в своем примере и не узнаю размеры <body> и <html>, а размеры рабочей клиентской области окна браузера, т.е. в приведенный мной код ничего не мешает дальше в теле <body></body> после вызова функции получения ширины и высоты (в данном случае автору требуется только ширина), исполнить еще один блок <script></script> в том числе и с document.write.

Т.е. у меня код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
	</head>
	<body>
		<script type="text/javascript">
		function getGeometry(){// Функция определения размеров клиентской области окна
			var g = {};

			if(window.innerWidth){// Все браузеры кроме IE
				g.width = window.innerWidth;
				g.height = window.innerHeight;
			} else if (document.documentElement && document.documentElement.clientWidth){
				// Эти ф-ции для IE6 и документов с объявлением DOCTYPE
				g.width = document.documentElement.clientWidth;
				g.height = document.documentElement.clientHeight;
			} else if (document.body.clientWidth){
				// Эти ф-ции для IE4, IE5 и IE6 без объявления DOCTYPE
				g.width = document.body.clientWidth;
				g.height = document.body.clientHeight;
			}

			return g;
		}
			
		var g = getGeometry();
		alert(g.width + '\n' + g.height);
		</script>
		
		<script type="text/javascript">
			document.write("Hello World !!!");
		</script>
	</body>
</html>


выводит сначало ширину и высоту рабочей области, потом выполняет document.write, вроде все работает O_o
P.S. Наверное я совсем дубовый :(

P.P.S. Но если у топикстартера страница состоит из нескольких фреймов, то да, тогда данный способ ему не подойдет.

Kolyaj 21.01.2009 16:30

Цитата:

Сообщение от Zibba
Наверное я совсем дубовый

Да не :) В таком случае будет работать. Но это все бессмысленно, ибо пользователь может потом развернуть окно (как и случается в большинстве случаев в ИЕ6).

Лечить надо причину, а не следствие.

Octane 21.01.2009 17:07

Цитата:

Сообщение от Zibba (Сообщение 11137)
Ну так а я в своем примере и не узнаю размеры <body> и <html>

А это что тогда?

Цитата:

Сообщение от Zibba (Сообщение 11137)
else if (document.documentElement && document.documentElement.clientWidth){
				// Эти ф-ции для IE6 и документов с объявлением DOCTYPE
				g.width = document.documentElement.clientWidth;
				g.height = document.documentElement.clientHeight;
			} else if (document.body.clientWidth){
				// Эти ф-ции для IE4, IE5 и IE6 без объявления DOCTYPE
				g.width = document.body.clientWidth;
				g.height = document.body.clientHeight;
			}

А window.innerWidth, который мог бы помочь в данной ситуации, не работает ни в одной из версий IE. И опят же, как сказал Kolyaj, это не решит всех проблем, что делать при ресайзе окна?

Zibba 21.01.2009 18:17

Ну ресайз это уже отдельный разговор. Но покрайней мере как начальный вариант хоть что то.
А так полснотью согласен с Kolyaj, как и Вы.
Ибо если не смотрится в дизайне, значит в нем что то нужно менять :)

Asdvin 22.01.2009 18:27

О!!! Ничего себе!! Тут оказывается столько ответов!!! А уведомления почему то не приходили. Огромное спасибо вам! Как говориться - всё исследовал, но не всё понял. Щас буду пробовать. О результатах сообщу. Ещё раз спасибо огромное!


Часовой пояс GMT +3, время: 20:03.