zac1987 Posted March 11, 2011 Share Posted March 11, 2011 I use mysql to retrieve data from database and use php to display the data onto website directly by the following codes : $query2 = "SELECT message FROM messages WHERE username='{$username1}'"; $result2 = mysql_query($query2,$connection) or die (mysql_error()); confirm_query($result2); while($userinfo = mysql_fetch_array($result2)){ echo "<div class=\"messagepiece\">" . $userinfo['message'] . "</div><br>"; } I want the div(s) arrange style like on the picture http://2aek.com/inventory/divs.jpg display the 1st 4 divs onto 1st column, jump to 2nd column to display another 4 divs.... Below are the codes of how the divs arrangement : <div class="test1" style="left:0px; top:0px;"> asdawdaw </div> <div class="test1" style="left:0px; top:70px;"> asdawdaw </div> <div class="test1" style="left:0px; top:140px;"> asdawdaw </div> <div class="test1" style="left:0px; top:210px;"> asdawdaw </div> <div class="test1" style="left:200px; top:35px;"> asdawdaw </div> <div class="test1" style="left:200px; top:105px;"> asdawdaw </div> <div class="test1" style="left:200px; top:175px;"> asdawdaw </div> <div class="test1" style="left:200px; top:245px;"> asdawdaw </div> <div class="test1" style="left:400px; top:0px;"> asdawdaw </div> <div class="test1" style="left:400px; top:70px;"> asdawdaw </div> <div class="test1" style="left:400px; top:140px;"> asdawdaw </div> <div class="test1" style="left:400px; top:210px;"> asdawdaw </div> So the looping styles should be something like : loop left 0 for four times > 200 for four times > 400 for four times. loop top 0 > 70 > 140 > 210 then 35 > 105 > 175 > 245 then again 0 > 70 > 140 > 210. Seriously I don't know how to write the algorithm of looping. I guess the looping algorithm for left should be something like : i = 0 ; i=>4 ; i++{ k=0; k=>20000; k+200{} } But it is so wrong, it will stop at 4th loop and each loop will be 0, 200, 400, 800. That's not what I want. Seriously I can't figure out the algorithm, my brain is stupid, so can you guys guide me please? [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
AbraCadaver Posted March 11, 2011 Share Posted March 11, 2011 I'm no hero with CSS, especially positioning, but this seems to work: $top = 0; $left = 0; while($userinfo = mysql_fetch_array($result2)){ echo "<div style=\"left:{$left}px; top:{$top}px; position:absolute;\">{$userinfo['message']}</div>\n"; switch($left) { case 0: $left = 400; break; case 200: $left = 0; $top +=35; break; case 400: $left = 200; $top +=35; break; } } Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 12, 2011 Author Share Posted March 12, 2011 I'm no hero with CSS, especially positioning, but this seems to work: $top = 0; $left = 0; while($userinfo = mysql_fetch_array($result2)){ echo "<div style=\"left:{$left}px; top:{$top}px; position:absolute;\">{$userinfo['message']}</div>\n"; switch($left) { case 0: $left = 400; break; case 200: $left = 0; $top +=35; break; case 400: $left = 200; $top +=35; break; } } I did test your switch case codes, it is not working. Sad. Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 12, 2011 Author Share Posted March 12, 2011 Oh, sorry, I forget to put position:absolute just now. Your switch case codes are working now!! Thank you so much. Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 12, 2011 Author Share Posted March 12, 2011 Please see the picture for reference I want to display all the divs as the picture (below section of picture). Here is my current codes : $top = 30; $left = 10; switch($top) { case $top < 100: for ($i=1; $i<=4; $i++) { $left = 10; $top += 30; break; } case $top > 100: for ($i=1; $i<=4; $i++) { $left = 200; $top += 60; break; } case $top > 600: for ($i=1; $i<=4; $i++) { $left = 600; $top += 60; break; } } The result of code display the 1st div = $left = 10; $top = 30; . And all the rest of divs are having the same $left = 600; but different $top = 180; $top = 300; $top = 420; $top = 540; $top = 660; I don't know what's wrong with it. Can you give me some guide? Thank you. Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 12, 2011 Author Share Posted March 12, 2011 ok, i know the problem already, i cannot use for loop because it will loop the top value +60 for 3 times = +180, then pass the +180 to the mysql while loop. Quote Link to comment Share on other sites More sharing options...
sasa Posted March 12, 2011 Share Posted March 12, 2011 try <?php $left = 0; $top = 0; $num = mysql_num_rows($result2); $len1 = ceil($num/3); $len2 = $len1 + floor($num/3); while($userinfo = mysql_fetch_array($result2)){ if($count==$len1){$top=30; $left=100;} if($count==$len2){$top=0; $left=200;} echo "<div style=\"left:{$left}px; top:{$top}px; position:absolute;\">{$userinfo['message']}</div>\n"; $top +=60; $count++; } ?> Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 12, 2011 Author Share Posted March 12, 2011 try <?php $left = 0; $top = 0; $num = mysql_num_rows($result2); $len1 = ceil($num/3); $len2 = $len1 + floor($num/3); while($userinfo = mysql_fetch_array($result2)){ if($count==$len1){$top=30; $left=100;} if($count==$len2){$top=0; $left=200;} echo "<div style=\"left:{$left}px; top:{$top}px; position:absolute;\">{$userinfo['message']}</div>\n"; $top +=60; $count++; } ?> WOW. It is so hard to understand your code algorithm. Let's say $num=9, $len1=3, $len2=6. You didn't assign a value for $count, so $count=0, how can $count equal to $len1 or $len2? I have tested your code, it works for displaying the divs for 2 column, how if I want 50 column? Quote Link to comment Share on other sites More sharing options...
sasa Posted March 12, 2011 Share Posted March 12, 2011 all div in 1st column have same left property and each next top is 2 row biger i just calculate numberd of data in 1st column ($len1) when 1st column is full go to 2nd column all div in 2nd column have same left property and each next top is 2 row biger i calculate number of data in 2nd column and add to $len1 ($len2) when fierst two columns is full go to 3rd.. Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 12, 2011 Author Share Posted March 12, 2011 all div in 1st column have same left property and each next top is 2 row biger i just calculate numberd of data in 1st column ($len1) when 1st column is full go to 2nd column all div in 2nd column have same left property and each next top is 2 row biger i calculate number of data in 2nd column and add to $len1 ($len2) when fierst two columns is full go to 3rd.. How you do the "when 1st column is full go to 2nd column" ? How you know when the 1st column is full? I have 16 rows of records on database. When I use your codes, first 5 records are not displayed. It starts display the result from 6th record. I echo out the value of count, len1 and len2 of every process and the output is : count=1, len1=6, len2=11. count=2, len1=6, len2=11. count=3, len1=6, len2=11. count=4, len1=6, len2=11. .... count=16, len1=6, len2=11. my database has 16 records, so len1=ceil(16/3)=6 len2=6+floor(16/3)=11 if($count==$len1){$top=30; $left=10;} if($count==$len2){$top=80; $left=200;} So it mean if $count==6, then only execute the code. That's why it fail to display the first 5 records on my database. Why you use num/3? but not num/2 or num/5? Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 12, 2011 Author Share Posted March 12, 2011 I used firebug to detect the 1st div, then i just realize the 1st div is at the back of the 5th div, which mean the 5th div is cover on top of 1st div, so I can't see the 1st div, which mean they both divs are at the same left and same top. Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 12, 2011 Author Share Posted March 12, 2011 I just change the value of left : if($count==$len1){$top=80; $left=200;} if($count==$len2){$top=30; $left=400;} Then I saw the 3 columns already!!! Thank you!!! So if I want to add another new column (4th column), I just need to write something like this? $len3 = $len2 + floor($num/3); if($count==$len3){$top=30; $left=600;} It is okay, I go try it now, thanks anyway Thank you guru Sasa. Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 12, 2011 Author Share Posted March 12, 2011 Finally I know why you do num/3, because u though I just want 3 columns. Haha. Actually I want 1000 columns. I have edit your codes to : $len1 = 3; $len2 = 6; $len3 = 9; $len4 = 12; $len5 = 15; while($userinfo = mysql_fetch_array($result2)){ $lastid=$userinfo['id']; if($count==$len1){$top=80; $left=200;} if($count==$len2){$top=30; $left=400;} if($count==$len3){$top=80; $left=600;} if($count==$len4){$top=30; $left=800;} if($count==$len5){$top=80; $left=1000;} It works perfect for me!!! Thanks again for your guidance, I really appreciate it. Thanks. Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 12, 2011 Author Share Posted March 12, 2011 Is it I need to write $len1 until $len1000 manually? $len1 = 3; $len2 = 6; $len3 = 9; $len4 = 12; $len5 = 15; ..... $len1000 = 3000; since all data below are +3, +3, +3 Can I use for loop to assign the value for $len1 to $len1000? for ($i=3; $i<=3000; $i+3) { echo $len . $i .... er, I don't know how to write it. Quote Link to comment Share on other sites More sharing options...
sasa Posted March 12, 2011 Share Posted March 12, 2011 <?php $left = 0; $top = 30; $num = mysql_num_rows($result2); $num_col = 5; $len1 = floor($num/$num_col); for($i=0;$i<$num_col; $i++)$len[$i]=$len1; $j = 0; $r = $num % $num_col; for($i=0; $i< $r; $i++){ if($j >= $num_col) $j = 1; $len[$j]++; $j +=2; } $count = 0; $i = 0; while($userinfo = mysql_fetch_array($result2)){ if($count==$len[$i]){$top=($top%100==30) ? 80 : 30; $i++; $left=200 * $i; $count=0;} echo "<div style=\"left:{$left}px; top:{$top}px; position:absolute;\">{$userinfo['message']}</div>\n"; $top +=100; $count++; } ?> Quote Link to comment Share on other sites More sharing options...
zac1987 Posted March 13, 2011 Author Share Posted March 13, 2011 <?php $left = 0; $top = 30; $num = mysql_num_rows($result2); $num_col = 5; $len1 = floor($num/$num_col); for($i=0;$i<$num_col; $i++)$len[$i]=$len1; $j = 0; $r = $num % $num_col; for($i=0; $i< $r; $i++){ if($j >= $num_col) $j = 1; $len[$j]++; $j +=2; } $count = 0; $i = 0; while($userinfo = mysql_fetch_array($result2)){ if($count==$len[$i]){$top=($top%100==30) ? 80 : 30; $i++; $left=200 * $i; $count=0;} echo "<div style=\"left:{$left}px; top:{$top}px; position:absolute;\">{$userinfo['message']}</div>\n"; $top +=100; $count++; } ?> My god, I took many hours to understand your codes. Finally I understand that. It works perfectly for me now. Thank you. You are the smartest person that I ever seen. Thank you so much. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.