Re: iui-iscroll and iscroll in 0.4

[Sean Gilligan]

On 4/9/13 11:43 AM, microchipmatt wrote:
> Hello, I need some help, I am desperately trying, based on these examples:
> http://code.google.com/p/iui/wiki/iScrollExtension

I recommend you take a look at the recent thread in this group called
"iuiPad and msgilligan-iuiscroll repository" That should help.

-- Sean

[microchipmatt]

Hi shawn, thanks for your reply, okay I looked at the thread...all I really need is the top navigation bar to remain stationary like in a native app.  I have Remi and Matteo's test code working on my server, my only server, with 0.4 for what I currently need to do, my only problem is this, and I hope I explain this well.  All of the examples in the code are based around one object per page, with one block of text within tags, IE: 
One set of [ul] [/ul]  with a list inbetween, one block in a page
One [Fieldset] with a block of text, not several
But my initial page looks something like this:

    <div id="home" Title="OURAPP-2-GO" class="panel"  selected="true" class="iuiscroll">
     <fieldset>
      <center><img src="images/imagestrans.png">
    </fieldset>

      <fieldset>
      </center><p class="normalText"><b>Welcome to our mobile App!</b></p>
         </fieldset>


      <h2>Main Menu</h2>

       

      <ul>

        <li><a href="#aboutus">About Our School</a></li>
        <li><a href="#blablaname">Our Social</a></li>
        <li><a target="_blank" href="http://www.someurl.com/calendar">Our Calendar</a></li>
        <li><a target="_blank" href="http://www.bussystem.com">Our Busses</a></li>
      </ul>
     

     </div>

So the question of the week is, as you can see this div block constitues my main page/panel, and has a fieldset, and a list menu etc, so how to I, "WRAP" them all so that all of these items are contained with the right tags, so that the page can scroll, but the navigation menu stays stationary, as iscroll was designed to do within html5 code...I'm not an expert and since remi's code only contains a single item such as a panel with a fieldset, or one panel with a "ul" how do I do it, when the page contains several of this items...I hope this all makes sense, thanks for all your help in advance.

[Remi Grumeau]

Hi,

iUIScroll extension makes using iScroll a peace of cake for non-javascript skilled people.

Simple to implement comes at a prize: it makes the whole active panel scrollable. 

That's pretty much it.

So if you need to implement multiple scrollable DIVs or elements in iUI, then you have to do it by yourself from scratch i'm afraid.

Remi

--
You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to iphonewebdev...@googlegroups.com.
To post to this group, send email to iphone...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[microchipmatt]

Oh...thats too pad, I was hopeing to be mediocre to moderatly skilled, and still use your very LOVELY tool...Can you point me in a direction I have to go to impliment iscroll and multiple divs...I saw an example with a container...but it was somewhat beyond me...any help would be MUCH appreciated..I looked at icroll 4, but wasn't sure how to impliment it with iui....I tried and god some really bizarre formatting issue, I think thats why people modified the code to use class and container instead of id, but that's my limited understanding...

[microchipmatt]

Hello Remi, and others, based on my previous posts I hope you can help.  I have implimented the simple example of iscroll code within my code, and the scolling *is* sort of working, well, its working, but my formatting of course is now messed up...please see photo of what my page usually looks like, and what it looks like now:

As well, you can see in all photos, the FULL PAGE is NOT filled (I'm not yelling ha ha ha, I just wanted to empahsize).  In the example code, you can see the same issue, is there a simple formatting fix for this, that I can apply along with what I have to do with iscroll 4?  

Here is my code as well:

//Code Start//
<!DOCTYPE html>
<html>
<head>
<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 name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="icon" type="image/png" href="iui/iui-favicon.png">
<link rel="apple-touch-icon" href="iui/iui-logo-touch-icon.png" />
<link rel="stylesheet" href="iui/iui.css" type="text/css" />
<link rel="stylesheet" title="Default" href="iui/t/default/default-theme.css"  type="text/css"/>
<link rel="stylesheet" href="css/iui-panel-list.css" type="text/css" />
<title>Northern Lights School Division - 2- Go.</title>

<script type="text/javascript" src="iscroll.js"></script>
<script type="application/x-javascript" src="iui/iui.js"></script>
<script type="text/javascript">



var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper');
}

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

