Software Archive
Read-only legacy content
Announcements
FPGA community forums and blogs on community.intel.com are migrating to the new Altera Community and are read-only. For urgent support needs during this transition, please visit the FPGA Design Resources page or contact an Altera Authorized Distributor.
17060 Discussions

Tab View App - current scroll position is transferred to other tabs when selected, position cannot be reset to top

Neill_R_
Beginner
‎11-26-2015 03:24 AM
771 Views

Intel XDK version 2673
HTML5 and Cordova build using Intel App Framework

Outstanding IDE! Enjoying working with the new XDK. The problem I am experiencing has been hanging around for weeks now and I cannot fix it.

This issue is to do with a HTML5/Cordova app using app framework 3 built in the XDK.

There are four tabs, so if Tab1 has a great deal of content and I scroll down and then switch to Tab2 (which has less content) the content of Tab2 is completely off the screen, Tab2 has inherited the scroll position of Tab1. And so on throughout the tabs.

Solutions explored:

1. $("#myPage").scrollTop(0);
Attempting to reset tabs on This does not work, neither so other Javascript or jQuery commands relating to scrolling or offset

2. Using the class $('.afScrollPanel') which the App Framework relies on to scroll a page
This was not able to return each tab to the top of the content

3. Using transform()
Using the following code did reset each Tabs content to the top of the screen, but disabled scrolling
$('.afScrollPanel').css('transform', 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');

Is there a scrollTop command or function I am missing to force a Tab to scroll to the top of its content? I have been on this issue for over a week now any advice would be greatly appreciated.

The .html code I am using:

<!DOCTYPE html>
<html>
    <!--
  * Please see the included README.md file for license terms and conditions.
  -->

    <head>
        <link rel="stylesheet" type="text/css" href="media_button_bar/css/media_button_bar.css">
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
        <link rel="stylesheet" type="text/css" href="app_framework/2.1/css/icons.min.css">
        <title>Blank App Designer Cordova Web App Project Template</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

        <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->

        <style>
            /* following three (cascaded) are equivalent to above three meta viewport statements */
            /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
            /* see http://dev.w3.org/csswg/css-device-adapt/ */
                @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
                @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
                /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
        </style>

        <link rel="stylesheet" href="00/css/jquery-ui.min.css" >
        <link rel="stylesheet" href="00/css/jquery-ui.theme.min.css" >
        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" href="00/styles.css">
        <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">

        <!-- STANDARD FOR JQUERY MOBILE -->
        <script src="00/js/jquery-1.11.3.min.js"></script> 
        <script src="00/js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="00/js/jquery.ui.touch-punch.min.js"></script> 

        <script src="cordova.js" id="xdkJScordova_"></script>

        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->
        <!--            
            You may substitute jQuery for the App Framework selector library.
            See http://app-framework-software.intel.com/documentation.php#afui/afui_jquery
        -->
        <script type="application/javascript" src="app_framework/2.1/appframework.js"></script>
        <script type="application/javascript" src="app_framework/2.1/appframework.ui.js" data-ver="1"></script>
        <script type="application/javascript" src="app_framework/themeRelease.js"></script>
        <script type="application/javascript" src="js/index_user_scripts.js"></script>
        <script type="application/javascript" src="xdk/ad/af_subpage.js"></script>
        <script src="00/index.js"></script>     
        <script src="00/external.js"></script>  
		<script src="00/iab.js"></script>
    </head>

    <body id="afui" class="ios7">

        <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
        <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
        <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
        <div id="content" class="uwrap">

            <div class="main-bg">
                <img class="pageBackground" src="00/content/images/bg-main2.png">
            </div>

            <div class="upage panel" id="mainpage" data-footer="tabBar" data-header="none">

                <div id="home" class="upage-content content-area vertical-col">

						<!-- CONTENT -->
	
                </div>

                <div id="download" class="upage-content vertical-col hidden">

						<!-- CONTENT -->
				
                </div>

                <div id="progress" class="upage-content vertical-col hidden">

						<!-- CONTENT -->
				
                </div>

                <div id="instructions" class="upage-content vertical-col hidden">

						<!-- CONTENT -->

                </div>
                
                <!-- END OF PAGES UNDER TAB BAR --> 
                
            </div> 

            </div>

        </div>


<div class="footerBG wrap-element uib_w_2" data-uib="app_framework/footer" data-ver="1" id="tabBar">
    
    <a class="widget uib_w_7 d-margins" data-uib="app_framework/button" data-ver="1" id="btnTracks"><img id="tab1" src="00/content/images/01_active.png"></a>
    <a class="widget uib_w_6 d-margins" data-uib="app_framework/button" data-ver="1" id="btnDownload"><img id="tab2" src="00/content/images/02_inactive.png"></a>
    <a class="widget uib_w_3 d-margin" data-uib="app_framework/button" data-ver="1" id="btnProgress"><img id="tab3" src="00/content/images/03_inactive.png"></a>
    <a class="widget uib_w_4 d-margins" data-uib="app_framework/button" data-ver="1" id="btnInstructions"><img id="tab4" src="00/content/images/04_inactive.png"></a>
    
</div>

        <div id="blockUI" class="blockUI"></div>
        <div id="message" class="message"></div> 

    </body>

</html>

 

0 Kudos

Link Copied

4 Replies
Hamilton_Tenório_da_
Valued Contributor I
‎11-26-2015 01:25 PM
771 Views

I found a way to go top just some days ago. Try to use it:

var options = {
        verticalScroll: true,
        horizontalScroll: false
    };
    var scroller = $("#pagex").scroller(options);
    scroller.scrollToItem("#topo", 0);

Good luck.

0 Kudos
Copy link
Neill_R_
Beginner
‎11-27-2015 09:30 AM
771 Views

Hi Hamilton

Thanks for your reply. I did try this without any solution. It seemed to crash the app on lines 5 and 6.

In case this was a problem with the frameworks I tried the code on a fresh empty XDK project using app designers and app framework 3 with the below code and your lines 5 and 6 definitely crashed the app, it never reaches the alert at the end.

Am I missing some additional element in the framework to make .scroller() work?

document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false ); 

