Jquery mobile Panel not working on page redirect and background image not getting applied

Question

I have two problems.

1) when I include the html code for the panel after the header, the image doesn't get applied 2) I have a button that on click opens up the SocialStream.html page, The panels (or swipe events) don't work when it's coming from button click, only works on page refresh.

Here is my html page, with the javascript for page load.

<!DOCTYPE html>
<html>
<head>
<title>Social Stream</title>
<meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link rel="stylesheet" href="http://socialmedia.mobilevelocity.co.uk/CS408/MySocialStream.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script> 
<script type="text/javascript" src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<style>

    #welcomepage{ background: transparent url(../CS408/images/wallpaper.jpg) 0 0 repeat fixed !important;}
    #sslogo{max-height: 80%; max-width: 100%;}

</style>
</head>

<body>

   <div data-role="page" id="welcomepage"> <!--WelcomePage Start-->
    <div data-role="header" data-theme="f"><h5></h5></div>
       <div data-role="panel" id="left-panel" data-theme="b">
        <p>More text</p>
    </div><!-- /panel -->
    <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="c">
        <p>To be added</p>
    </div><!-- /panel -->  
     <div data-role="content">
     <div>
     <img src="/CS408/images/Social-Stream-Effect1.png" id="sslogo">
     </div>
          <a href="fb_feed.html" data-role="button" data-theme="f" data-transition="flip" rel="external" >Just Get Streaming Now! </a>
    </div><!--WelcomeContent End-->     
     <div data-role="footer" data-theme="f" data-position="fixed"><h5></h5></div> <!-- WelcomePage Footer End--> 
   </div> <!--WelcomePage End -->
   <script type="text/javascript">
$(document).on('pagebeforeshow', '#welcomepage', function(){        
    $( document ).on( "swipeleft swiperight", "#welcomepage", function( e ) {
        if ($.mobile.activePage.find('#left-panel').hasClass('ui-panel-closed') && e.type === "swipeleft") {
            $( "#right-panel" ).panel( "open" ); 
        }    

        if ($.mobile.activePage.find('#right-panel').hasClass('ui-panel-closed') &&  e.type === "swiperight") {
            $( "#left-panel" ).panel( "open" );           
        }        
    });
});
   </script>
  </body>
</html>

score 1 · Answer 1 · answered Jul 24 '13 at 22:13

I thing I understand your problem. When jQuery Mobile initializes only first HTML page is fully loaded. When jQuery Mobile loads other pages it will load only page div (data-role="page"), everything else will be discarded.

This is because ajax is used for page loading. because initial HTML file HEAD is already inside the DOM there's no point in loading it for subsiding pages.

To fix your problem move your CSS and javascript inside data-role="page" div. Something like this:

    <div data-role="page" id="welcomepage"> <!--WelcomePage Start-->
        <style>

            #welcomepage{ background: transparent url(../CS408/images/wallpaper.jpg) 0 0 repeat fixed !important;}
            #sslogo{max-height: 80%; max-width: 100%;}

        </style>            
        <div data-role="header" data-theme="f"><h5></h5></div>
        <div data-role="panel" id="left-panel" data-theme="b">
            <p>More text</p>
        </div><!-- /panel -->
        <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="c">
            <p>To be added</p>
        </div><!-- /panel -->  
        <div data-role="content">
            <div>
                <img src="/CS408/images/Social-Stream-Effect1.png" id="sslogo"/>
            </div>
            <a href="fb_feed.html" data-role="button" data-theme="f" data-transition="flip" rel="external" >Just Get Streaming Now! </a>
        </div><!--WelcomeContent End-->     
        <div data-role="footer" data-theme="f" data-position="fixed"><h5></h5></div> <!-- WelcomePage Footer End--> 
        <script type="text/javascript">
            $(document).on('pagebeforeshow', '#welcomepage', function(){        
            $( document ).on( "swipeleft swiperight", "#welcomepage", function( e ) {
            if ($.mobile.activePage.find('#left-panel').hasClass('ui-panel-closed') && e.type === "swipeleft") {
            $( "#right-panel" ).panel( "open" ); 
            }    

            if ($.mobile.activePage.find('#right-panel').hasClass('ui-panel-closed') &&  e.type === "swiperight") {
            $( "#left-panel" ).panel( "open" );           
            }        
            });
            });
        </script>            
    </div> <!--WelcomePage End -->

If you don't like this solution take a look at my blog ARTICLE that talks about this problem. There you will find several more solutions and working examples.

Jquery mobile Panel not working on page redirect and background image not getting applied

1 Answers1