Skip to main content

JQuery Mobile Split Screen 20-80 hack


Use JQuery Mobile's Grid Layout and just override "width" on "ui-block-a" and "ui-block-b" to split screen as per your need.

Tested on : iPad, iPhone, and PC


Below is fully functional page, you can download and open it in a browser to see the live demo. 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=MacRoman">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="foo">
            <div data-role="header">
                <h1>Foo</h1>
            </div>
            <div data-role="content" >
                <div class="ui-grid-a">
                    <div class="ui-block-a" style="width:20%">
                        <div class="ui-bar ui-bar-e" style="padding-left:10%;float:left;width: 100%"> This occupies 20% </div>
                    </div>
                    <div class="ui-block-b" style="width:80%">
                        <div class="ui-bar ui-bar-b" style=" z-index: 10;position: absolute;width: 100%;padding-right: 10%">
                            This occupies 80%
                        </div>
                    </div>
                </div>
            </div>
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div>
        </div>
    </body>
</html>

Comments

Cara said…
Thanks so much for this! You saved me from tearing my hair out!!
October 2, 2012 at 5:38 AM
David Lucky said…
Dirty hacks.. I better use bootstrap
May 10, 2013 at 2:57 PM
Mallory J said…
Awesome blog you have here
December 14, 2024 at 1:06 PM
Post a Comment

Popular posts from this blog

JPA 2 new feature @ElementCollection explained

@ElementCollection is new annotation introduced in JPA 2.0, This will help us get rid of One-Many and Many-One shitty syntax. Example 1: Stores list of Strings in an Entity @Entity public class Users implements Serializable {     private static final long serialVersionUID = 1L;     @Id     @GeneratedValue(strategy = GenerationType.AUTO)     private Long id;     @ElementCollection     private List<String> certifications = new ArrayList <String> ();     public Long getId() {         return id;     }     public void setId(Long id) {         this.id = id;     }     public List <String> getCertifications() {         return certifications;     }     pub...
21 comments
Read more

Validating CSV Files

What is CsvValidator ?   A Java framework which validates any CSV files something similar to XML validation using XSD. Why should I use this ?   You don't have to use this and in fact its easy to write something your own and also checkout its source code for reference. Why did I write this ?   Some of our projects integrate with third party application which exchanges information in CSV files so I thought of writing a generic validator which can be hooked in multiple projects or can be used by QA for integration testing. What is the license clause ?   GNU GPL v2 Are there any JUnit test cases for me checkout ?  Yes,  source How to integrate in my existing project ? Just add the Jar which can be downloaded from here  CsvValidator.jar  and you are good. Instantiate  CsvValidator c onstructor which takes these 3 arguements          // filename is the the file to be validated and here ...
7 comments
Read more

Reuse JPA Entities as DTO

Note : Major design advantages of JPA Entities are they can detached and used across tiers and networks and later can by merged. Checkout this new way of querying entities in JPA 2.0 String ql = " SELECT new prepclass2.Employee (e.firstname, e.lastname) FROM Employee e "; List<Employee> dtos = em.createQuery(ql).getResultList(); The above query loads all Employee entities but with subset of data i.e. firstname, lastname. Employee entity looks like this. @Entity @Table(name="emp") public class Employee implements Serializable {     private static final long serialVersionUID = 1L;     @Id     @GeneratedValue(strategy = GenerationType.AUTO)     private Long id;     @Column     private String firstname;     @Column     private String lastname;     @Column     private String username;     @Column ...
11 comments
Read more