function onDeviceReady() {
     
    setTimeout(function() {
        
    var options = {
        verticalScroll: true,
        horizontalScroll: false
    }; 
    
    var scroller = $("#home").scroller(options); // THESE LINES ARE CRASHING THE APP IT NEVER REACHES THE ALERT
    scroller.scrollToItem("#top", 0);   // THESE LINES ARE CRASHING THE APP IT NEVER REACHES THE ALERT
        
    alert("Complete");
        
	}, 6000); 
        
    
}
<!DOCTYPE html>
<html>
    <!--
  * Please see the included README.md file for license terms and conditions.
  -->

    <head>
        <link rel="stylesheet" type="text/css" href="media_button_bar/css/media_button_bar.css">
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="app_framework/3.0/af.ui.css" data-ver="2">
        <link rel="stylesheet" type="text/css" href="app_framework/3.0/icons.min.css">
        <title>Blank App Designer Cordova Web App Project Template</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

        <!--
  * The "meta viewport" tag (below) helps your app size appropriately to a device's ideal viewport.
  * Note that Windows device viewports work better when initialized using the @viewport CSS rule.
  * For a quick overview of "meta viewport" and @viewport, see this article:
  *   http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag
  * To see how it works, try your app on a real device with and without a "meta viewport" tag.
  * Additional useful references include:
  *   http://www.quirksmode.org/mobile/viewports.html
  *   http://www.quirksmode.org/mobile/metaviewport/devices.html
  *   https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
-->

        <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->

        <style>
            /* following three (cascaded) are equivalent to above three meta viewport statements */
            /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
            /* see http://dev.w3.org/csswg/css-device-adapt/ */
                @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
                @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
                /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
        </style>

        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">

        <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
        <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below -->
        <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->

        <!-- Recommended location for your JavaScript libraries -->
        <!-- These library references (below) are just examples to give you the general idea... -->
        <!-- <script src="lib/mc/hammer.js"></script> -->
        <!-- <script src="lib/ft/fastclick.js"></script> -->

        <!--
  * cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app"
  * Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message caused by this "cordova.js" script?
  * The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project.
  * You can safely ignore the error or comment out this line if you will not be developing a Cordova app.
-->
        <script src="cordova.js" id="xdkJScordova_"></script>

        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->
        <!--            
            You may substitute jQuery for the App Framework selector library.
            See http://app-framework-software.intel.com/documentation.php#afui/afui_jquery
        -->
        <script type="application/javascript" src="lib/jquery.min.js"></script>
        <script type="application/javascript" src="app_framework/3.0/appframework.ui.min.js"></script>
        <script type="application/javascript">
            $.afui.autoLaunch = false; //By default, it is set to true and you're app will run right away.  We set it to false to show a splashscreen
            /* This function runs when the content is loaded.*/
            $.afui.useOSThemes=false;
             $(document).ready(function(){
                setTimeout(function(){
                    $.afui.launch();
                },1500);
            });
        </script>
    </head>

    <body id="afui" class="v2">

        <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
        <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
        <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
        <div class="upage vertical-col left view" id="mainpage" data-header="none" data-footer="af-footer-1">
            <div class="pages">
                <div class="upage-outer">
                    <div class="upage-content vertical-col panel ac0" id="home">
                        <div class="widget uib_w_2 d-margins" data-uib="media/text" data-ver="0" id="top">
                            <div class="widget-container left-receptacle"></div>
                            <div class="widget-container right-receptacle"></div>
                            <div>
                                
                                
                                <div id="top">Top</div>
                                
                                <br /><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p><p>Text Field</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer class="outer-element uib_w_1" data-uib="app_framework/footer" data-ver="2" id="af-footer-0"><a class="button widget uib_w_3 d-margins" data-uib="app_framework/button" data-ver="2">Test</a>
            </footer>
        </div>
    </body>

</html>

 

0 Kudos
Copy link
Hamilton_Tenório_da_
Valued Contributor I
‎11-27-2015 11:23 AM
771 Views

I am not sure if it can cause the crash: you have 2 id="top" in your code. You can try remove one of them.

One question: why you put the script inside a setTimeout function?

0 Kudos
Copy link
Neill_R_
Beginner
‎11-30-2015 04:05 AM
771 Views

Hi Hamilton

Thanks for your reply. I did remove the first id="top" but the app still crashes on these two lines of code.

    var scroller = $("#home").scroller(options); // THESE LINES ARE CRASHING THE APP IT NEVER REACHES THE ALERT
    scroller.scrollToItem("#top", 0);   // THESE LINES ARE CRASHING THE APP IT NEVER REACHES THE ALERT

The timeout function was included to give me a few seconds to scroll the page down, then hoping this code would return the page to the top.

Do you have a working example of this or similar code in the XDK returning the page to the top?

Many thanks for your assistance and advice.

Neill

0 Kudos
Copy link
Reply

Community support is provided Monday to Friday. Other contact methods are available here.

Intel does not verify all solutions, including but not limited to any file transfers that may appear in this community. Accordingly, Intel disclaims all express and implied warranties, including without limitation, the implied warranties of merchantability, fitness for a particular purpose, and non-infringement, as well as any warranty arising from course of performance, course of dealing, or usage in trade.

For more complete information about compiler optimizations, see our Optimization Notice.