Databases
StackOverflow2013
Postsdbo
POJquery element positioning and more
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery element positioning and more
    text
    copied!<p>Hey Guys, I'm normally pretty good with editing but this time I thought I'd try something new with Jquery. I'm trying to create a "3D" card page (Similar to this: <a href="http://activeden.net/item/xml-3d-video-showcase/83740?clickthrough_id=&amp;redirect_back=true&amp;ref=45" rel="nofollow">http://activeden.net/item/xml-3d-video-showcase/83740?clickthrough_id=&amp;redirect_back=true&amp;ref=45</a>) but I can't position the elements and I think my codes all wrong.</p> <p>Here's the JS:</p> <pre><code>$(document).ready(function() { //perform actions when DOM is ready var z = 0; //for setting the initial z-index's var inAnimation = false; //flag for testing if we are in a animation var imgLoaded = 0; //for checking if all images are loaded $('.img').each(function() { z++; $(this).css('z-index', z); imgLoaded++; }); function swapFirstLast(isFirst) { if(inAnimation) return false; //if already swapping pictures just return else inAnimation = true; //set the flag that we process a image var processZindex, direction, newZindex, inDeCrease; //change for previous or next image if(isFirst) { processZindex = z; newZindex = 1; inDeCrease = 1; } else { processZindex = 1; newZindex = z; inDeCrease = -1; } //set variables for "next" and "previous" action $('.img').each(function() { //process each image if($(this).css('z-index') == processZindex) { //if its the image we need to process $(this).animate({ opacity: 0,top: $(this).height() + 'px' }, 'slow', function() { $(this).css('z-index', newZindex) //set new z-index .animate({top : '0' }, 'slow', function() { inAnimation = false; //reset the flag $(this).animate({ opacity: 1 }, 500); }); }); } else { //not the image we need to process, only in/de-crease z-index $(this).animate({top : '0' }, 'slow', function() { //make sure to wait swapping the z-index whe $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one }); } }); return false; //don't follow the clicked link } $('#next a').click(function() { return swapFirstLast(true); //swap first image to last position }); $('#prev a').click(function() { return swapFirstLast(false); //swap last image to first position }); }); </code></pre> <p>And here's the HTML:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; ul { list-style: none; margin: 200px;} #pictures { position: relative; height: 408px;} .img { position: absolute; top: 10; left: 0; padding: 10px; background: #eee; border: 1px solid #fff; -webkit-transform: translate(0px, 0px) skew(0deg, 5deg); } .desc { max-height: 30px; text-align: center; padding: 10px 10px 0 10px; } li { border: 5px solid #c4c8cc; -moz-box-shadow: 3px 3px 10px #888; -webkit-box-shadow: 3px 3px 10px #888; padding: 200px; } &lt;/style&gt; &lt;/head&gt; &lt;/html&gt; &lt;div id="gallery"&gt; &lt;ul id="pictures"&gt; &lt;li class="img"&gt; &lt;div class="desc"&gt;Hello World&lt;/div&gt; &lt;/li&gt; &lt;li class="img"&gt; &lt;div class="desc"&gt;Hello World&lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Sorry for the mess, but I'm in a hurry to get this done - all help is much appreciated :D</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