StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
11370065
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-07-06T21:46:20.500
FavoriteCount
0
LastActivityDate
2012-07-06T21:51:34.260
LastEditDate
2012-07-06T21:51:34.260
LastEditorUserId
839813
OwnerUserId
839813
ParentId
1659578
PostTypeId
2
Score
1
ViewCount
0
LastEditorDisplayName
text
Body
<p>This method involves a little jquery, but works fantastic in most situations... let me explain:</p> <p>if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..</p> <p>jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...</p> <p>Here is the example:</p> <pre><code>$(window).load(function() { // move all slides to the middle of the slideshow stage var slideshowHeight = 600; //this can dynamic or hard-coded $('.slideImg').each(function(index) { var thisHeight = $(this).innerHeight(); var vertAdj = ((slideshowHeight - thisHeight) / 2); $(this).css('top', vertAdj); }); }); </code></pre> <p>and this is the html it's working on...</p> <pre><code><div class="slideshow" style="position: relative; "> <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0"> <img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "> </div> <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1"> <img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "> </div> <div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2"> <img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "> </div> </div> </code></pre> <p>just make sure </p> <pre><code>.slideImg { position:relative; } </code></pre> <p>I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here: <a href="http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html" rel="nofollow">http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html</a></p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POVertical aligning an absolute positioned div inside a containing div
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USAbbey
UserOwnerUserId
1. USAbbey
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

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.