Question

I want to create a mobile website site, I’m trying to get my navigation to adapt to screen size. The HTML structure of the navigation is going to change, I’m aware that I can use CSS and @MEDIA calls. However, it doesn’t apply in my case, because I’m using a Foundation from ZURB framework, I need to change the elements, from UL to DD or DL, etc.

I looked around on several sources and I find that because PHP loads first before my AJAX is ready, I can’t get my navigation to display properly on mobile devices.

I needed some way to detect my screen size and communicate that value to my PHP menu generating function in Joomla.

I tried the following:

window.onload = function(){ 
var height = $(window).height();
var width = $(window).width();

 $.ajax({
    type: "POST",
    url: '',
    data: {
        "height": height,
        "width": width
    },
    success: function (data) {

    },
});
}

mod_menu sample:

<?php
   require_once('FirePHPCore/FirePHP.class.php');
   $firephp = FirePHP::getInstance(true);
   ob_start();

   $width = $_POST['width'];

   $firephp->group('Test Group');
   $firephp->log('Width');
   $firephp->log($width);
   $firephp->groupEnd();
?>

if ($width > 767) { 

?>

<!-- The class on the root UL tag was changed to match the Foundation nav style -->
<ul class="nav-bar<?php echo $params->get('class_sfx');?>"<?php
    $tag = '';
    if ($params->get('tag_id')!=NULL) {
        $tag = $params->get('tag_id').'';
        echo ' id="'.$tag.'"';
    }
?>>
<?php
foreach ($list as $i => &$item) :
    $id = '';
    if($item->id == $active_id)
    {
        $id = ' id="current"';
    }
    $class = '';
    if(in_array($item->id, $path))
    {
        $class .= 'current ';
    }
    if($item->deeper) {
        $class .= 'parent ';
    }

    $class = ' class="'.$class.'item'.$item->id.'"';

    echo '<li'.$id.$class.'>';

    // Render the menu item.
    switch ($item->type) :
        case 'separator':
        case 'url':
        case 'component':
            require JModuleHelper::getLayoutPath('mod_menu', 'default_'.$item->type);
            break;

        default:
            require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
            break;
    endswitch;

    // The next item is deeper.
    if ($item->deeper) {
        echo '<ul>';
    }
    // The next item is shallower.
    elseif ($item->shallower) {
        echo '</li>';
        echo str_repeat('</ul></li>', $item->level_diff);
    }
    // The next item is on the same level.
    else {
        echo '</li>';
    }
endforeach;
?></ul>
<?php } ?>

Then I use a if condition to check the width of the screen and choose the type of navigation. One navigation uses a UL structure, the other one has to use DL DD struture.

I used FirePHP to see how the page loads, my navigation doesn’t show up because the PHP loads first before the Ajax is ready, so I don’t see my navigation. I need my PHP to wait till the Ajax is ready or a portion of the page to wait. I’m not sure where to go from here.

I’m looking at Joomla MooTools, not sure if I can leverage that to wait for the Ajax to load before the page loads.

I’m aware, there are easier ways, like making a brand new menu item in Joomla or hiding things in Joomla to get it to work, but I want a more clean and elegant way.

If anyone has any code samples. Please post.

Answer 1

The solution is to identify by browser:

User-Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

I found a good guide here.