CODEWITHSUNDEEP
jquery-mobile
tipsywacky
tipsywacky

Reputation: 3464

How to scroll down a page in jquery mobile while using iscroll?

Using iscroll for refresh functionality for listview. It will disable page scroll on the other pages for jquery mobile.

<script type="text/javascript" src="/js/iscroll.js"></script>

base-mobile.html

<title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="xxx">
        <meta name="keywords" content="yyyy">
        <link rel="stylesheet" type="text/css" href="/css/jquery.mobile-1.3.1.css" />
        <link rel="stylesheet" type="text/css" href="/css/mobile.css" />
        <script src="/js/jquery-1.9.0.min.js"></script>
        <script src="/js/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/js/iscroll.js"></script>

item.html

{% extends "base-mobile.html" %}

{% block content %}
<div id="item" data-role="page">
    <div data-role="header">
        <h1 class="ui-title" role="heading" aria-level="1">Item</h1>
        <a href="#all-items" data-inline="true" class="ui-btn-left" data-icon="arrow-l">Back</a>
    </div>
    <div data-role="content" class="ui-content" role="main">

        <h2>title</h2>

        <div id="category">
            <label>Category: category </label> 

        </div>

        <p>location</p>


        <p>description</p>
        <div id="map_canvas">
        <img src="http://maps.googleapis.com/maps/api/staticmap?center=location&zoom=16&size=300x200&markers=xxx,xxx&sensor=false" ></div>
    </div>
    <div data-role="footer" data-position="fixed"> 

    </div>
    </div>
</div>
{% endblock %}

Just build a page that is bigger than iphone screen size. I can't scroll down to the page on my simulator or on the iPhone. Can anyone point me to a direction or let me know how to do it, please?

Thanks in advance.

Upvotes: 0

Views: 1070

Answers (1)

Aaron
Aaron

Reputation: 1083

I'm assuming you have the HTML, BODY, and HEAD tags. Are you using "viewport" settings? In the HEAD I use:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

I'm able to scroll the page you posted above on my iPhone in landscape position. In portrait position the page doesn't need to be scrolled. Could you elaborate?

After you inject the content dynamically are you using .page() and/or .changePage()?

$('pageSelector').page();

This link is a good reference for me: http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html

Upvotes: 2

Related Questions