BeckBlog

Remove Addressbar from iPhone Web App

Jeff — Tue, 22 Jun 2010 23:55:31 +0000

If you are creating a web app for the iPhone there is an easy to to hide the address bar when opening the page from a link on the users home screen. You simply need to add the following meta tag to your
head. This will also work with the iPad.

1	name="apple-mobile-web-app-capable" content="yes" />

iPad HTML Video Autoplay

Jeff — Tue, 01 Jun 2010 23:40:52 +0000

The Problem

The iPad and also the iPhone have a bit of special behavior when it comes to using the HTML5 video tag. They both have the autoplay functionality shut off. This behavior is also extended to any event which the user has not started the event chain. (AKA you can’t do the following)

1	<body onLoad="document.myMovie.play()">

What it Means

So what this really means you can not have a playlist of videos where one video is loaded as soon as the first ends. Also having timed events from one video kick off sub videos will not work unless the user clicks on the new video.

Is this a Bug?

No this is as intended by Apple look for the Device-Specific Considerations here. What the idea is that any device that could be charged from a data plan shouldn’t allow auto play. While this idea makes sense the execution is poor. I am currently using a wifi only iPad so there is no reason for this restriction it would be best in my mind to detect if they are using wifi or 3g and react accordingly.

What to Do

Design around this I restructured an interaction from popping up this sub video over the main video to instead make a thumbnail active so it could be click to show this sub video this works in my case as the sub video can be viewed any time after the timed event.

Another option is to show the new video element that will display a play symbol you should be able to set a poster image with some text to guide the users.

HTML5 Video and the seeked event

Jeff — Tue, 04 May 2010 10:18:00 +0000

I have been working with the HTML5 video element a bit on both iPad and the Chrome browser. I’ve started to find some odd behavior around the seeked event. First a touch of background about the seeked event. According to the spec the seeked event should fire when the seeking IDL attribute changes to false. This seems to make perfect sense but when actually using the event it seems inconsistent at best.

I have seen three distinct actions that don’t make sense to me.

Extra Fires

While dragging the scrub bar the seeked event will fire many times in the Google Chrome 5.0.342.9 beta on windows.
When setting the position by changing the currentTime attribute it will fire the seeked event three times in a row on both the iPad and Chrome.

No Fires

Scrubbing on the iPad never fires the seeked event.

So from what I can tell its not the best idea to use the seeked event at this point but the timeupdate event does fire consistently through my testing. So what you can do if you like is keep track of a last value for the timeupdate and then you can detect if it jumps too far (up to you and your use) then fire the logic you wanted to fire on seeked. I am kicking off events at times and I didn’t want to miss events so simply changing my logic to fire as long as the time is past the event point worked fine for my uses but that may not always work. Keeping track of the last time from the timeupdate shouldn’t be a very hard addition if you need special seek logic.

HTML5 Video Poster and the iPad

Jeff — Sat, 17 Apr 2010 14:44:18 +0000

While working on a small HTML5 based project for the iPad I found some interesting things with how it handles the poster attribute and defining the video source. The following HTML works fine on Mobile Safari (iPad) and my desktop Chrome.

1 2	id="vidtest" src="big_buck_bunny.mp4" poster='poster.jpg' controls="controls"> >

But moving to the following code works fine in Chrome but on the iPad (Mobile Safari) it will only show the poster and no way to start the video unless you do the pinch zoom to make the video full screen then the controls will show up.

1
2
3

    id="vidtest"  poster='poster.jpg' controls="controls" >
       src="big_buck_bunny.mp4" type="video/mp4" />
   >

Simply using the first style is ok if you are only doing one type of video but if you wanted to include other options this issue limits that ability. But for now if you are targeting iPad just use the first option.

DISQUS Comments

Jeff — Thu, 08 Apr 2010 05:56:42 +0000

One feature I have really liked on my blogs recently is the ability to just use Twitter to comment so I went ahead and added the DISQUS Comment system the plugin is straight forward and easy to use with WordPress. Moving forward with new site projects I will be strongly considering using DISQUS instead of an internal comment system, I would suggest checking it out as well as InenseDebate .

