Wednesday, January 23, 2013

iGoogle Replacement

I decided to start working on an iGoogle replacement since iGoogle is going to die.

Here's some early code. Its far from done, and on the backburner at the moment, but, here's a link

https://github.com/bren1818/iGoogle_Static

Saturday, January 5, 2013

Dynamically configure Viewport (ios/android) meta tag


In the head of your page include this:
//jquery


<meta name="HandheldFriendly" content="True" />
<meta id="Viewport" name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />



$(function(){

var minSiteWidth = 480; /*Anything Less than or Equal to this will be in 'phone' view*/
var maxSiteWidth = 1024; /*Anything between this and min width will be tablet, anything greater will be Desktop*/



var previousOrientation = 0;
var checkOrientation = function(){
if(window.orientation !== previousOrientation && window.orentation != undefined){
  previousOrientation = window.orientation;
$(function(){
//get proper width
var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width;
//get proper width
var wh = ( $(window).height() < window.screen.height ) ? $(window).height() : window.screen.height;
var o = ( ww > wh) ? "Landscape" : "Portait";
$('body').removeClass('Landscape');
$('body').removeClass('Portait');
$('body').addClass(o);
});
  }
};

function isMobile(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
return true;
}else{
return false;
}
}

/*Add on the resize and orientation events for Mobile*/
if( isMobile() ) {
window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);
}

function setViewPort(mw){
if( isMobile() ) { //Only care about setting the view ports on mobile devices
$('body').addClass('mobileDevice');
if( mw == undefined ){
mw = minSiteWidth;
}

var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
var ratio =  ww / mw; //calculate ratio
if( ww <= mw){ /*Phone Layout*/

$('body').addClass('phone');
$('body').removeClass('tablet');

$('.siteSection').width( mw );
$('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=no, width=' + ww);

}else{ /*Tablet / Desktop Layout */
$('body').addClass('tablet');
$('body').removeClass('phone');

$('.siteSection').width( ww );

$('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=no, width=' + ww);

if( ww >= maxSiteWidth ){
$('body').addClass('desktopDevice'); /*Optional */
}
}
}else{
$('body').addClass('desktopDevice');
}
}

/*Function to allow a delayed re-size trigger event*/
var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();


if( !isMobile() ) { /*This is for desktops, don't need it done on both*/
$(window).resize(function () { /*so that we don't have to coninuously call functions on a resize*/
waitForFinalEvent(function(){
var w = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width;
if(  w <= minSiteWidth ){
$('body').addClass('phone');
$('body').removeClass('desktopDevice');
$('body').removeClass('tablet');
log( "Gone to phone View");
}else if( w > minSiteWidth && w < maxSiteWidth ){
$('body').addClass('tablet');
$('body').removeClass('phone');
$('body').removeClass('desktopDevice');
log("Gone to Tablet View");
}else{
$('body').removeClass('phone');
$('body').removeClass('tablet');
$('body').addClass('desktopDevice');
log("Gone to Desktop View");
}
}, 500, "WindowResize");
});
}


setViewPort(minSiteWidth); //viewport for mobile devices

});