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

Access multiple Databases in JPA

According to JPA specification we can define multiple "persistence-unit" elements (i.e. like below) in persistence.xml file and can easily refer them inside Dao layers as this. public class PolarDaoImpl {     @PersistenceContext(unitName="PolarPU")     protected EntityManager entityManager; -- } public class BearDaoImpl {     @PersistenceContext(unitName="BearPU")     protected EntityManager entityManager; -- } Checkout sample persistence.xml <?xml version="1.0" encoding="UTF-8"?> <persistence version="2.0" xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd">     <!-- Database 1 -->     <persistence-unit name="PolarPU" transaction-type="RESOURCE_LOCAL">        ...
3 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