Blog items tagged with "javascript"

Theming for the iPad

I have been working this week on updating some of my Exponent sites to take advantage of the mobile theming feature now available in Exponent 2. In a nutshell, the feature allows you to define a separate index.php file that will be viewed by clients using mobile browsers. You can also use specific CSS code to adjust the appearance of your page to better suit the browsing of small screen mobile devices.

Enter the iPad. With a maximum screen width of 1024 px you have a screen size equivalent to most laptop screens but with the handicap that dropdown menus (Such as the YUI Top Menu) do not work in the safari browser on the iPad.

Now if you talk to other web designers you will find many who advocate that dropdown menus are a poor way to provide efficient navigation to your users and the fact that they do not work on the iPad calls for a solution.

In my early testing, I made changes in  /themename/mobile/index.php  and was not able to see them  on my iPad. I later found that the iPad was not included in the array that is used to identify browsers in expTheme.php  (fixed for 2.0.7) Once past this hurdle it was not too hard to provide specific code to replace the dropdown menus with a tabbed interface.

That same page has dropdown menus when viewed with a regular PC.

The code in the template for the above tabbed interface contains two embedded navigator modules, each in their own div.

<div id="nav">
<?php expTheme::module(array("module"=>"navigation","view"=>"Tab Nav","source"=>"@top")); ?>

<div id="top-sub-nav">    
<?php expTheme::module(array("module"=>"navigation","view"=>"children-only-top-nav","source"=>"@top")); ?>

Included in the CSS directory is a stylesheet for mobile devices.

iPad.css contains some CSS3 specific code which recognizes the iPad and displays css which will work on its 1024 pixel wide screen.

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px)
/* Navigation */
#top-sub-nav .navigationmodule.children-only-top-nav ul li a:link {
text-decoration:none; }

​The CSS above is just an example, obviously there is a whole lot more code needed to display the tabs but you get the idea. The CSS declarations are all wrapped in curly braces and the @media screen and max-device-width designations make this css specific to the iPad.

I have not done a lot of testing with other mobile devices (iPod Touch, iPhone or Droid) but for my purposes where my school sites are increasingly being visited by iPads, I think this will be a workable solution.

You can read a bit more about Mobile theming in this exponent docs site article.

The introduction of YUI 2in3

YUI 3.2 and earlier had no browser based detection loading, and worked well with YUI PHP Loader, allowing for Exponent to load YUI dependencies on the server side. Since the introduction of YUI 3.3.0, which loads (and skips loading) JavaScript based on your browser, it's now only YUI 2.x that can take advantage of server-side dependency calculation and loading, since PHP has no sure-fire way to detect the user's browser. The result: Exponent YUI 2 loading up on the server, and YUI 3 loading via YUI3's built-in Loader.

It's always been the goal to migrate fully to YUI 3 once certain aspects of the library offer comparable widgets to YUI 2. Until we can fully drop YUI 2 from the system, we can at least streamline the YUI loading mechanisms by making use of the YUI 2in3 library. YUI 2in3 is written by the YUI team as a compatibility layer that allows the loading and usage of the YUI 2 library within the YUI 3 ecosystem.

Integrating YUI 2in3 offered many advantages compared to sticking with YUI PHP loader. For one, it streamlines using the YUI environment, setting up a general usage pattern for using both versions of YUI. It also drops 2 external library dependencies: YUI PHP Loader, and Lissa (ties YUI PHP Loader together with minify).

With these changes, however, you stand a good chance of breaking existing views making use of YUI 2 code. We've corrected the themes shipping with Exponent that previously made use of this, like cool waters override for YUI Top Nav.

To help alleviate some migration pains, we've added some helper mechanisms to the {script} plugin, looking for the yui2mods or yuimodules parameter, parsing out whichever modules were passed, and plugging them in to yui3 wrapper code for you. This helps keep 90% of code from breaking, but isn't bullet-proof. Any custom views should definitely be adjusted.

Here's a gist of the old vs new pattern:

A good read that helped me integrate YUI2in3: