Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помощь новичку в JS (https://javascript.ru/forum/misc/54155-pomoshh-novichku-v-js.html)

Andry_JS 05.03.2015 22:15
Помощь новичку в JS
 
Доброго времени суток. Вопрос в следующем:

Есть скрипт(который я нашел в интернете) выполняющий автоматическое масштабирование бекграунда по размеру экрана, но выполняется он один раз и для одного объекта. Мне же хочется применить для всех нужных мне div'ов.

Пожалуйста, помогите довести скрипт до ума. Я думаю, что можно реализовать задачу через .siblings(), но я не знаю как... очень плохо знаю синтаксис js...

Вот скрипт:

var _settings = {

			// Full screen win
				useFullScreenWin: true
			};

	// jQuery
		jQuery(function() {

			var	$window = $(window),
				$body = $('body');

			// Full Screen Win
				if (_settings.useFullScreenWin)
				{
					var $win = $('#win');
					
					if ($win.length > 0)
					{
						var $win_win = $win.find('win');
						
						$window
							.on('resize.overflow_fsh', function() {
									var p = Math.max(192, ($window.height() - $win_win.outerHeight()) / 2);
									$win.css('padding', p + 'px 0 ' + p + 'px 0');
							})
							.trigger('resize.overflow_fsh');
							
						$window.load(function() {
							$window.trigger('resize.overflow_fsh');
						});
					}
				} 
			});

рони 05.03.2015 22:23
Andry_JS,
может проще на css сделать?

Andry_JS 05.03.2015 22:26
Цитата:
Сообщение от рони (Сообщение 359783)
Andry_JS,
может проще на css сделать?
Проще - возможно, но качественнее так.

Andry_JS 05.03.2015 22:29
Цитата:
Сообщение от рони (Сообщение 359783)
Andry_JS,
может проще на css сделать?
Представьте, например, хочется вам оптимизировать сайт для всех типов мобильных устройств. Одних медиа стилей напишете в несколько раз больше этого скрипта + сколько времени потратите на реализацию. А тут всё достаточно просто...

danik.js 05.03.2015 22:49
Цитата:
Сообщение от Andry_JS
Представьте
Представил:
body{
    background: url(image.jpg);
    background-size: cover;
}

Цитата:
Сообщение от Andry_JS
А тут всё достаточно просто
Без сомнений!:D

danik.js 05.03.2015 22:50
Цитата:
Сообщение от Andry_JS
$window.height() - $win_win.outerHeight()
win головного мозга :lol:

рони 05.03.2015 22:51
Andry_JS,
структура блока ?

danik.js 05.03.2015 22:52
Цитата:
Сообщение от Andry_JS
Одних медиа стилей напишете в несколько раз больше этого скрипта
Зато все отрисуется моментально, а не когда загрузится тормозная jquery. Да чего там больше то?

Andry_JS 05.03.2015 23:00
Цитата:
Сообщение от danik.js (Сообщение 359792)
Представил:
body{
    background: url(image.jpg);
    background-size: cover;
}


Без сомнений!:D
Скрип рассчитывает отступы от объекта до краёв окна браузера, это очень удобно так как все объекты позиционируются в центре, при любом размере окна браузера. Я не много не правильно задачу описал, но суть вроде ясна)

Andry_JS 05.03.2015 23:03
Цитата:
Сообщение от рони (Сообщение 359794)
Andry_JS,
структура блока ?
 
<div id="win">
			<div id="c1">
					<header id="header">
						<h1></h1>
					</header>
			</div>
		</div>
		<div id="win">
			<div class="c2">
                                        <header id="header">
						<h1></h1>
					</header>
			</div>
		</div>
		<div id="win">
			<div class="c3">
                                        <header id="header">
						<h1></h1>
					</header>
			</div>
		</div>

рони 05.03.2015 23:39
Andry_JS,
пока структура и скрипт и что делает скрипт для меня не ясно.
какие отступы? какое позиционировfние ? когда id в структуре повторяются, а строка 20 скрипта ищет неизвестно что.

Andry_JS 06.03.2015 00:00
Извините, что-то с отступами не получилось)) 

<body>
<div id="win">
	<div id="c1">
		Блок номер 1
	</div>
</div>

<div id="win">
	<div class="c2">
		Блок номер 2
	</div>
</div>

</div>
<div id="win">
	<div class="c3">
		Блок номер 3
	</div>
</div>
</body>

Andry_JS 06.03.2015 00:03
Что ищет 
var $win_win = $win.find('win');

К сожалению тоже не знаю. Нашел скрип уже в таком виде, но без этого значения скрипт работать не хочет.

Andry_JS 06.03.2015 00:13
Я представляю себе это как-то так:

В строку var $win = $('#win').siblings('win');
Добавить siblings('win') чтобы применялся скрипт к соседям также. Но такая форма записи не правильная, а как правильно...

рони 06.03.2015 00:17
Andry_JS,
по загрузке страницы и по изменении размеров окна, с блоком класса "win", что должно произойти ?

Andry_JS 06.03.2015 00:18
Вот посмотрите как на сайте работает так понятнее будет http://web-media.pro/

Andry_JS 06.03.2015 00:21
для него происходит математическое вычисление - скрипт считает какой должен быть padding-top и padding-bottom, чтобы размер блока соответствовал размеру окна браузера в точности

рони 06.03.2015 00:33
Цитата:
Сообщение от Andry_JS
так понятнее будет
видимо не судьба мне вас понять -- но строки 20 и 21 (jquery-1.7.1.min.js) ненужны , id на странице не должно повторятся -- с какой проблемой вы столкнулись мне неизвестно, потому как вы так и не обьяснили толком.

рони 06.03.2015 00:34
Andry_JS,
а зачем padding если можно высоту = 100% сделать в css

Andry_JS 06.03.2015 00:34
рони,
Проблема собственно в чём: Скрипт работает отлично, но только для одного объекта, то есть скрипт находит первый div с id="win", а надо чтобы находил все.

Andry_JS 06.03.2015 00:36
В любом случае, спасибо за помощь. :)

Andry_JS 06.03.2015 00:39
рони,
У меня получилось!! :) Рони, спасибо огромное ))) Надо было просто поменять id на класс! всё просто :)

рони 06.03.2015 00:42
Andry_JS,
замените на класс

Цитата:
Сообщение от рони
id на странице не должно повторятся

danik.js 06.03.2015 06:46
Andry_JS, покажи результат. Вообще, ты чета загоняешь. Видимо ты хреновенько знаешь css и не понимаешь как это сделать без js.
Высоту можно унаследовать в 100%, центрирование делается иным способом. Так:

<!DOCTYPE html>
<style>
html, body{height: 100%;margin: 0;padding: 0}
#wrapper{
  width: 100px;
  height: 50px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
}
</style>
<body>
<div id="wrapper">Hello World</div>
</body>


Или так:

<!DOCTYPE html>
<style>
html, body{height: 100%;margin: 0;padding: 0}
html{display: table}
body{display: table-cell;vertical-align:middle;}
#wrapper{
  width: 100px;
  height: 50px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
}
</style>
<body>
<div id="wrapper">Hello World</div>
</body>

danik.js 06.03.2015 06:53
Andry_JS, насчет преимущества решения на js: вот я перешел по твоей ссылке и увидел это:

Скролла нет, внизу торчит кусок зеленого блока с куском текста.
Я пользуюсь noscript. Пользуюсь давно, однако твой сайт - один из немногих, на которых ломается верстка если отключить скрипты :D . В общем - ты лучший! :haha:


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