CODEWITHSUNDEEP
jquerycoding-stylelandscapeportraitjquery-mobile
Phil Jackson
Phil Jackson

Reputation: 10288

jQuery mobile landscape and portrait class

I've started using the jquery mobile framework yet I cannot seem to use the landscape and portrait classes to minipulate styles.

documentation says

The HTML element will always have a class of either "portrait" or "landscape", depending on the orientation of the browser or device.

so I am under the impression that <h1>foo</h1> would either be <h1 class="landscape">foo</h1> or <h1 class="portrait">foo</h1>

yet h1.landscape { font-size:16px; } and h1.portrait { font-size:9px; } doesn't seem to work.

If anyone could shine some light on this it would be much appreciated.

Upvotes: 4

Views: 19240

Answers (6)

ZAD
ZAD

Reputation: 569

Here is a fully working version (based on Phil Jackson code) tested on different devices :)

I'm sure jQuery Mobile used to handle this, however I've another working version which is based on screen orientation, however I think this would be better due to it simplicity...

if($(window).width() > $(window).height()){
    if($('body').hasClass('portrait')){
        $('body').removeClass('portrait').addClass('landscape');
    } else if(!$('body').hasClass('portrait')) {
        $('body').addClass('landscape');
    }
}
else {
    if($('body').hasClass('landscape')){
        $('body').removeClass('landscape').addClass('portrait');
    } else if(!$('body').hasClass('landscape')) {
        $('body').addClass('portrait');
    }
}

This adds the portrait or landscape class, you don't need to hard-code that to your template file :)

Thanks

Upvotes: 0

Xman Classical
Xman Classical

Reputation: 5416

Use this function:

//Detect change rotation
    function doOnOrientationChange()
    {
        switch(window.orientation)
        {
            case -90:
            case 90:
                alert('landscape');
                $('body').addClass('landscape');
                $('body').removeClass('portrait');
                break;
            default:
                alert('portrait');
                $('body').addClass('portrait');
                $('body').removeClass('landscape');
                break;

        }
    }

Upvotes: 0

JonT
JonT

Reputation: 51

Sorry but that is out of date! Since HTML5 you have in CSS3 MediaQueries. Now you can decide the style in CSS:

@media screen and (orientation: landscape) {

 h1 {
  color: red;
 }

 #someId {
   width: 50%;
 }

}

@media screen and (orientation: portrait) {

 h1 {
  color: blue
 }

 #someId {
   width: 100%;
 }

}

Upvotes: 5

Phil Jackson
Phil Jackson

Reputation: 10288

put this in a lil plugin

(function($){
    $.fn.portlandSwitch = function ( options ) {
        // redefine styles to either landscape or portrait on phone switch
        $(window).resize( function(){
            var height = $(window).height();
            var width = $(window).width(); 
            var ob = $('html');
            if( width > height ) {
                if( ob.hasClass('portrait') ) {
                    ob.removeClass('portrait').addClass('landscape');
                }
            }else{
                if( ob.hasClass('landscape') ) {
                    ob.removeClass('landscape').addClass('portrait');
                }
            }
        });
    }
})(jQuery);



$.portlandSwitch();

Upvotes: 0

John Slade
John Slade

Reputation: 13052

The portrait and landscape classes are added to the html element (not every element on the page), so you want the css selector to look for the landscape/portrait first. The following works:

html.landscape h1 { font-size:16px; }
html.portrait h1 { font-size:9px; }

Upvotes: 3

Phil Jackson
Phil Jackson

Reputation: 10288

ok. I decided to see whats going on and used curl to get the source code via android view.

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.actwebdesigns.co.uk');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2');
$html = curl_exec($ch);

echo $html;

The only element that has the landscape or portrait class is the html tag.

<html xmlns="http://www.w3.org/1999/xhtml" class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px"><head><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"></html>

I have also noticed that the framework does not auto switch the class on rotation so the following code which i've tested works.

<script type="text/javascript">
$(window).resize( function(){
    $('html').toggleClass('landscape, portrait');
});
</script>

scrap the above that has flaws.

<script type="text/javascript">
$(window).resize( function(){
    var height = $(window).height();
    var width = $(window).width(); 
    var ob = $('html');
    if( width > height ) {
        if( ob.hasClass('portrait') ) {
            ob.removeClass('portrait').addClass('landscape');
        }
    }else{
        if( ob.hasClass('landscape') ) {
            ob.removeClass('landscape').addClass('portrait');
        }
    }
});
</script>

using a liitle from Tommi Laukkanen's script the above works fine.

Upvotes: 5

Related Questions