Get Date Attribute in DIV

Asked

Viewed 1,342 times

1

In certain div I do an area calculation for a responsive website.

<div id="iframe-game" class="help" data-scale="0.8264794383149449">
</div>

By jQuery I try to get the value of the attribute data-scale thus:

$("#iframe-game").data('scale');
$("#iframe-game").attr('data-scale');
$("#iframe-game").prop('data-scale');

I’ve tried these three ways. But it won’t. And when I walk into the Inspect Element, it’s there in the div like I did up there.

I do it in the onLoad:

$(window).load(function(){
    setTimeout(function(){
       var percent = $('div#iframe-game').attr('data-scale');
    },1);
});

I use version 1.11 of jQuery.

What I believe is happening is that the value has not been set yet and onload is being faster to load... and so ends up getting a null value.

As I stand the data-scale:

$('#iframe-game-box').each(function(){

    var iframe = $(this);
    $(window).on('load resize',setViewport);

    function setViewport(){

            var iframeGame = iframe.contents().find("#iframe-game");
            var iframeHeight = iframe.contents().find('body')[0].scrollHeight;
            var iframeWidth = iframeGame.width();
            var windowHeight = $(window).height();
            var windowWidth = $(window).width();

            //Verifica se vai adicionar um valor ao gap
            var heightGap = 0;
            if(iframeHeight > windowHeight){
                heightGap = 70;
            }

            //Verifica se fará a nova escola de acordo com a altura ou largunra
            if(windowWidth > windowHeight){
                var newScale = ((windowHeight - heightGap) * 100 / iframeHeight) / 100;
            }else if(windowHeight > windowWidth){
                var newScale = (windowWidth * 100 / iframeWidth) / 100;
            }

            if(newScale > 1){ newScale = 1; }

            iframeGame.css({
                '-webkit-transform' : 'scale(' + newScale + ')',
                '-moz-transform'    : 'scale(' + newScale + ')',
                '-ms-transform'     : 'scale(' + newScale + ')',
                '-o-transform'      : 'scale(' + newScale + ')',
                'transform'         : 'scale(' + newScale + ')'
            }).attr('data-scale', newScale);
    });
});
  • You really need it to be on $(window).load() ? can happen the window is loaded and the element doesn’t even exist yet, so I think you should use $(document).ready(), so all html will be ready when the function is called.

  • If you log in with the instruction on the console: $('#iframe-game').data('scale'); what is the result?

  • @Erloncharles, I tried that too. It wasn’t.

  • @Kaduamaral, when I do it right on the console, appears undefined.

  • And these: $('#iframe-game') and $('#iframe-game').length?

  • http://jsfiddle.net/cbvxgmmu/ look at this

  • The first appears the element, the second appears 0.

  • Can simulate in the Jsfiddle?

  • I can’t because this whole stop is inside an iframe. And the calculation of div is done in another JS that is outside the iframe. But so, it’s working. Why the value is set in the div. I just can’t get it on the onload, but if I call inside a click function for example, it takes.

  • How are you assigning that data-scale? Already comes with HTML or you are writing later?

  • I put in Post, @Sergio. I get the value of this parameter by a calculation.

  • 1

    Diego that line $('#iframe-game-box').each(function(){ What am I supposed to do? Ids are unique so the each() doesn’t make sense there...

  • If you post your entire code, complete with iframe and all the javascript, I might be able to better understand why it’s not picking up the onload event, it’s probably just the problem of loading before the value reaches the element, but only seeing the entire code p/ run tests

Show 8 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.