Databases
StackOverflow2013
Postsdbo
POVertical aligning and fading out correctly, order of operations in jQuery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POVertical aligning and fading out correctly, order of operations in jQuery?
    text
    copied!<p>So I'm designing my portfolio and learning jQuery along the way. The problem I'm having is with the order of things, to get images to fade, align themselves, and fade back in nicely. If you go to my site: <a href="http://graysonearle.com/newtest/" rel="nofollow">http://graysonearle.com/newtest/</a> and click on the first box "Frog Utopia" it should open up a little gallery. If you click on a thumbnail on the side, it swaps the image and posts a description. The problem is, you have to click on the first one twice to get it to go. In addition to this, if you switch between image sizes (some are long, some are fat) it holds the previous image's properties, so the description doesn't line up. Visit the site if you're willing to help and you'll see what I mean. Here is the relevant code:</p> <pre><code>$(document).ready(function() { // declare photo width variable var photo_width = 0; $('.chImg').click(function() { // get img src and chop it up var srcv = $(this).attr('src'); var sliced = srcv.slice(6); // return the base number of the image for correspdonding div // corresponding div is "d#" var divnum = sliced.substring(0, sliced.length - 4); // fade out active description div $(".activeDescript").each(function() { $(this).removeClass("activeDescript"); $(this).fadeOut(110); }); // change picture $("#chBox").fadeOut(110, function() { $("#chBox").html("&lt;center&gt;&lt;img src='" + sliced + "'/&gt;&lt;/center&gt;"); }); // vertical align $("#chBox").vAlign(); $('#chBox').waitForImages(function() { // wait for images before grabbing img width $("#chBox img").each(function() { photo_width = $(this).width(); $(".description").width(photo_width); $("#d" + divnum).fadeIn(300); // make this descript active $("#d" + divnum).addClass("activeDescript"); }); $("#chBox").fadeIn(200); }); }); });​ </code></pre> <p>and vAlign.js:</p> <pre><code> (function ($) { // VERTICALLY ALIGN FUNCTION $.fn.vAlign = function() { return this.each(function(i){ var ah = $(this).height(); var ph = $(this).parent().height(); var mh = (ph - ah) / 2; $(this).css('margin-top', mh); }); }; })(jQuery); </code></pre>
 

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