изменение атрибута при изменении размера не обновляется

Я хочу изменить атрибут ширины данных, зависящий от (window).width();

вот пример пример Codepen

кусок кода

if ((screen_wd >= 0 ) && (screen_wd <= 460)) {
        $(".fb-like-box").attr({
            "data-width": "440px"
        });

    }
    else if((screen_wd > 460 ) && (screen_wd <= 720)){

        $(".fb-like-box").attr({
            "data-width": "700px"
        });
    } 
    else{

        $(".fb-like-box").attr({
            "data-width": "980px"
        });
    }

Остальное в примере

Когда вы измените ширину окна, например, на 400 и перезагрузите «F5», это сработает, но не изменится при изменении размера в реальном времени.

Спасибо за помощь :)


javascript jquery resize attr
person Szymon    schedule 15.08.2013    source источник
comment
Как вы получаете доступ к этому атрибуту, чтобы узнать, что он не работает?   -  person cfs    schedule 15.08.2013
comment
вы должны найти какое-то событие, которое запускается при изменении размера окна, и привязать к нему свой код. Это не будет творить магию автоматически.   -  person MightyPork    schedule 15.08.2013
comment
это никогда не сработает, потому что это атрибут, распознаваемый FB, а не реальная ширина... вам нужно изменить его с помощью css, пока.   -  person Sebastian Uriel Murawczik    schedule 15.08.2013
comment
Доступ @cfs к этому атрибуту работает, потому что, как я описываю, когда вы обновляете пример, он меняет ширину данных атрибута, но не работает при изменении размера.   -  person Szymon    schedule 15.08.2013
comment
Я сделал это с помощью .fb-like-box iframe, но он не меняет реальную ширину, когда вы делаете адаптивный css с @media. Он меняет только внешний вид, но не реальную ширину, а полоса прокрутки показывает исходную ширину dara.   -  person Szymon    schedule 15.08.2013
comment
Я не думаю, что это сработает, поскольку вы пытаетесь манипулировать содержимым в iframe, который находится на другом сервере.   -  person lharby    schedule 15.08.2013
comment
Я думал о том же, но надеюсь на какой-нибудь гениальный мозг :)   -  person Szymon    schedule 15.08.2013
comment
:( stackoverflow .com/questions/364952/   -  person lharby    schedule 15.08.2013

Ответы (2)


arrow_upward
0
arrow_downward

Попробуй это

   $(window).resize(function(){
    var screen_wd = $(window).width();
    if ((screen_wd >= 0 ) && (screen_wd <= 460)) {
            $(".fb-like-box").attr({
                "data-width": "440px"
            });

        }
        else if((screen_wd > 460 ) && (screen_wd <= 720)){

            $(".fb-like-box").attr({
                "data-width": "700px"
            });
        } 
        else{

            $(".fb-like-box").attr({
                "data-width": "980px"
            });
        }
});

Но это изменит только атрибут «ширина данных». Чтобы изменить реальную ширину, вам нужно использовать .width()

Попробуй это:

$(".fb-like-box").width(440);
person Alex    schedule 15.08.2013
comment
похоже, я понял, о чем вы пытаетесь спросить, подождите, я внесу изменения - person Alex; 15.08.2013

arrow_upward
0
arrow_downward

Обычно в jQuery HTML-атрибуты данных доступны следующим образом:

$(".fb-like-box").data("width", "700px");
person ced-b    schedule 15.08.2013