Screen is flying in Iphone...

365 views
Skip to first unread message

Alexey Braginenko

unread,
Dec 20, 2011, 1:04:56 AM12/20/11
to rhomobile
Hello,
I m new for rhomobile and i found cool work with this framework.
I created an app in rhodes then installed app in Iphone.
When u touch screen the scree moving after my fingers.
How to fix that and enable only moving up and down not right and left.
Thanks.

Raúl Alejandro Véjar Llugany

unread,
Dec 20, 2011, 9:17:49 AM12/20/11
to rhom...@googlegroups.com
+1


--
You received this message because you are subscribed to the Google Groups "rhomobile" group.
To post to this group, send email to rhom...@googlegroups.com.
To unsubscribe from this group, send email to rhomobile+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/rhomobile?hl=en.


Alexey Braginenko

unread,
Dec 21, 2011, 5:00:45 AM12/21/11
to rhomobile
Guys any one? :)

On Dec 20, 8:17 pm, Raúl Alejandro Véjar Llugany

Lucas Campbell-Rossen

unread,
Dec 21, 2011, 12:45:57 PM12/21/11
to rhom...@googlegroups.com
This might be worth a try.  I haven't tested it out yet.

Jorge Daniel Sampayo Vargas

unread,
Dec 22, 2011, 1:54:27 PM12/22/11
to rhom...@googlegroups.com
I prevented it with

bind('touchmove', function (e) { e.preventDefault(); })

but all scroll will lost, it works for me cause I rely in iscroll4 for the sections that need scroll

2011/12/21 Lucas Campbell-Rossen <lu...@rhomobile.com>

Dmitry Prohorov

unread,
Dec 22, 2011, 4:39:15 PM12/22/11
to rhom...@googlegroups.com
Tested it few minutes ago on iPhone simulator. It doesn't work :( Still able to drag page horizontally.

Lucas Campbell-Rossen

unread,
Dec 22, 2011, 5:34:47 PM12/22/11
to rhom...@googlegroups.com
If you want to prevent any movement for a page the code below works.  Put it into your application.js file and include this file in the layout. 

 If I wanted to prevent horizontal and vertical movement for page with id='testpage':

$('#testpage').live('pageshow', function() {
document.ontouchmove = function(event){ 
event.preventDefault(); 
}
})

$('#testpage').live('pagehide', function() {
document.ontouchmove = function(event){ 
}
})

On Thu, Dec 22, 2011 at 1:39 PM, Dmitry Prohorov <dmi...@rhomobile.com> wrote:
Tested it few minutes ago on iPhone simulator. It doesn't work :( Still able to drag page horizontally.

--
You received this message because you are subscribed to the Google Groups "rhomobile" group.
To view this discussion on the web visit https://groups.google.com/d/msg/rhomobile/-/RKvm06ZXxNoJ.

Jorge Daniel Sampayo Vargas

