CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
ikwillem
ikwillem

Reputation: 1064

jQuery / JavaScript not working on sub-pages on a jQuery Mobile enabled webpage

I'm have a image in the header of my jQuery Mobile website that I resize automaticly so it fills the screen. On my page there is a sub-page for loggin in users. But on this page the resizing of the image will not work.

As I'm googling for a solution I already found out it is caused by jQuery Mobile that only allows jQuery to work inside the first data-role="page" div. But as I'm trying each solution, none of them seem to will work.

Can you guys help me find the solution?

My code (in a short copy/paste example):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>WHY DON'T YOU WORK?</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.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>
            window.onresize = function (event) {
                resizeimage();
            }
            window.onload = function (event) {
                resizeimage();
            }            
            function resizeimage() {
                var img = document.getElementById('headerimage');

                var oldwidth = img.naturalWidth;
                var oldheight = img.naturalHeight;

                var newwidth = $(window).width();
                var newheight = oldheight / oldwidth * newwidth;

                img.width = newwidth;
                img.height = newheight;     
            }
        </script>
    </head>

    <body>
        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="FrontPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="images/PSO_Banner_960x89.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #1
                <a href="#LoginPage">LoginPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                FOOTER
            </div>
        </div>

        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="LoginPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="images/PSO_Banner_960x89.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #2
                <a href="#FrontPage">FrontPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                FOOTER
            </div>
        </div>
    </body>
</html>

Still searching for the solution...

Upvotes: 1

Views: 465

Answers (1)

Gajotres
Gajotres

Reputation: 57309

First don't mix vanilla javascript and jQuery.

Your problem is that you have 2 pages with 2 same header pictures. Bot of them are loaded into the DOM and you function is always accessing the first one, picture in your first page.

You will need a little bit of jQuery and jQuery Mobile to make this work.

Instead of this:

    var img = document.getElementById('headerimage');

use this:

    var img = $.mobile.activePage.find('#headerimage');

EDIT :

Working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>WHY DON'T YOU WORK?</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.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>
            window.onresize = function (event) {
                resizeimage();
            }

            window.onload = function (event) {
                resizeimage();
            }    

            $(document).on('pageshow', '[data-role="page"]', function(){ 
                resizeimage();       
            });

            function resizeimage() {
                var img = $.mobile.activePage.find('#headerimage');//document.getElementById('headerimage');

                var oldwidth = img.naturalWidth;
                var oldheight = img.naturalHeight;

                var newwidth = $(window).width();
                var newheight = oldheight / oldwidth * newwidth;

                img.width(newwidth);
                img.height(newheight); 

                $(window).trigger( "throttledresize" );             
            }
        </script>
    </head>

    <body>
        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="FrontPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="http://www.azhumane.org/wp-content/uploads/2012/06/AHS025_mastSM_21-11.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #1
                <a href="#LoginPage">LoginPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                <h3>FOOTER</h3>
            </div>
        </div>

        <div class="PageDiv" data-role="page" data-add-back-btn="true" id="LoginPage">

            <div class="HeaderDiv" data-role="header" data-position="fixed">
                <img id="headerimage" name="headerimage" src="http://www.azhumane.org/wp-content/uploads/2012/06/AHS025_mastSM_21-11.png" />
            </div>

            <div class="ContentDiv" data-role="content" data-theme="a">
                CONTENT #2
                <a href="#FrontPage">FrontPage</a>
            </div>

            <div class="FooterDiv" data-role="footer" data-position="fixed">
                <h3>FOOTER</h3>
            </div>
        </div>
    </body>
</html>

Upvotes: 2

Related Questions