Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.03.2014, 03:04
Интересующийся
Отправить личное сообщение для imhateb Посмотреть профиль Найти все сообщения от imhateb
 
Регистрация: 16.09.2013
Сообщений: 28

Добавление атрибутов к DIV
Доброго времени суток.
Помогите пожалуйста справиться с задачей, уже второй день не сплю.

Я хотел бы использовать на сайте этот плагин - http://prinzhorn.github.io/skrollr/, добавляющий эффекты при прокрутке страницы. Эффекты добавляются путём приписывания блоку специальных атрибутов типа:
data-0="width:0%;background:hsl(200, 100%, 50%);" 
data-950="width:100%;background:hsl(920, 100%, 50%);"

где 0 и 950 - количество "прокручиваемых" пикселей (window.pageYOffset).

Так вот, как бы мне генерировать эти атрибуты при загрузки страницы (или при изменении размеров окна)?
Я хотел бы, чтобы второй атрибут data был равен data-*высота окна*.

Пробовал просто присваивать атрибуты через .attr()
$('.left').attr('data-0', 'width:0%;background:hsl(200, 100%, 50%)');
$('.left').attr('data-'+950, 'width:100%;background:hsl(920, 100%, 50%)');

Планировал потом вместо "950" вставить переменную. Но почему-то плагин работать отказался.

Он работает только если в div'е сразу прописывать эти атрибуты...
<div class="left" data-0="width:0%;background:hsl(200, 100%, 50%);" data-950="width:100%;background:hsl(920, 100%, 50%);"></div>


Как быть? Помогите, товарищи.
Ответить с цитированием
  #2 (permalink)  
Старый 16.03.2014, 09:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,061

imhateb,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <link href="http://prinzhorn.github.io/skrollr/examples/fixed-positioning.css" rel="stylesheet" type="text/css" />
	<link href="http://prinzhorn.github.io/skrollr/examples/main.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .left {
      height: 100px;
      width:0%;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
	<!--[if lt IE 9]>
	<script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.ie.min.js"></script>
	<![endif]-->
    <script>
     $(function(){
 var h = $(window).height(), obj = {'data-0':'width:0%;background:hsl(200, 100%, 50%)'};
 obj['data-'+h] = 'width:100%;background:hsl(920, 100%, 50%)'
 $('.left').attr(obj);
  var s = skrollr.init({

	});
      })
    </script>

</head>

<body>
    <div class="left" ></div>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 16.03.2014, 13:07
Интересующийся
Отправить личное сообщение для imhateb Посмотреть профиль Найти все сообщения от imhateb
 
Регистрация: 16.09.2013
Сообщений: 28

Блин, спасибо большое! От души! Всё работает.
Если интересно, потом пришлю результат своих трудов.
По-любому пришлю )))
Спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 16.03.2014, 16:05
Интересующийся
Отправить личное сообщение для imhateb Посмотреть профиль Найти все сообщения от imhateb
 
Регистрация: 16.09.2013
Сообщений: 28

Я дико извиняюсь, но не могли бы Вы мне ещё подсказать, как заставить работать этот момент при изменении размеров окна.
Почему-то код
$(window).resize(function() {
 var h = $(window).height(), obj = {'data-0':'width:0%;background:hsl(200, 100%, 50%)'};
 obj['data-'+h] = 'width:100%;background:hsl(920, 100%, 50%)'
 $('.left').attr(obj);
  var s = skrollr.init({

	});
      })

не хочет работать.

Вернее он работает, но параметр data-+h остаётся прежним.

Последний раз редактировалось imhateb, 16.03.2014 в 16:08.
Ответить с цитированием
  #5 (permalink)  
Старый 16.03.2014, 16:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,061

imhateb,
http://learn.javascript.ru/play/14yHKb
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Cookie для меню аккордион и для div Lastedl jQuery 1 03.12.2013 02:55
Javascript добавление div элемента 203 Элементы интерфейса 1 21.04.2013 15:04
Проблемы с div обновлённым через (#id).load erlcat jQuery 4 03.03.2013 01:41
Передача атрибутов дочерним div lokifc Events/DOM/Window 2 15.10.2012 23:52
проблема с div И animate g00000dman jQuery 2 24.03.2011 22:34