At certain div
I make an area calculation for a responsive site.
<div id="iframe-game" class="help" data-scale="0.8264794383149449">
</div>
By jQuery I try to get the value of the attribute data-scale
like this:
$("#iframe-game").data('scale');
$("#iframe-game").attr('data-scale');
$("#iframe-game").prop('data-scale');
I have tried these three ways. But it does not. And when I enter the Inspect Element, it's there in the% s like% paste up there.
I do this in div
:
$(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 it gets a null value.
How do I set onLoad
:
$('#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);
});
});