Question

What’s the best way to update a value based on orientation change?

Example mark-up value.

<span class="week">Thursday</span>

So if it was landscape, it would say Thursday, if it was in portrait it would say Thu instead.

I can update the string using subString(0, 3), but I’m not sure how to change it back after.

Heres the orientation change function I’ve got:

/* orientation change */
function orient() {  
    if (window.orientation == 0 || window.orientation == 180) {
        $('body').attr('class', 'portrait');
        orientation = 'portrait';
        return false;
    }
    else if (window.orientation == 90 || window.orientation == -90) {
        $('body').attr('class', 'landscape');
        orientation = 'landscape';
        return false;
    }
}
/* all orientation function on page load */
$(function(){
    orient();
});
/* call orientation function on orientation change */
$(window).bind( 'orientationchange', function(e){
    orient();
});

Answer 1

You can use data attributes for storing long and short versions of days:

<span class="week" data-long="Thursday" data-short="Thu">Thursday</span>

After that, with a little change you can use it like this:

function orient() {  
    orientation = window.orientation == 0 || window.orientation == 180 ? 'portrait' : 'landscape';
    $('body').attr('class', orientation );
    $('.week').html(function() {
        var $this = $(this);
        return $this.data(orientation == 'landscape' ? 'long' : 'short');
    });
    return false;
}