CODEWITHSUNDEEP
javascriptjqueryipadmobilemobile-safari
calebo
calebo

Reputation: 3442

update value based on orientation change on ipad

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();
});

Upvotes: 0

Views: 2331

Answers (2)

Emre Erkan
Emre Erkan

Reputation: 8482

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;
}

Upvotes: 1

jfriend00
jfriend00

Reputation: 707328

You can set the text like this:

$(".week").html("Thu");

or 

$(".week").html("Thursday");

If you need to save the original long version, then you can use the .data() method to save it the first time so you can access it later.

var week = $(".week");
if (!week.data("day")) {
    week.data("day", week.html());
}
var day = week.data("day");
if (orientation == "landscape") {
    week.html(day);
} else {
    week.html(day.substr(0,3));
}

Upvotes: 0

Related Questions