CODEWITHSUNDEEP
htmlcssjquery-mobile
TecHunter
TecHunter

Reputation: 6131

How to use same header for multiple page inside same html file

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 :

Screenshot from my mobile app

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?

Upvotes: 1

Views: 2733

Answers (2)

commadelimited
commadelimited

Reputation: 5119

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.

Upvotes: 1

shanabus
shanabus

Reputation: 13115

It sounds like you are trying to do a lot without modifying CSS. Why is that a requirement of your project?

  1. It sounds like you are looking for a persistent header. Start here with the JQM Footers documentation. They cover persistence and it should be the same for headers. If the JQM docs do not solve this issue, check out this other Stackoverflow post.

  2. If you are looking for a custom configuration, check out the very bottom of this documentation on JQM headers. If that doesn't quite do it you may also try the JQM layout grids. Otherwise, you will need CSS, be it inline or otherwise.

  3. While I am not sure I completely understand the problem here, I have heard that CSS/HTML should be used to control layout width, but not height. Sorry, having trouble finding the articles to back that up so lets just consider that one design philosophy. Just the same, this post tells you how to evenly balance height with CSS.

As for your last question about borders, you would have to use CSS to control them. Whether or not you do it inline or a stylesheet like one created with the JQM Themeroller, I am not aware of any other way of styling borders other than CSS.

Hope this helps!

Upvotes: 0

Related Questions