irislines web design
irislines web design

Posts Tagged ‘iPad’

Device detection to single out the ipad for special styling

”   on the body element of the index.php file.

(Of course I also added a line to the template with that variable for testing  that would display the results and not force me to examine the code to see if it was working.)

In my stylesheet I could then write rules specifically for the ipad:

.ipad  element-needing-custom-styles  {property: value;}

I was doing this to solve a problem with how the quicktime player displayed on the ipad (fallback for no flash when using Allvideos)

I increased the height of the player container to 72 px in the plugin parameters,  then set the theses styles:

/* adjust allVideos audio player */

.avPlayerWrapper {text-align:left; width:230px; clear:none; }
        .avPlayerWrapper .avPlayerContainer {margin:0;}

.avAudio .avPlayerContainer {height:24px; overflow:hidden; }
        .avAudio .avPlayerBlock {position:relative; top:-48px;}

#ipad .avAudio .avPlayerContainer {height:72px;}
         #ipad .avAudio .avPlayerBlock {position:relative; top:0;}

The results made mp3 players that were ugly, but functional.

The much better solution was to use WidgetKit’s Media Player from YooThemes.com, but I’m still glad to know how to target the ipad specifically should I ever need to.

-->

My friend and colleague Bill from Grumpy Engineering  helped me with this one:

I added this to the php block at the head of my template:

$isIPad = preg_match('/ipad/i', trim($_SERVER['HTTP_USER_AGENT']));
if ($isIPad) $device="ipad";
else $device="not-ipad";

and then could use

class=“<(question mark)php echo $device;  ?>”   on the body element of the index.php file.

(Of course I also added a line to the template with that variable for testing  that would display the results and not force me to examine the code to see if it was working.)

In my stylesheet I could then write rules specifically for the ipad:

.ipad  element-needing-custom-styles  {property: value;}

I was doing this to solve a problem with how the quicktime player displayed on the ipad (fallback for no flash when using Allvideos)

I increased the height of the player container to 72 px in the plugin parameters,  then set the theses styles:

/* adjust allVideos audio player */

.avPlayerWrapper {text-align:left; width:230px; clear:none; }
        .avPlayerWrapper .avPlayerContainer {margin:0;}

.avAudio .avPlayerContainer {height:24px; overflow:hidden; }
        .avAudio .avPlayerBlock {position:relative; top:-48px;}

#ipad .avAudio .avPlayerContainer {height:72px;}
         #ipad .avAudio .avPlayerBlock {position:relative; top:0;}

The results made mp3 players that were ugly, but functional.

The much better solution was to use WidgetKit’s Media Player from YooThemes.com, but I’m still glad to know how to target the ipad specifically should I ever need to.

Joomla solution for non-flash mp3 player

I searched the JED and the best I could come up with was to use Allvideos to create simple, single mp3 players for a website I’m working on.

The syntax of this pluggin is nice and simple:   {mp3}Name-of-file-without-extension{/mp3} or

{mp3remote}http://other-site.com/name-of-file-with-extension.mp3{/mp3remote}

But…  Allvideos uses Quicktime as a fallback when flash is not available and on the ipad the Quicktime controller was clunky.   I did get a snippet of php to detect the ipad and then could address styling the controller to make it better — but it was still clunky.

WidgetKit from youtheme.com

I kept looking for a solution that would provide html5 audio  and finally found it in youtheme’s widgetkit media player.   This uses html5 audio and falls back to flash instead of the other way around.  It suits me!

The syntax is just a bit more complex, but certainly doable:

 

Working on an iPad…

I’m writing this post on an iPad – trying to get used to some of the features – and to test whether I really need to buy the adminPad extension from the folks at JoomlaPraise.

One thing I noticed right away was the apparent lack of a scroll bar in the editor window. Turns out this is just how safari works on the iPad. One finger drag scrolls the whole page, two finger drag scrolls in the editor window — or other scrollable areas on a site.

When I first discovered that boxes that should scroll just seemed cut off with no way to access the remaining text, I was checking out the newly launched site for Froggy Bottom Guitars. In an Ignite Gallery display, one of the players had submitted a rather long story to go with his photo. On a computer a scroll bar is obvious – but on the iPad, it was not.

I found someone else’s blog entry about the scrolling issue, so I guess I’m not the only one who doesn’t read the manuals when a new toy arrives…. So,  a bug or a feature?  

But back to Joomla! Administration.

Here in the MyBlog editor, I’m offered plain text or rich text. I can’t do anything in the rich text window. When I access the article using the regular article manager, I can’t do anything in the JCE editor window, but can enter text if I click “hide”.  Then I’m in “code view” and to enter a tag requires switching keyboard layouts from ABC to # to symbols and back for each < or >.  Not going to happen!

Another thing to figure out is how to get an insertion point within a word, or how to move the cursor. Right now I’m double clicking to select a word and then retyping the whole word to fix a typo. That’s not too bad, but when the “word” is a URL – well, you know how long they can be…

So…. I started this blog entry on the iPad, but saved it as unpublished.   I opened it up at the computer to enter paragraph breaks, links, etc.  

I guess I will be investing in the adminPad after all!  Because other than editing Joomla! sites, I’m Loving the iPad!

IrisLines LLC
101 Washington Street
Brattleboro, VT 05301

802 257 7391

info@irislines.com