jquery - circle based lists within drop and drag - responsive -


i have following drop , drag setup working howver sizing of list icons fixed when browser smaller (tablet / mobile) items not didplaying evenly desktop.

how can go making sizing percentages instead?

the full code online demo on jsfiddle: http://jsfiddle.net/elogicmedia/rkukf/4/

thankyou

js

    circle_radius = 200; $links = $('nav ul.gallery li a'); total_links = $links.size(); $links.each(function(index) {     $(this).attr('data-index',index);     animatecircle($(this), 1); }); $('ul.gallery > li a').hover(function() {     animatecircle($(this), 1.1); }, function() {     animatecircle($(this), 1);  });  function animatecircle($link, expansion_scale) {     index = $link.attr('data-index');     radians = 2*math.pi*(index/total_links);     x = -(math.sin(radians)*circle_radius*expansion_scale);     y = -(math.cos(radians)*circle_radius*expansion_scale);     $link.animate({         top: x+'px',         left: y+'px'     }, 200); } 

css

a { position: absolute; text-decoration: none; width:98px; height:98px; border-radius:50%; line-height:1.5em; text-align:center; font-family: helvetica, arial; background-color: #c0d9d9; 

}


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -