Jquery Ordering img position

Question

I am trying to order my images on page like an hexagon.I found solution for this on java and now I am trying to implement it on Jquery. Firstly I crated my photo list div element

<div class="photoList">
<?php $categories = find_category();

 foreach($categories as $category): ?>
<div id="userList"> 
 <img id="<?Php echo $category['cat_id']; ?>" src = <?Php echo $category['cat_image']; ?> />
</div>
 <?php endforeach ;?>
</div>

It gets all element source from database and show them on page top to bottom .

Then I used Jquery for changing each element position on page

$(document).ready(function(){

 var cx = $(window).height()/2;
 var cy=$(window).width()/2;
 var  $userList= $('.userList img').size();

 var polyXX = new Array("30","25","0" ,"-25","-30","-25","0","25");
 var polyYY = new Array("0","22","30" ,"22","0","-22","-30","-22");
 var count =5;

   for ( var i = 1; i < $userList; ++i ) {
 drawHexes(cx,cy); 
   }
 function drawHexes(cx,cy){ 
 count = Math.min ( 20, Math.min ( cx, cy )/20  );


        for ( var rank = 1; rank < count; ++rank ) {

            for ( var bar = 0; bar < 8; ++bar ) {
                var x = ( polyXX [ ( bar + 6 ) % 8 ] + polyXX[ ( bar + 7 ) % 8 ] ) * rank;
                var y= ( polyYY [ ( bar +6 ) % 8 ] + polyYY [ ( bar + 7 ) % 8 ] ) * rank;

                var dx =polyXX [ bar ] + polyXX [ ( bar + 1 ) %8 ];
                var dy = polyYY [ bar ] + polyYY [ ( bar + 1 ) %8 ];


              for ( var hex = 0; hex < rank; ++hex ) {
 $('.userList img').css({'left':(cx+x)+'px' ,'top':(cy+y)+'px'} );

                    x += dx;
                    y += dy;

                }
            }    
  }   
 } 

});

But this is not doing any effect.All photos are the same position. They must be like an hexagon. I thing I have problem with this line $('.userList img').css({'left':(cx+x)+'px' ,'top':(cy+y)+'px'} );

And here post for creating hexagon in Java. http://stackoverflow.com/questions/3687176/creating-10-000-connected-hexagon-page

*EDIT *

I made console.bug and as result cx=298 cy=403.3 x=25 y=NaN dx=3025 dy=022

Answer 1

Did you apply position: absolute to your images? And by the way, you missed the quotes for the src-attribute in this line (corrected version):

<img id="<?php echo $category['cat_id']; ?>" src="<?php echo $category['cat_image']; ?>" />

Answer 2

Are you testing the values of (cx+x)+'px' and (cy+y)+'px'?

You are entering a typecasting minefield with these statements.

Check out an example: http://jsfiddle.net/ASC5k/

Edit

To ensure you are adding two integers, use parseInt(cx,10). E.g.

cx = parseInt(cx,10);