Skrollr: манипулировать атрибутами данных html5

Question

Skrollr: манипулировать атрибутами данных html5

0

Я написал функцию Javascript/jQuery для динамической записи атрибутов данных HTML5 в некоторые теги HTML и создания плагина Skrollr. Я не могу использовать jQuery.data(), потому что он хранит (он не пишет внутри тегов) атрибуты. Вот мой код:

parallaxData();
window.addEventListener('resize', parallaxData);

function parallaxData(){

    if ($(window).width() > 768 && imgContainer.length) { 

        var imgContainerJS = document.getElementById('big-image'),
            captionJS = document.getElementById('caption'),
            headerJS = document.getElementById('header');        

        imgContainerJS.dataset.top = 'transform:translateY(0px);'
        imgContainerJS.dataset.topBottom = 'transform:translateY(' + '-' + imgHeight/4 + 'px);' 
        captionJS.dataset.anchorTarget = "#big-image-wrap"
        captionJS.dataset.top = 'transform:translateY(0px);' 
        captionJS.dataset.topBottom = 'transform:translateY(' + '-' + imgHeight/8 + 'px);'
        headerJS.dataset.anchorTarget = "#big-image-wrap"
        headerJS.dataset.top = 'transform:translateY(0px);' 
        headerJS.dataset.topBottom = 'transform:translateY(' + '-' + imgHeight/4 + 'px);' 

        var animDone = false;
        skrollr.init({
            forceHeight: false,
            smoothScrolling: false,     
            render: function() {
                if ( header.hasClass('skrollable-after') ) {
                    if ( ! animDone ) {
                        animDone = true;
                        header.addClass('fixed-header').css({
                            'display' : 'none'
                        }).fadeIn(300);   
                    }
                } else {
                    animDone = false;
                    header.removeClass('fixed-header');
                }
            }           
            }).refresh();

        imgCaption.css({ position: 'fixed' });
        singleImg.css({ position: 'fixed' });

    } else if ($(window).width() > 768) {

        $('#content').css({ marginTop: headerHeight + 'px' });
        imgCaption.css({ position: 'fixed' });
        singleImg.css({ position: 'fixed' });

    } else {

        skrollr.init().destroy();
        $('#content').css({ marginTop: 0 + 'px' });

        var parallaxEls = $('header, #big-image, #caption'),
            attrs = parallaxEls[0].attributes,
            name,
            index;
        for (index = attrs.length - 1; index >= 0; --index) {
            name = attrs[index].nodeName;
            if (name.substring(0, 5) === "data-") {
                parallaxEls.removeAttr(name);
            }
        }   

        parallaxEls.css({
            '-webkit-transform' : '',
            '-moz-transform' : '',
            'transform' : '',
            'backgroundPosition' : ''
        }).removeClass('skrollable-after');

        imgCaption.css({ position: 'absolute' });
        singleImg.css({ position: 'absolute' });

    }

}

Мне интересно, есть ли шанс достичь того же результата только с помощью jQuery, также потому, что мне нужно выбирать элементы по классам, а не по ID.

user1861373 16 дек. 2013, в 13:22

Источник

Теги:

javascript

jquery

html5

skrollr

1 ответ

Ещё вопросы

RedNails · Answer 1 · 2014-02-05T10-19-00.000Z

Я попробовал это с помощью jQuery. Можно добавить атрибуты в img или div или что угодно.

http://api.jquery.com/attr/#attr-attributeName-value

$(document).ready(function(){
    $(".yourclass").attr({
         "data-450": "exampleCSS:examplechange;",
         "data-500": "exampleCSS:examplechange;"});
});

Я попробовал это с одним из моего div из моего кода, и элемент не виден, но атрибуты добавлены, я вижу это в firebug

Остальные divs все еще прокручиваются, поэтому я перепутал их где-то в другом месте.

Надеюсь, это помогло вам (даже когда вы спросили несколько месяцев назад). Если вы уже нашли ответ, поделитесь своим решением

Да, в конце концов, я использовал .attr Спасибо в любом случае!