Thursday, August 22, 2013

Adding a mobile version to your typo3 site with css and jquery mobile

You already have a complex and huge typo3 site and want to add a mobile version to it. At the beginning, you didn't have such a plan to have different layout for the mobile devices, so it will cost you a lot of time and work to create another layout for the mobile devices. But don't worry, with this trick, you will have a friendly mobile layout for your site with just a little effort.

But remember that this trick will only modify the layout, not optimize your site for mobile devices, so you will have the exact same content with the web version and interaction. Basically, we only add jquery mobile framework and css modification.

For simplicity, I will show a simple html template for this trick.

<div id="pages">
<div id="header"></div>
<div id="leftcol"></div>
<div id="content"></div>
<div id="footer"></div>

Next, you should tell typo3 where is your mobile layout, in this example, the mobile layout should be accessible by adding &M=1 parameter on the url. Then tell typo3 to activate jquery mobile and your custom css. Put this example code in your main template.

[globalVar = GP:M=1]
page.headerData {
  100 = TEXT
  100.value = <meta name="viewport" content="width=device-width, initial-scale=1">
  536 = TEXT
  536.value = <link rel="stylesheet" href="fileadmin/css/mobile.css" type="text/css"/>
page.includeCSS {
 jqui =
 jqm =
 jqui.external = 1
 jqm.external = 1

501 =
502 =
503 = fileadmin/js/mobile.js
504 =
501.external = 1
502.external = 1
504.external = 1

Adjust the mobile.css as your liking.
Example for mobile.js :

    $ true;
    $.mobile.touchOverflowEnabled true;
    $ "c";
    $ "c"
    $.mobile.listview.prototype.options.headerTheme "c";
    $.mobile.listview.prototype.options.theme "c";
    $.mobile.listview.prototype.options.dividerTheme "c";
    $.mobile.listview.prototype.options.splitTheme "c";
    $.mobile.listview.prototype.options.countTheme "c";
    $.mobile.listview.prototype.options.filterTheme "c";
$leftMenu $('<a id="leftMenu" href="#leftcol" data-role="button" data-mini="true" data-inline="true" data-icon="home" data-theme="c">Menu</a>');
$textHeader $('<h1>'+$(document).attr('title')+'</h1>')
$('#pages').attr({"data-role":"page", "data-theme":"c", "data-url":"/"});
$('#leftcol').attr({"data-role":"panel""data-display":"push""style""z-index: 9999;"});
$('#header').attr({"data-role":"header", "data-theme":"c", "data-position":"fixed", "class":"ui-bar"});
$('#footer').attr({"data-role":"footer", "data-theme":"c", "data-position":"fixed", "class":"ui-bar"});


$document ).on"pageinit""#pages"function({
$document ).on"swipeleft swiperight""#pages"function{
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if $.mobile.activePage.jqmData"panel" !== "open" {
            if e.type === "swipeleft"  {
                $"#rightcol" ).panel"open" );
            else if e.type === "swiperight" {
                $"#leftcol" ).panel"open" );
Done. Now when you access your site with additional &M=1 parameter, your site will have a mobile site layout. You should put the menu on the leftcol div, to access it, you can swipe to the right or click the menu button.

No comments: