Repetition of header

Question

Please see below example of HTML structure

<div data-role="page" id="p1"> 
  <div  data-role="header"><h1>Header</h1></div> 

  <div  data-role="content">
      <a href="#" id="add" data-role="button">Click Me</a>
  </div> 

  <div  data-role="footer"><h4>Footer</h4></div> 
</div> 

<div data-role="page" id="p2"> 
  <div  data-role="header"><h1>Header 1</h1></div> 

  <div  data-role="content">
    Page Two
  </div> 
  <div  data-role="footer"><h4>Footer</h4></div> 
</div>

jquery for same

$('#p1').live('pagecreate', function(e){
  $("#add").click(function(e) {
      $.mobile.changePage('#p2', { transition: "flip"} );
  });
});

The above example is working fine but header part is repeating. So how to avoid this issue because I am using same header as well as footer part for each data-role="page"?

please note heading numbers should always appear in order so unless your content section contains headings 2 and 3 just before the footer section (and your heading 4 in the footer is part of the last bit of the header 3 content), your site is will fail [w3c validation](http://www.w3.org/TR/WCAG20-TECHS/G141) — Pete, Feb 04 '14 at 15:26
Repeating implies I am using same layout and content of header every time. I don't want to repeat header everytime. Is ther any concrete solution? — GVJ, Feb 05 '14 at 01:23

score -1 · Answer 1 · edited May 23 '17 at 12:11

-1

There seems to be no nice "built-in" method to do it. You can find some workarounds here: jQuery Mobile: Use same header footer for all pages

edited May 23 '17 at 12:11

Community

1
1

answered Feb 04 '14 at 15:24

markusthoemmes

3,080
14
23

Repetition of header

1 Answers1