unread,
Dec 22, 2011, 6:03:43 PM12/22/11
to rhom...@googlegroups.com
or of all pages (the one I'm using)

before including jquery mobile add in layout:

 <script type="text/javascript">
      // code to execute on each page change
      $("div[data-role*='page']").live('pageshow', function(event, ui) {
          $(this).bind('touchmove', function (e) { e.preventDefault(); });
      }
</script>   


2011/12/22 Lucas Campbell-Rossen <lu...@rhomobile.com>

Alexey Braginenko

unread,
Dec 27, 2011, 7:13:15 AM12/27/11
to rhomobile
Hello,
I inserted this code in the layout



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>TestApp</title>

<script type="text/javascript">
// code to execute on each page change
$("div[data-role*='page']").live('pageshow', function(event, ui)
{
$(this).bind('touchmove', function (e)
{ e.preventDefault(); });
}
</script>

<% is_bb6 = System::get_property('platform') == 'Blackberry' &&
(System::get_property('os_version').split('.')[0].to_i >= 6) %>

<% if is_bb6 %>
<meta name="viewport" content="width=device-width;
height=device-height; initial-scale=1.0; maximum-scale=1.0; user-
scalable=0;"/>
<% else %>
<meta name="viewport" content="width=device-width; initial-
scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<% end %>

<% if System::get_property('platform') == 'WP7' %>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"/>
<% end %>

<% if System::get_property('platform') == 'APPLE' ||
System::get_property('platform') == 'ANDROID' || is_bb6 ||
( System::get_property('platform') == 'UNKNOWN' &&
System::get_property('webview_framework') =~ /^WEBKIT/) %>
<script src="/public/jquery/jquery-1.6.4.min.js" type="text/
javascript"></script>

<script src="/public/js/application.js" type="text/javascript"></
script>
<link rel="stylesheet" href="/public/jqmobile/
jquery.mobile-1.0rc1.min.css">
<link rel="stylesheet" href="/public/css/jqmobile-patch.css">
<% if System::get_property('platform') == 'APPLE' %>
<link href="/public/jqmobile/jquery.mobile.iphone.css"
type="text/css" rel="stylesheet"/>

<% end %>





<script type="text/javascript">
$(document).bind("mobileinit", function(){
// jQuery-Mobile init options initialization goes
here. For example, you may
// enable automatically generated 'Back' buttons on
headers this way:
//$.mobile.page.prototype.options.addBackBtn = true;

// You can disable (with false value) or change page
loading message
$.mobile.loadingMessage = false;
//$.mobile.loadingMessage = "loading"; // it is
default value

// For documented init options look here:
// http://jquerymobile.com/demos/1.0rc1/#/demos/1.0rc1/docs/api/globalconfig.html

// For poorly documented options search for
".prototype.options"
// in the jQuery Mobile source code

// Rhodes custom option!
// how long to wait transition end before "loading.."
message will be shown
$.mobile.loadingMessageDelay = 300; // in ms
});

</script>
<script type="text/javascript" charset="utf-8" src="/public/
jqmobile/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/js/
jqmobile-patch.js"></script>

<% end %>

<% if System::get_property('platform') == 'APPLE' %>
<link href="/public/css/iphone.css" type="text/css"
rel="stylesheet"/>
<link href="/public/css/ProgressBar.css" type="text/css"
rel="stylesheet"/>
<link href="/public/css/ulcontent.css" type="text/css"
rel="stylesheet"/>
<link href="/public/css/textInside.css" type="text/css"
rel="stylesheet"/>

<% elsif System::get_property('platform') == 'ANDROID' %>
<link href="/public/css/android.css" type="text/css"
rel="stylesheet"/>
<link href="/public/css/ProgressBar.css" type="text/css"
rel="stylesheet"/>
<% elsif is_bb6 %>
<link href="/public/css/android.css" type="text/css"
rel="stylesheet"/>
<% elsif System::get_property('platform') == 'Blackberry' %>
<link href="/public/css/blackberry.css" type="text/css"
rel="stylesheet"/>
<% elsif System::get_property('platform') == 'WP7' %>
<link href="/public/css/windows_mobile.css" type="text/css"
rel="stylesheet"/>
<script src="/public/js/wp7.js" type="text/javascript"></script>
<% elsif System::get_property('platform') == 'WINDOWS' %>
<link href="/public/css/windows_mobile.css" type="text/css"
rel="stylesheet"/>
<% elsif System::get_property('webview_framework') =~ /^WEBKIT/ %>
<link href="/public/css/android.css" type="text/css"
rel="stylesheet"/>
<% end %>
</head>

<body


<% if is_bb6 %>
data-do-fix-forms="true"
<% elsif System::get_property('platform') == 'WP7' %>
onload="wp7_change_forms_action_to_get()"
<% end %>
>



<%= @content %>




</body>
</html>



but still a m able to drag it in 4 directions.....I tried preivious
ones also.. same.....
Or i forgot something?
Thanks.





On Dec 23, 5:03 am, Jorge Daniel Sampayo Vargas <jdsamp...@gmail.com>
wrote:
> or of all pages (the one I'm using)
>
> before including jquery mobile add in layout:
>
>  <script type="text/javascript">
>       // code to execute on each page change
>       $("div[data-role*='page']").live('pageshow', function(event, ui) {
>           $(this).bind('touchmove', function (e) { e.preventDefault(); });
>       }
> </script>
>
> 2011/12/22 Lucas Campbell-Rossen <lu...@rhomobile.com>
>
>
>
>
>
>
>
> > If you want to prevent any movement for a page the code below works.  Put
> > it into your application.js file and include this file in the layout.
>
> >  If I wanted to prevent horizontal and vertical movement for page with
> > id='testpage':
>
> > $('#testpage').live('pageshow', function() {
> > document.ontouchmove = function(event){ event.preventDefault(); }
> > })
>
> > $('#testpage').live('pagehide', function() {
> > document.ontouchmove = function(event){ }
> > })
>

Dmitry Prohorov

unread,
Dec 27, 2011, 1:16:06 PM12/27/11
to rhom...@googlegroups.com
You have an issue in the code, your $("div[data-role*='page']").live
should be used only after jquery has been loaded.
IMHO the best way is to put it in $(document).ready handler function.

Alexey Braginenko

unread,
Dec 28, 2011, 4:15:48 AM12/28/11
to rhomobile
Thanks Dmitry , in this way it work,but im still able to drug the form
to right and left if my finger will touch textbox'es or other form
elements .Is there some solution for that and i need only drug to up
and down.
Thanks.
> >                //http://jquerymobile.com/demos/1.0rc1/#/demos/1.0rc1/docs/api/globalco...

Rob Roberts

unread,
Dec 28, 2011, 12:32:50 PM12/28/11
to rhomobile
None of the solutions mentioned above worked for me to prevent the
horizontal scrolling. The horizontal scrolling problem has something
to do with the styles used with jQuery Mobile. I recently converted my
app from jqTouch to jQuery Mobile. The jqTouch version did not have
the horizontal scrolling problem that the jQuery Mobile version has.

--Rob Roberts

On Dec 28, 2:15 am, Alexey Braginenko <alexey.bragine...@gmail.com>
wrote:

Jon Tara

unread,
Dec 28, 2011, 1:56:34 PM12/28/11
to rhom...@googlegroups.com
iScroll4 solves this problem while providing truly fixed headers and footers. (Use it along with the jquery.mobile.iscroll.js plugin for JQuery Mobile.)

You can disable both horizontal and vertical scrolling using the solution shown above (preventDefault). iScroll4 itself has separate control over horizontal and vertical scrolling.

Alexey Braginenko

unread,
Jan 24, 2012, 6:38:56 AM1/24/12
to rhom...@googlegroups.com
Hey guys,
I still struggle with that problem,
can someone suggest proper steps?
I tried 
to put this code

<script type="text/javascript">

      // code to execute on each page change

      $("div[data-role*='page']").live('pageshow', function(event, ui)

 {

          $(this).bind('touchmove', function (e)

 { e.preventDefault(); });

      }

  </script>


inside layout...

it did not work..


I tried to put it particular page

same problem ...

I tried to replace line

$("div[data-role*='page']").live('pageshow', function(event, ui)

to 

$("page1").live('pageshow', function(event, ui)


still not work..

guys please.....

Thaks



2011/12/29 Jon Tara <jtara-g...@spamex.com>
iScroll4 solves this problem while providing truly fixed headers and footers. (Use it along with the jquery.mobile.iscroll.js plugin for JQuery Mobile.)

You can disable both horizontal and vertical scrolling using the solution shown above (preventDefault). iScroll4 itself has separate control over horizontal and vertical scrolling.

--
You received this message because you are subscribed to the Google Groups "rhomobile" group.
To view this discussion on the web visit https://groups.google.com/d/msg/rhomobile/-/Qtd7IC16q_QJ.

Jon Tara

unread,
Jan 24, 2012, 12:06:35 PM1/24/12
to rhom...@googlegroups.com
I have this code in my application.js:

var peepr= {};

peepr.noscroll = function() {
  event.preventDefault();
}

The odd syntax is just so that all of my Javascript functions are effectively in a namespace. (Javascript doesn't directly support namespaces - there are several workaround solutions).

Yea, it's a one-line function. I like to plan for the future. ;)

I call it by including this in my page div:

<div data-role="page" data-iscroll="enable" ontouchmove="peepr.noscroll(event);">


Alexey Braginenko

unread,
Jan 24, 2012, 11:51:42 PM1/24/12
to rhom...@googlegroups.com
Hi,

i did as u said



<div data-role="page" data-iscroll="enable" ontouchmove="peepr.noscroll(event);">

  <div data-role="header" data-position="inline">
    <h1>Statuses</h1>
    <a href="<%= Rho::RhoConfig.start_path %>" class="ui-btn-left" data-icon="home" data-direction="reverse">Home</a>
    <a href="<%= url_for :action => :new %>" class="ui-btn-right" data-icon="plus">New</a>
  </div>

  <div data-role="none" style="margin:-15px;" id="wrapper">
    <ul data-role="none">
      <% @statuses.each do |status| %>
     
          <li>
            <a href="<%= url_for :action => :show, :id => status.object %>">
              <%= status.name %>
            <%= status.object %>
            </a>
          <image style="float:right;margin:5px -5px 0 0" src="\public\images\iphone\disclosure.png">
          </li>
     
      <% end %>
      <li>
  
    </li>
    </ul>
   
   
  </div>
 <script type="text/javascript">
      var theScroll;
       function scroll() {
        theScroll = new iScroll('wrapper');
      }
      document.addEventListener('DOMContentLoaded', scroll, false);
      </script>
</div>




var peepr= {};

peepr.noscroll = function() {
  event.preventDefault();
}

i can scroll but screen is moving up to the same position and after i add record  it  stuck till i refresh the page...
Maybe i forgot something?
Thanks.


2012/1/24 Jon Tara <jtara-g...@spamex.com>

--
You received this message because you are subscribed to the Google Groups "rhomobile" group.
To view this discussion on the web visit https://groups.google.com/d/msg/rhomobile/-/BhM7zeK5Sx4J.

Jon Tara

unread,
Jan 25, 2012, 12:04:41 AM1/25/12
to rhom...@googlegroups.com
Use the jquery.mobile.iscroll.js plugin for JQuery Mobile along with iscoll.js. It makes several necessary adjustments for making iScroll work with JQuery Mobiles. You can find it on GitHub.

If you add content inside the wrapper, you'll need to refresh both the JQuery Mobile List View and the iScroll plugin. Example from my application.js:

your_app.refresh_places_list = function() {
  $("ul.my_list", $.mobile.activePage).listview.refresh();
  $.mobile.activePage.data("iscroll-plugin").refresh();
  }

You probably want to change "peepr" to your app name. That's the name of my app. ;)

The second line above assumes you are using the jquery.mobile.iscroll.js plugin. For your existing code, you would use theScroll.refresh(), but I highly recommend using the plugin. At least look at what it does and apply that to your code.

Alexey Braginenko

unread,
Jan 25, 2012, 1:03:30 AM1/25/12
to rhom...@googlegroups.com
Hi Jon,
I added <script src="/public/jquery/jquery.mobile.iscroll.js" type="text/javascript"></script>

 <script src="/public/jquery/iscroll-lite.js" type="text/javascript"></script>

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

to layout then the all app are not load..

Can you post me full code example.

my mail id is alexey.braginenko@gmail.com

Thanks in advance.


2012/1/25 Jon Tara <jtara-g...@spamex.com>

--
You received this message because you are subscribed to the Google Groups "rhomobile" group.
To view this discussion on the web visit https://groups.google.com/d/msg/rhomobile/-/26fWFz1jD5kJ.

Jon Tara

unread,
Jan 29, 2012, 12:38:04 PM1/29/12
to rhom...@googlegroups.com
Don't load both iscroll.js and iscroll-lite.js. Pick one or the other.

Rob Roberts

unread,
Feb 12, 2012, 7:56:09 PM2/12/12
to rhomobile
I finally found a solution to the horizontal scrolling problem on
iPhone. The horizontal scrolling is occurring because the header div
has a 1 pixel border all the way around, which makes it 2 pixels too
wide for the viewport. The fix is to remove the left and right
borders, which you can do like this:

div.ui-header {
border-style: solid none;
}

This leaves the top and bottom borders but removes the left and right
ones. (If your header div has data-role="header", jQuery Mobile
automatically adds the ui-header class to it.)

I think the jQuery Mobile team anticipated and tried to handle this
problem, because I see that in jquery.mobile-1.0rc1.min.css there's a
css class for ui-header and ui-footer that has this:

border-left-width: 0;
border-right-width: 0;

Setting the left and right border widths to zero has the exact same
effect as setting the border styles to none, so this should have
worked. I'm guessing that it didn't work because a border style
wasn't set yet, and border width doesn't have any effect if a border
style hasn't been set.

Anyway, the solution above worked for me. All of the pages in my app
scroll vertically like they should, but are locked in place
horizontally.

--Rob Roberts

Alexey Braginenko

unread,
Feb 24, 2012, 5:03:06 AM2/24/12
to rhomobile
Are you using Iscroll now?

Rob Roberts

unread,
Feb 24, 2012, 11:07:56 AM2/24/12
to rhomobile
No, I am not using iScroll.

On Feb 24, 3:03 am, Alexey Braginenko <alexey.bragine...@gmail.com>
wrote:

Alexey Braginenko

unread,
Feb 26, 2012, 5:38:05 AM2/26/12
to rhom...@googlegroups.com
What you are using instead?
Thanks.

24 февраля 2012 г. 22:07 пользователь Rob Roberts <ro...@pcisys.net> написал:
--
You received this message because you are subscribed to the Google Groups "rhomobile" group.

Rob Roberts

unread,
Feb 26, 2012, 1:04:29 PM2/26/12
to rhomobile
I'm just using jQuery Mobile. I have the native tabbar at the bottom
as the footer (on the iPhone version anyway), but just the standard
Rhodes header at the top. So this makes the footer fixed but the
header scrolls along with the rest of the page. I've been meaning to
try iScroll to get the header to be fixed, but haven't gotten around
to it yet. Just a matter of priorities... :)

--Rob Roberts

On Feb 26, 3:38 am, Alexey Braginenko <alexey.bragine...@gmail.com>
wrote:
> What you are using instead?
> Thanks.
>
> 24 февраля 2012 г. 22:07 пользователь Rob Roberts <r...@pcisys.net> написал:
Reply all
Reply to author
Forward
0 new messages