Explanation of page scrolling ??? Please???

Discussions about Mainlobby running on Apple mobile devices.
edentel
Member
Member
Posts: 93
Joined: Sat Mar 19, 2005 2:17 pm
Contact:

Explanation of page scrolling ??? Please???

Postby edentel » Fri Feb 11, 2011 10:40 pm

I'm working on adding a Russound mixer to the default iPhone layout and I need to implement page scrolling like found in the "Lighting-Room1.html" page. I've spent a couple hours trying to figure it out and I'm baffled. I *THOUGHT* the scrolling was implemented by:

including iscroll
<script src="javascript/iscroll.js?v3.6" type="text/javascript"></script>

defining a variable
var myScroll;

adding an eventlistener
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

defining myscroll in the startupmacro()
myScroll = new iScroll('scroller', {desktopCompatibility:true});

and then placing all of the content in
<div id="wrapper">
<div id="scroller">

When I do this I get a half-working result. The page scrolls and snaps back upon release. No scrollbar appears on the right side of the screen.

Ok so I go back to Lighting-Room1.html and try to work backwards. I figure if I remove the sliders I'll end up with a screen with grouping titles I can insert my layouts into. I go ahead and delete the first slider by removing the block of code:
<div class="sliderbase"...
<img id="slider1"...
<img id="slider1handle"...
<span id="ml__mllighting_1_level"...
<span onclick="doCommand...
<span onclick="doCommand...

When I load that page I get something very similar in result to my first attempt with non-functioning scrolling and no slider. I don't think I removed anything associated with the page scroll but apparently I'm painfully wrong.

Can anyone point out what I'm doing wrong here?!!??!??!?! Going a bit batty...

Thanks for any pointers,
-Ed

bigDvette
Expert
Expert
Posts: 718
Joined: Thu Oct 12, 2006 12:19 pm
Contact:

Re: Explanation of page scrolling ??? Please???

Postby bigDvette » Sat Feb 12, 2011 10:41 am

The one thing you will find out quickly is that iScroll works by figuring out you viewport area or the fixed area of the containing div and then taking the content and figuring out how many sections to break it in to.

You should look here for info on iScroll http://cubiq.org/iscroll

Here is one of my examples for my swipeable map images on my weather screen.

Here is the HTML
<div id="weatherMap">
<div id="swipeMap"><img id="mlimg1_mlweather_map_4_url" src="{{mlweather_map_4_url}}"/><img id="mlimg1_mlweather_map_3_url"
src="{{mlweather_map_3_url}}"/><img src="{{mlweather_map_1_url}}" id="mlimg1_mlweather_map_1_url"/><img id="mlimg1_mlweather_map_2_url"
src="{{mlweather_map_2_url}}"/><img id="mlimg1_mlweather_map_5_url" src="{{mlweather_map_5_url}}"/><img id="mlimg1_mlweather_map_6_url"
src="{{mlweather_map_6_url}}"/><img id="mlimg1_mlweather_map_7_url" src="{{mlweather_map_7_url}}"/><img id="mlimg1_mlweather_map_8_url"
src="{{mlweather_map_8_url}}"/></div>
</div>

weatherMap is equal you your wrapper div and swipeMap is equal to your scroller div.

Here is my declaration for the scroller

var weatherScroll = new iScroll('swipeMap', { snap:true, momentum:false, hScrollbar:false, vScrollbar:false });

And as you will see I am using fixed container size for the wrapper and the scroller div. The scroller div has some multiple of the wrapper div. When I use it this way I never have any bad behavior.

#weatherMap {
position:relative;
display:block;
float:left;
height: 200px;
width: 310px;
overflow:hidden;
margin-right:0px;
margin-bottom:5px;
}

#swipeMap{
position:relative;
margin:0px;
padding:0px;
height: 200px;
width: 2480px;
overflow:hidden;
}

Hope this example helps!

Clever1
Senior Member
Senior Member
Posts: 220
Joined: Mon Jan 14, 2008 10:31 am
Location: Huntsville, AL.
Contact:

Re: Explanation of page scrolling ??? Please???

Postby Clever1 » Tue Feb 22, 2011 3:57 pm

Because bigDvette is right in that iScroll needs an estimate as to the size of the view port area I have found that in order for the scroll to work correctly you will need to add as a series of: "<p>&nbsp;</p>" entries as the last items within your scroller div id so that iScroll has an estimate as to the required size of the view port to allow scrolling.

I have a series of several "<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>" in most of my pages that require scrolling...


Return to “MainLobby on iPhone, iPod Touch”

Who is online

Users browsing this forum: No registered users and 1 guest