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.– Erlon Charles
If you log in with the instruction on the console:
$('#iframe-game').data('scale');
what is the result?– KaduAmaral
@Erloncharles, I tried that too. It wasn’t.
– Diego Souza
@Kaduamaral, when I do it right on the console, appears
undefined
.– Diego Souza
And these:
$('#iframe-game')
and$('#iframe-game').length
?– KaduAmaral
http://jsfiddle.net/cbvxgmmu/ look at this
– Erlon Charles
The first appears the element, the second appears 0.
– Diego Souza
Can simulate in the Jsfiddle?
– KaduAmaral
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 thediv
. I just can’t get it on the onload, but if I call inside a click function for example, it takes.– Diego Souza
How are you assigning that
data-scale
? Already comes with HTML or you are writing later?– Sergio
I put in Post, @Sergio. I get the value of this parameter by a calculation.
– Diego Souza
Diego that line
$('#iframe-game-box').each(function(){
What am I supposed to do? Ids are unique so theeach()
doesn’t make sense there...– Sergio
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
– SneepS NinjA