Filling an Array with Objects in PHP

Jeff — Thu, 28 Jan 2010 14:29:45 +0000

While working in PHP I found the need to fill an array with new objects on the fly. So at first I tried the array_fill function that worked fine for values but when I tried an object I found it was the same object in every position meaning if I modified one they all changed. What I needed was a new object in each. The easiest way I found to do that was a for loop.

The following doesn’t work correctly

1	$arr = array_fill(1,12,new MyObject());

So to accomplish the same idea I did the following

 $arr=array();
 
 for($i=1;$i<=12;$i++)
 {
      //Fill Array with new object
      $arr[$i]=new MyObject();
 }

pptx mime type

Jeff — Sun, 17 Jan 2010 17:48:16 +0000

I was working with a CMS and found that one file was not downloading correctly people were saying that the file was being zipped up by the CMS. Well it turns out it was the issue with IE6 and a bad MIME Type. The fix is simple for pptx you need the mime type application/vnd.openxmlformats-officedocument.presentationml.presentation once that was added everything was working correctly. With out this a PPTX file will download as a zip.

A few links on the subject:

Oracle Removing Newline Chars

Jeff — Thu, 31 Dec 2009 19:32:00 +0000

We were trying to trim white space from a column that had some newlines. The problem was the oracle trim() was only removing spaces. We found that we had to do two Replace operations Replace(col,char(10),”) and Replace(col,char(13),”) one for linefeed and one for newline. I switch between many Languages and I found it annoying I couldn’t use \n or \r but all well I don’t use Oracle that often.

JavaScript Passing by Value into an Inline Function

Jeff — Thu, 31 Dec 2009 18:49:05 +0000

I have a web page that needs to go through a bootstrap step in order to make all the correct Ajax calls. So I was simply looping through the results and making the Ajax call like the following. You will note that I needed to pass a name to the processing of the data returned but my first attempt was not working.

for(i=0;i<myJSONObject.campus.length;i++) 
{
  campus_name = myJSONObject.campus[i].name;
  var campURL=myJSONObject.campus[i].url;
  $.ajax({
        type:"post",
        url: campURL+"/fetchcampusdata.jsp?campusid="+id,
	datatype:"JSON",
	cache: false,
	success: function(data2)
	{
		processCampusData(data2, campus_name);
	},
	error: function(request,error)
        {
		alert("error in processing campus data: "+error) ;
	}
  });
 
}

That code was not working correctly as all the names were coming up as the last one in the loop. And thinking more about it that makes perfect sense. The problem is when the success function fires it looks back to the Activation Record which contains campus_name which has been modified by the loop. So what I need to do to fix it was simply move the Ajax call to a function so an AR would be created for each call allowing me to use the campus_name variable correctly.

for(i=0;i<myJSONObject.campus.length;i++) 
{
  campus_name = myJSONObject.campus[i].name;
  var campURL=myJSONObject.campus[i].url;
  callFetch(campURL[0],myJSONObject.campus[i].id,campus_name);
}

function callFetch(url,id,campus_name)
{
  $.ajax({
        type:"post",
        url: url+"/fetchcampusdata.jsp?campusid="+id,
	datatype:"JSON",
	cache: false,
	success: function(data2)
	{
		processCampusData(data2, campus_name);
	},
	error: function(request,error)
        {
		alert("error in processing campus data: "+error) ;
	}
  });
}

HTML Table Row Height Hack

Jeff — Tue, 08 Dec 2009 22:24:24 +0000

Working with a fixed height and width table I found a problem where rows were expanding too much I needed each row to only grow in height enough to contain the text and not fill the rest of the table. The number of rows was dynamic but the height fixed. The hack is simple add a height to each row of 1px which will make it so the rows only grow enough to contain your text then add a last row to act as a buffer with no height. Below the fold I have examples.

<table height="200px">
    <tr height="1">
        <td><img src="example.gif"/></td>
        <td>Some Text</td>
    </tr>
    <tr height="1">
        <td><img src="example2.gif"/></td>
        <td>Some More Text</td>
    </tr>    
    <tr><td colspan="2"/></tr> 
</table>