jquery - Float bottom - top of each other -

-

hi every 1 want ask css - jquery drag , drop -issue. i'm familiar positioning divs bottom of containers (position: relative -> position: absolute; bottom: 0;).

goal: want drag items storage div , drop div , position items bottom top, vertically. building tower (2d) or something. how can float items bottom of new container , top of each others?

thanks - jani

#drop {     height:300px;     background:#edcce9; } #drag {     margin-top:10px;     height:50px;     background:#b8d8e3; } #drag img {     display: inline-block;     margin-right:10px; } .temp {     display: block; } 
$('.item').draggable({     containment: 'document',     revert: true,     helper: 'clone',     start: function () {         contents = $(this).html();         currentvalue = $(this).attr('value');     } }); $('#drop').droppable({     hoverclass: 'border',     accept: '.item',     drop: function (event, ui) {         $(this).append($(ui.draggable).clone());         $('#drop .item').addclass('temp');         $('.temp').removeclass('ui.draggable item');         $(".temp").draggable({             containment: 'document',             revert: true         });     } }); $('#drag').droppable({     hoverclass: 'border',     accept: '.temp',     drop: function (event, ui) {         $(ui.draggable).remove();     } }); 
<div id="drop"></div> <div id="drag">     <img src="blocks/a.png" width="50px" height="50px" class="item" />     <img src="blocks/b.png" width="50px" height="50px" class="item" />     <img src="blocks/c.png" width="50px" height="50px" class="item" />     <img src="blocks/d.png" width="50px" height="50px" class="item" />     <img src="blocks/e.png" width="50px" height="50px" class="item" />     <img src="blocks/f.png" width="50px" height="50px" class="item" /> </div>

sadly, there no "float:bottom;" type construction this. have use position:absolute; described.

to want can either rely on jquery apply correct bottom value (you can measuring number of items in container, dividing value height of each item, provided same size in example.)

to count items in stack, can use .length() read here more

or

you can css using :nth-child selector. problem this, is not supported in browsers (by mean ie8 , below) see can use it details.

with method, create list so, specified bottom values increased:

li:nth-child(1) {     bottom:0; } li:nth-child(2) {     bottom:50px; }     li:nth-child(3) {     bottom:100px; } ...

this ad nauseum. issue if know how many items need account , requires lot of css added if have lot of items account for.

if not same size, have use jquery method and, instead of counting number of items in stack, need pull height of them , use calculate proper bottom value


Comments

Post a Comment

Popular posts from this blog

html5 - What is breaking my page when printing? -

-
Image
i have questioner , don't know why when printing it's creating break before first question. live demo (link) i able resolve issue removing fieldset container had wrapped in.. having fieldset element causing of fields grouped together, , since not fit on first page, being pushed second page. removing fieldset element, able firefox print first 2 questions on page 1 identically chrome. it seems not new problem firefox , fieldset not playing nice found old bugzilla ticket 2008 has persisted , still being commented on in 2014 (link) if retaining fieldset important, found solution else came here (link) <script type='text/javascript'> $(window).bind('beforeprint', function(){ $('fieldset').each( function(item) { $(this).replacewith($('<div class="fieldset">' + this.innerhtml + '</div>')); } ) }); $(window).bind(
Read more

c# - must be a non-abstract type with a public parameterless constructor in redis -

-
when save object, got below error must non-abstract type public parameterless constructor in order use parameter 't' in generic type or method 'servicestack.redis.redisclient.store<t>(t) redisclass.getinstnace().store(msg); // error here redisclass.getinstnace().save(); as third party's class, can not edit how save object? could create wrapper around third party object call constructor, store wrapper? e.g. public class mywrapper { public thirdpartyobject thirdpartyinstance { get; set; } public mywrapper() { thirdpartyinstance = new thirdpartyobject("constructors"); } }
Read more

ajax - PHP/JSON Login script (Twitter style) not setting sessions -

-
i'm having trouble getting twitter style login work properly, reason gets stuck at session_register("useremail"); session_register("userpass"); and doesn't redirect after it. if enter wrong account data, works , appropriate error message pops up. this full code: <?php if(empty($_post['email']) || empty($_post['password'])) { die(msg(0,"all fields required")); } if(!(preg_match("/^[\.a-z0-9_\-\+]+[@][a-z0-9_\-]+([.][a-z0-9_\-]+)+[a-z]{1,4}$/", $_post['email']))) die(msg(0,"you haven't provided valid e-mail")); $host="localhost"; $username="root"; $password="x"; $db_name="x"; $tbl_name="x"; mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select db"); $useremail=$_post['email']; $userpass=
Read more