Page 1 of 1

using mobile orientation for display column in a div

Posted: Sun Jul 15, 2012 7:29 am
by avibitton
Hi

im having trouble in combining php with javascript ,
in short what i need to do if the mobile in 90 degrees(which is wider), so show div with 4 columns ,else(normal orientation) show 3 columns.
i dont know how to use both of javascript orientation detection and php which execute the columns.
im lost here dont know how to solve it . its not also to talk with the database with each detection , so i guess i need to use ajax save the data and than somehow play with javascript maybee with php.

thats the code which shows the columns :
<?php
$stmt = $db->query('SELECT * FROM rooms');
$count = $db->fetchOne( 'SELECT COUNT(name) AS count FROM rooms' );


for ( $ro = 0; $ro <$count/4; $ro++ )
{
echo '<div id="rom_wrap">';
for ( $column = 0; $column < 4; $column++ )
{
/*while ($row = $stmt->fetch()) {*/
$row = $stmt->fetch() ;
echo '<div class="naming" id="naming"><img src="'.$row['image'].'" id="imaging"></br>'.$row['name'].'</div>';

}
echo '</div>';
echo '<br />';
}

?>

Re: using mobile orientation for display column in a div

Posted: Sun Jul 15, 2012 9:24 am
by social_experiment
avibitton wrote:in short what i need to do if the mobile in 90 degrees(which is wider), so show div with 4 columns ,else(normal orientation) show 3 columns.
i dont know how to use both of javascript orientation detection and php which execute the columns.
This reads like an issue that you should solve with style sheets (css) instead of javascript / php.

http://www.bushidodesigns.net/blog/mobi ... ser-agent/

Re: using mobile orientation for display column in a div

Posted: Sun Jul 15, 2012 9:57 am
by avibitton
Hi

not sure since, css will just help to fix the size and design of the page , but not what will be display there .

Re: using mobile orientation for display column in a div

Posted: Sun Jul 15, 2012 2:01 pm
by social_experiment
avibitton wrote:css will just help to fix the size and design of the page , but not what will be display there .
true; but if you set a specific class to a column you can hide it with css; the stylesheet that displays on non-mobile displays will show the column while the other stylesheet will 'hide' the column

Code: Select all

 // mobile sheet
 div.className {
    display: none;
 } 

Re: using mobile orientation for display column in a div

Posted: Mon Jul 16, 2012 1:36 am
by avibitton
it will work , but the problem it will step over the last column , i mean i will loss the data which will be hidden , i was trying to think how i can display it after its a hidden in new row , but i couldnt figure something yet .
if you have a soultion for it also that will be great .

thx Avi .

Re: using mobile orientation for display column in a div

Posted: Mon Jul 16, 2012 1:56 am
by social_experiment
avibitton wrote:but the problem it will step over the last column , i mean i will loss the data which will be hidden
So you still want to show all the data but in less columns; the url below might be of use.
http://www.codingforums.com/showthread.php?t=192440

Re: using mobile orientation for display column in a div

Posted: Mon Jul 16, 2012 2:42 am
by avibitton
Thx i was so close to think we solved it , but than the data which i loss prevent me to solve it , screen resolution its a quiet a problem i tired it before with no success, if i will not find other solution or think of something how to save the lost column and than show it a new row , i almost sure it possible , so i will try to work it out , if you have any other good ideas like you did with this one , please do tell .

THX

Avi.

Re: using mobile orientation for display column in a div

Posted: Mon Jul 16, 2012 3:49 am
by avibitton
i found other way to do it maybee this way will be more easy to find solution but still couldnt find it .
maybee you will think about something .

since its a mobile if the last column appers so you need to scroll it horizental so i used {overflow-x:hidden;} but still the data is lost , need to find how can i use the lost data in a new row or something like that .
Avi .