Добавление атрибутов к 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> Как быть? Помогите, товарищи. |
imhateb,
:write: <!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> |
Блин, спасибо большое! От души! Всё работает.
Если интересно, потом пришлю результат своих трудов. По-любому пришлю ))) Спасибо! |
Я дико извиняюсь, но не могли бы Вы мне ещё подсказать, как заставить работать этот момент при изменении размеров окна.
Почему-то код $(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 остаётся прежним. |
|
Часовой пояс GMT +3, время: 14:45. |