Databases
StackOverflow2013
Postsdbo
POjquery append html show hide in IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery append html show hide in IE
    text
    copied!<p>I need help with displaying images from a MySQL database. What I have is a an Dynamic PHP/HTML table that has multiple pages with a pagination link. The table layout is: Book Title, Author, Publisher, Category and image. I can connect to database with connection script - working OK. I can see all the information for the table at the correct column and row per above locations including the images. At this point I hover over the link below the thumbnail image and use jQuery to pop up a larger view of the thumbnail, this works in all<br> browsers except for Internet Explorer.</p> <p>First I connect to Database with a connection script.<br> This is the code I use to query database: </p> <pre><code>while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $bg = ($bg=='#ffffff' ? '#FCFCFC' : '#ffffff'); // Switch the background color. echo '&lt;tr bgcolor="' . $bg . '"&gt; &lt;td id="books"&gt;' . '&lt;h4&gt;'. $row['booktitle'] .'&lt;/h4&gt;'. '&lt;/td&gt; &lt;td id="auth"&gt;' . $row['author'] . '&lt;/td&gt; &lt;td id="publ"&gt;' . $row['publisher'] . '&lt;/td&gt; &lt;td id="cat"&gt;' . $row['category'] . '&lt;/td&gt; &lt;!--&lt;td id="isbn"&gt;' . $row['isbn'] . '&lt;/td&gt;--&gt; &lt;td id="img"&gt;'.'&lt;img src="'. $row['image'].'" width="90"/&gt;'.'&lt;div span="getLargeImage"&gt;'.'&lt;a href="'. $row['image'].'" class="popup"&gt;Larger view&lt;/a&gt;'.'&lt;/span&gt;'.'&lt;/td&gt; &lt;/tr&gt;'; </code></pre> <p>here is the jQuery script:</p> <pre><code>$(document).ready(function(){ $('.popup').hover(function(e) { var getId = $(this).attr("id"); var getAttr = $(this).attr("href"); var html = '&lt;div id="full_img"&gt;'; html += '&lt;img src="'+ getAttr +' "/&gt;'; html += '&lt;/div&gt;'; //console.log(getId); //console.log(getAttr); $('body').append(html).children('#full_img').hide().fadeIn(100); $('#full_img').animate({"width" : "0px","width" : "250px"}, 100); $('#full_img').css('top', e.pageY + -330).css('left', e.pageX - 350); }, function() { $('#full_img').animate({"width" : "250px","width" : "0px"}, 100); $('#full_img').fadeOut(10); $('#full_img').remove(); }); }); </code></pre> <p>As I said above the jQuery hover/show larger image works works in all browsers except for Internet Explorer. to see how it is working at this point surf to: </p> <p><a href="http://stevenjsteele.com/database/php/index.php" rel="nofollow">http://stevenjsteele.com/database/php/index.php</a></p> <p>any help would be appreciated. thanks ussteele</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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