Geek Answers Handbook

How to handle multiple DOM elements using iScroll (when using jQTouch)

I have my markup as

<div id="home" class="current">
    <div class="header">iScroll</div>
    <div class="wrapper">
        <div id="scroller">
            <ul id="thelist" class="plastic"><!-- li items --></ul>
        </div>
    </div>
    <div class="footer">Footer</div>
</div>   
    <!-- Events Details -->
<div id="events">
    <div class="header">iScroll</div>
    <div class="wrapper">
        <div id="scroller"> <!-- stuffsss --></div>
    </div>
    <div class="footer">Footer</div>
</div>

For iScroll to work (http://cubiq.org/iscroll) I need an identifier #scrolleras an ID (according to the javascript code that I use to initialize iScroll.

//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);

But since I cannot have two different elements with the same identifier (note that I have two elements with the same ID scroller in my markup above), there are some conflicts, and iScroll does not work correctly.

I want to be able to implement iScroll in markup by changing id as classes. I tried changing them to classes and see if this worked, but I could not figure it out.

Can someone help me change the codes so that it works by implementing classes instead of id?

+4
3

, , . , :

var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
+4

, , , , , iScrolls .

+2

, , , ( ) .

fooobar.com/questions/1108348/...

( div)

<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div> 
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>

Note. Remember to assign the same identifier to multiple elements, always use classes for this purpose.

0
source

More articles:


All Articles