Databases
StackOverflow2013
Postsdbo
PORetrieving width() and height()information from <img> loaded through html()
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORetrieving width() and height()information from <img> loaded through html()
    primarykey
    data
    text
    <p>My problem is the following: I developed a script that allows an user to zoom over an image displayed on the current page. On click, it loads through <code>$('div#imageBox').html()</code> a <code>&lt;div&gt;</code> and an <code>&lt;img&gt;</code>. On the following, I'm retrieving pieces of information such as the <code>width</code> and the <code>height</code> of the loaded image.</p> <p>Sometimes it works, sometimes it doesn't. I know there is a DOM-loading issue but the weird thing is that I can't figure out why sometimes it works and it doesn't. It loads a <code>&lt;div&gt;</code> of <code>0x19px</code> size because of an <code>&lt;img&gt;</code> of <code>0x0</code>.</p> <p>Here is my jQuery code :</p> <pre><code>function imageBox(src, legende) { $('DIV#imageBox').empty().fadeIn().html('&lt;div&gt;&lt;a href="'+src+'" target="_blank"&gt;&lt;img src="'+src+'" /&gt;&lt;/a&gt;&lt;/div&gt;'); var marginLeft = $('DIV#imageBox DIV').width() / 2; var marginTop = $('DIV#imageBox DIV').height() / 2; var hauteur = $('DIV#imageBox IMG').height(); var largeur = $('DIV#imageBox IMG').width(); var bottom = $('DIV#imageBox SPAN').height(); //alert(marginLeft+'/'+marginTop+'/'+hauteur+'/'+largeur+'/'+bottom); if(legende) $('DIV#imageBox').find('DIV').append('&lt;span&gt;'+legende+'&lt;/span&gt;'); if(largeur &gt; $(window).width()) largeur = $(window).width() * 0.8; if(hauteur &gt; $(window).height()) hauteur = $(window).height() * 0.8; // Récupération des nouvelles valeurs au cas où l'image soit redimensionné car trop grande $('DIV#imageBox IMG').hide().height(hauteur); largeur = $('DIV#imageBox IMG').width(); marginTop = hauteur / 2; marginLeft = largeur / 2; if(!$('DIV#imageBox IMG').is(':animated')) { $('DIV#imageBox IMG').show().height(0).animate({'height': hauteur}, 300); $('DIV#imageBox SPAN').width(0).animate({'width': largeur-10}, 300); } $('DIV#imageBox DIV').css({ 'top': '50%', 'left': '50%', 'marginTop': '-'+(marginTop)+'px', 'marginLeft': '-'+(marginLeft)+'px' }); $('DIV#imageBox SPAN').css('bottom', '-'+bottom+'px'); $('DIV#imageBox SPAN:before').css('top', hauteur); } </code></pre> <p>Should you have any questions, don't hesitate. I might not have been as clear as I hoped.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USD4V1D
    1. USD4V1D
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORetrieving width() and height()information from <img> loaded through html()
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PORetrieving width() and height()information from <img> loaded through html()
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIs that code inside `$(document).ready(function(){` ?
      singulars
      1. PORetrieving width() and height()information from <img> loaded through html()
      1. USAlvaro
    2. CONo. Because the problem is having this function to load an image which is not completly loaded before retrieving info. And besides, I find it weird to put a function into `$(document).ready(function() {` but I might be wrong.
      singulars
      1. PORetrieving width() and height()information from <img> loaded through html()
      1. USD4V1D
    3. COAre you calling that function from inside `$(document).ready`?
      singulars
      1. PORetrieving width() and height()information from <img> loaded through html()
      1. USAlvaro
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload