How to use the same header for multiple pages in the same html file

advertisements

I want to make an iPad HTML5/CSS3 based app and I found out about JQuery Mobile and tried to use it. Here what it looks like :

This is the summary page, when a user clicks on one of the grid element it should go to the proper detail page. (Click on grid "a" should go to an inner page with id "blockA" etc...).

I encoutered some problems and cannot find any clear clues on the net.

  1. I want my header + photo and summary + "informations" bar to be fixed. The only solution I found is to copy/paste the header div into my "blockA" page and into the 5 others which I found really annoying. Basically I want my top screen to be fixed and my bottom screen to change on link navigation. I thought of using jquery append methods and such but is there any "native" way of doing so?
  2. My header was really hard to bring like you can see it on the picture. I had to change the CSS a bit. Is there any easier way? Some class I missed in the JQuery structure CSS maybe? Can't find any exhaustive class list for JQM.
  3. How to set heights for my different components without modifying CSS.

Here is some of my HTML code :

    <body>
    <div data-role="page" id="page_main" style="min-height: 496px; ">
        <div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
            <h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
            <ul data-role="listview">
                <li class="pta-file-content" data-icon="custom" data-theme="c">
                    <img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='mail'>[email protected]</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <h1 class="ui-title">Informations</h1>
        </div>

            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <a href="#blockA"><span id='ptaGetUserBlockA'>a</span></a>
                </div>
                <div class="ui-block-b">
                    <a href="#blockB"><span id='ptaGetUserBlockB'>b</span></a>
                </div>
                <div class="ui-block-c">
                    <a href="#blockC"><span id='ptaGetUserBlockC'>c</span></a>
                </div>
                <div class="ui-block-a">
                    <a href="#blockD"><span id='ptaGetUserBlockD'>d</span></a>
                </div>
                <div class="ui-block-b">
                    <a href="#blockE"><span id='ptaGetUserBlockE'>e</span></a>
                </div>
                <div class="ui-block-c">
                    <a href="#blockF"><span id='ptaGetUserBlockF'>f</span></a>
                </div>
            </div>

    </div>
    <div data-role="page" data-title="Page Foo" id="blockA">
        <div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
            <h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
            <ul data-role="listview">
                <li class="pta-file-content" data-icon="custom" data-theme="c">
                    <img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='mail'>[email protected]</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <h1 class="ui-title">Informations</h1>
        </div>
        mon bloc A
    </div>
</body>

Don't look at the ptaGetUser spans, it's for my later persistence framework that I should work on to add seamless persistence to HTML pages like this. For now though this is just here for nothing. I've also only added the first block for this exemple.

My CSS to make this the right dimension :

.ui-title,.ui-title
{
    height:24px;
}

.banner
{
    height:45px;
    padding: 0px 15px !important;
}

.ui-li-thumb, .ui-li-icon {
    max-width:165px;
    max-height:165px;
}

.pta-file-content
{
    height:148px;
}

.ui-li-has-thumb
{
    padding-left: 165px !important;
}
.ui-grid-a
{
    padding-top: 5px;
}
.ui-grid-b
{
    height:543px;
    width: 1022px;
}

.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b,.ui-grid-b .ui-block-c
{
    height:50%;
    width:32%;
    border: 1px solid black;
}

The whole screen slides when I click on the first grid element to show the page. As you can see I've copied the whole header into my second page div which is really bad for code readability. I also have CSS problems with my grid borders as it doesn't show bottom borders, how can I add borders to a grid without modifying CSS?


1) jQuery Mobile doesn't currently offer persistent headers and footers, but an upcoming version, 1.1, will. Whether or not they stay on the page during transitions is something that has not yet been answered. Your best bet is to use some sort of server-side language for your pages, then set the header as an include. That way you don't have to copy and paste across multiple pages.

2) jQuery Mobile is great for building apps, but to get something truly custom, you've got to write it yourself; be that CSS or HTML or both.

3) Only way to achieve custom heights for your elements is to write custom CSS.