0

By developing a Phonegap app in jQuery and jQuery Mobile I ran into this:

The app download an image from the server, and it puts into a div. The div's width and height

varies depends on the orientation. In landscape mode the image is made smaller to fit into

div, and in portrait mode is cut a piece from both side from it to fit into div. In both case

the height property of the div is set to 100%, so this would be a fix point by

recalculating the coordinates, and not the width of the div. In this topic I found a lib that works,

but only for the first time in the program. When I change the orientation, the coordinates

aren't good any more.

The lib is based on this code:

function mapRebuild(scaleValue) {
    var map = $("map"); 
    map.find("area").each(function() { // select all areas
        var coords = $(this).attr("coords"); // extract coords
        coords = coords.split(","); // split to array
        var scaledCoords = "";
        for (var coord in coords) { // rebuild all coords with scaleValue
              scaledCoords += Math.floor(coords[coord] * scaleValue) + ",";
        }
        scaledCoords = scaledCoords.slice(0, -1); // last coma delete
        $(this).attr("coords", scaledCoords); // set new coords
    });
}

If I want to keep the aspect ratio of the image and want to recalculate the coordinates

based on the div's height (in portrait mode 13.9em and in landscape mode 8.8em), what

should I do? The original image dimension is 1000px*750px.

Edit: I'm listening to the orientationchange event, and there I call the function:

function isOrientationPortrait(){
    if (screen.height > screen.width){ 
        return true; 
    } else { 
        return false; 
    }
}

$(window).on('orientationchange', function () {
    if(isOrientationPortrait()){    //Portrait mode
        $("#navbarul li img").removeClass("lips_landscape");
        $("#imgdiv").removeClass("imgdiv_landscape").addClass("imgdiv_portrait");
        $(".ui-grid-c > .ui-block-a, .ui-grid-c > .ui-block-b, .ui-grid-c > .ui-block-c, .ui-grid-c > .ui-block-d").removeClass("navbar_landscape").addClass("navbar_portrait");
        $("#imageID").removeClass("image_landscape").addClass("image_portrait"); 
        $('map').imageMapResize();
    } else {    //Landscape mode
        $("#navbarul li img").addClass("lips_landscape");
        $("#imgdiv").removeClass("imgdiv_portrait").addClass("imgdiv_landscape");
        $(".ui-grid-c > .ui-block-a, .ui-grid-c > .ui-block-b, .ui-grid-c > .ui-block-c, .ui-grid-c > .ui-block-d").removeClass("navbar_portrait").addClass("navbar_landscape");
        $("#imageID").removeClass("image_portrait").addClass("image_landscape"); 
        $('map').imageMapResize();
    }
});
Community
  • 1
  • 1
spaghetti_code
  • 145
  • 3
  • 17

0 Answers0