javascript - jquery css how to retain position if you remove margin -

-

i poked around , couldn't find question in particular, if missed please kindly point me in right direction.

purpose: i'm in process of creating statistics reporting system our website. when first access it, has dashboard type of layout overall statistics, , graphs go along it. wanted make each individual set of stats/graphs can moved around page see fit, though starts out in center unless move it. i'm using jquery , jquery ui purpose.

problem: initial view, i'm using margin: 0 auto center divs on page. first problem had when go drag it, couldn't drag left because of margin that's set on it. used draggable event property start: remove margin property div. fixed problem not being able move around expect, when first begin drag it, removal of margin forces div jump left side of screen , have click again.

is there way prevent "jump" , force div retain current position while margin property being removed? going of in wrong way? appreciated, if tell me not go way , figure else out yourself.

thanks in advance!

jquery:

<script>     $(document).ready(function () {         $.post("getstats.php", function (data) {             var ctx = document.getelementbyid("mychart").getcontext("2d");             var mynewchart = new chart(ctx).pie(data);          }, 'json');          var contpos = $("#statoverallcont").position();         $("#statoverallcont").draggable({             snap: ".snaptarget",             snapmode: "both",             containment: "body",             drag: function () {                 $("#statoverallcont").css("margin", "");                 $("#statoverallcont").css("left", contpos.left);                 $("#statoverallcont").css("top", contpos.top);             }         });     }); </script>

^i tried grab original position, , attempt change position after margin removed. didn't seem @ all.

the div w/ style:

<div id="statoverallcont" style="background-color: #dbdbdb; position: relative; display: table; margin: 0 auto; text-align: center; clear:both; padding: 10px;border: 2px solid black" >

jsfiddle demo

the drag function provides parameters it's callback. event , ui. ui has property called ui.position contains left , top. when drag strats, remove margins, make position of element absolute , set position values taken parameters!

looks this

drag: function (event,ui) {      $("#statoverallcont").css("position", "absolute");      $("#statoverallcont").css("left", ui.position.left);      $("#statoverallcont").css("top", ui.position.top); }

this should stick element mouse when dragged.

update :

you need update css removing margin:0px auto; , using left property of css set 50% horizontally centered. allow drag element without making jump. btw idea grasped fata1err0r win win situation. :d


Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more