Home/ Questions/Q 7974187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T08:18:05+00:00

I have a problem with header & footer while calling one external html page

  • 0

I have a problem with header & footer while calling one external html page in my index.html page in jquery mobile. Here is the sample code which I am following:

index.html

 <section id="main" data-role="page">
      <header data-role="header"> 
      </header>
      <div data-role="content" class="mainScreen">
        <a href="#single"  data-theme="e" data-role="button" >Single</a>
        <a href="sample.html"  data-theme="e" data-role="button">Sample</a>
        <a href="#faq" data-transition="slide" data-theme="e"data-role="button">FAQ</a>
    </div>
  </section>
   <section id="single" data-role="page"> 
      <header data-role="header">
           <div>..</div>  
      <footer data-role="footer"> 
   </section>
   <section id="faq" data-role="page"> 
   <header data-role="header"> 
               <div>..</div> 
   <footer data-role="footer">  
  </section>

main.js 

    $("header").attr("data-position","fixed").attr("data-tap-toggle","false");
    $("footer").attr("data-position","fixed").attr("data-tap-toggle","false");

sample.html

<html>
  <head>......</head>
  <body>
     <section id="sample" data-role="page"> 
      <header data-role="header">
           <div>..</div>  
      <footer data-role="footer"> 
   </section>
 </body>
</html>

In the above index.html page when calling “#single” & “#faq”, the header and footer are displaying correctly by their positions fixed but when sample.html (external HTML page) was called header and footer position are not displaying in fixed positions. they are moving.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The issue lies in the timing that you are calling your attr() method. You need to bind to pagebeforecreate. This way your header and footer attributes are set before JQM enhances your markup. i.e.

    $(document).on('pagebeforecreate', function(){
    $("header").attr("data-position","fixed").attr("data-tap-toggle","false");
    $("footer").attr("data-position","fixed").attr("data-tap-toggle","false");
});

    Note: If your jQuery version is pre 1.7 use bind or delegate instead of on()

    • 0