/* * * * * * * *
 *
 * Use this for high compatibility (iDevice + Android)
 *
 */
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
/*
 * * * * * * * */


/* * * * * * * *
 *
 * Use this for iDevice only
 *
 */
//document.addEventListener('DOMContentLoaded', loaded, false);
/*
 * * * * * * * */


/* * * * * * * *
 *
 * Use this if nothing else works
 *
 */
//window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false);
/*
 * * * * * * * */

</script>
<style type="text/css">
        .panel p.normalText { text-align: left;  padding: 0 10px 0 10px; }
         </style>

</head>
<body>

<div class="toolbar">
          <h1 id="pageTitle">NLSD-2-GO</h1>
          <a id="backButton" class="button" href="#"></a>

       </div>

    <div id="home" Title="NLSD-2-GO" class="panel"  selected="true">
     <div id="wrapper">
        <div id="scroller">
     <fieldset>
      <center><img src="images/nlsd2gonewtrans.png">
    </fieldset>

      <fieldset>
      </center><p class="normalText"><b>Welcome to the NLSD-2-GO Mobile App!</b></p>

         </fieldset>


      <h2>Main Menu</h2>

       

      <ul>

        <li><a href="#aboutnlsd">About NLSD. 69</a></li>
        <li><a href="#nlsd69social">Northern Lights Social</a></li>
        <li><a target="_blank" href="http://199.216.204.43/nlsd2go/googcal.html">Divsion Calendar</a></li>
        <li><a target="_blank" href="http://www.nlsdbus.ca">Bussing Schedule</a></li>
      </ul>
     
</div>
</div>
     </div>


        
         <div id="aboutnlsd" title="About" class="panel">
            <fieldset>
         </center><p class="normalText"><b>Northern light school division has a rich history BLA BLA BLA....</b></p>
            </fieldset>
         </div>


   
       <div id="nlsd69social" title="Social" class="panel" class="iuiscroll">
       
           
         <h2>Northern Lights Social</h2>
         <ul>
        <li><a href="#twitter">NLSD No. 69 Twitter</a></li>
        <li><a target="_blank" href="http://www.youtube.com/user/NLSDTV">NLSDTV - Youtube Channel</a></li>
        <li><a target="_blank" href="http://m.facebook.com/northernlights.sd">NLSD No. 69 - Facebook</a></li>
      </ul>

         </div>


         <div id="twitter" title="NLSD Twitter" class="panel">
     

      <!--I COMMENTED OUT THESE LINES BECAUSE I WASN'T SURE IF APPLE WAS GOING TO COMPLAIN ABOUT THEM.
      <fieldset>
      </center><p class="normalText"><b>Northern Lights School Division No. 69 - Twitter Feed</b></p>
         </fieldset>
      -->

      <fieldset>
         <a class="twitter-timeline"  href="https://twitter.com/NLSD69"  data-widget-id="321362014301724673">Tweets by @NLSD69</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      </fieldset>
      </div>



<!--COMMENT: This is the NLSD. 69 Page load within iUI, I don't think apple will want me to load it within the app, so I am am loading the mobile NLSDTV page directly, even
though it loads nicely in in APP browser-->

    <div id="nlsd69tv" title="NLSDTV-YOUTUBE" class="panel">
      <fieldset>
      </center><p class="normalText"><b>Northern Lights School Division No. 69 - NLSDTV Youtube Channel</b></p>
         </fieldset>

      <fieldset>
    <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/youtube.xml&up_channel=NLSDTV&synd=open&w=320&h=390&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
      </fieldset>
      </div>


<div id="footer"></div>

</body>
</html>
//Code End//

On Tuesday, April 9, 2013 12:43:16 PM UTC-6, microchipmatt wrote:

Hello, I need some help, I am desperately trying, based on these examples:
http://code.google.com/p/iui/wiki/iScrollExtension

and Mashable, to get iscroll working in my iui app.  I've done what I think need to be done, (Include all the .js files, reference the CSS files, added the div container, and the div class=wrapper/scroller, and it just doesn't work, I get really weird behavior, the page goes all white...Am I possible using an old iui-iscoll.js that is not compatible with 0.4..or am I using the wrong version of iscroll.js?  If there is really new versions of the code that I should be using somewhere, can someone show me please....any help is much appreciated.