attr change on resize does not update

Question

I want to change data-width attr depends on (window).width();

piece of code

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"
        });
    }

Rest in example

When u will change window width to for example 400 and "F5" reload it works but it doesnt change on real time resize.

Thank you for help:)

How are you accessing that attribute to know it isn't working? — cfs, Aug 15 '13 at 13:49
you must find some event that get's triggered when a window is resized, and bind your code to it. It won't do the magic automatically. — MightyPork, Aug 15 '13 at 13:49
it will never work, cause thats an attribute recognized by FB, not real width... you have to change it with css, bye. — Sebastian Uriel Murawczik, Aug 15 '13 at 13:51
@cfs accesing this attribute is working cuz like i describe when u refresh example it change attr data -width but it doesnt work on resize. — Szymon, Aug 15 '13 at 13:52
I did by .fb-like-box iframe but it doesnt change real width when u do responsive css with @media. It change only look but not real width and scrollbar shows original dara-width — Szymon, Aug 15 '13 at 13:56
I dont think this will work as you are trying to manipulate content within an iframe which resides on a different server. — lharby, Aug 15 '13 at 13:57
:( http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe#comment2590499_364952 — lharby, Aug 15 '13 at 14:03

score 0 · Answer 1 · answered Aug 15 '13 at 13:53

Try this

   $(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"
            });
        }
});

But this would only change the attribute 'data-width'. To change real width you need to use .width()

Try this:

$(".fb-like-box").width(440);

looks like I got what you are trying to ask, hold on, I will make a change — Alex, Aug 15 '13 at 13:59

score 0 · Answer 2 · answered Aug 15 '13 at 14:01

0

Usually in jQuery HTML data attributes are accessed like this:

$(".fb-like-box").data("width", "700px");

answered Aug 15 '13 at 14:01

ced-b

3,957
1
27
39

attr change on resize does not update

2 Answers2