The script iScroll4 is triggered in this manner
$(document).ready(function() {
var myScroll;
myScroll = new iScroll('wrapper');
});
That however assumes there is an element with ID 'wrapper'. I would like to trigger this on all elements with the class name "scrollable". I have seen this done on a plugin for this script. Any ideas how to do it here?
You can assign a different ID with the same class "scrollable" and ...
$(document).ready(function() {
//Created an array for adding n iScroll objects
var myScroll = new Array();
$('.scrollable').each(function(){
id = $(this).attr('id');
myScroll.push(new iScroll(id));
});
});
I've answered that in Mobile Site: Lack of horizontal scrolling on iPhone
Using jQuery and iScroll, you could make the following:
HTML:
<html><head>
<title>Test</title>
<!-- include jquery and iscroll -->
</head><body>
<div id="divPretendingIsDeviceScreen" style="max-width:320px;overflow:hidden;">
<h1>Header</h1>
Lorem ipsum dolor sit amet.
<br/><br/>
<h2>Another header</h2>
text text:<br/>
<br/>
<div class="divToBeScrolled">
div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />
</div>
<h2>Another header</h2>
text text:<br/>
<br/>
<div class="divToBeScrolled">
div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />
</div>
<h2>Another header</h2>
text text:<br/>
<br/>
<div class="divToBeScrolled">
div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />
</div>
<h2>Another header</h2>
text text:<br/>
<br/>
<div class="divToBeScrolled">
div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />div to be scrolled yay <br />
</div>
<br/>
<br/>
Lorem ipsum dolor sit amet.
</div>
</body></html>
CSS:
<style type="text/css">
.scrollerType {
overflow:hidden;
max-height:200px;
/* put max height you want the scroller div to have,
normally less than the device's window size, like 200px or so so.*/
}
div.divToBeScrolled {
overflow:scroll;
display:block;
}
</style>
JS/jQUERY:
<script charset="utf-8" type="text/javascript">
var snippetName = new Array(); //creates a new array to make the var names for iscroll
var selfId = new Array(); //creates a new array to make the names for the scrollers
$('.syntaxhighlighter').each(function(index) { //for each '.syntaxhighlighter' and 'index' as counter
selfId[index] = 'scrollerId'+index; //creating a new id name for the container
$(this).wrap('<div id='+selfId[index]+' class="scrollerType" />'); //wrapping each '.syntaxhighlighter' with the container
var timeout = setTimeout(function(){ //yes, timeout. This to support Android mostly
snippetName[index] = new iScroll(selfId[index], { //initializing multiple iscroll's each with an index and targeting the selfId
//here you declare various options - see "Passing parameters to the iScroll" at iScroll page
//this is the best set, i think
snap: false,
momentum: true,
hScrollbar: false,
vScrollbar: false,
hScroll: true,
vScroll: true,
desktopCompatibility:true
}); //end new iScroll
},100); //100ms just bc 0ms or 1ms might not be enough
}); //end .each
</script>
This is the test-case ( http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572.html ) for the other question i've pointed out.
This is a 2 years old conversation to the time i am writting, still this conversation will stay here as long as StackOverflow still alive.
Through search engine i was linked to this conversation as i had similar issue.
However, none of these solve my issue.
In my own idea building on Franz idea you could easily acheive a perfect and simple solution like this:
var contentToScroll;
var idNum=1;
$('.scrollable').each(function(){
//e.g <li class="scrollable" id="conT1"> Contents</li>
//<li class="scrollable" id="conT2"> Contents</li> e.t.c
$(this).attr("id", 'conT'+idNum);//assign ids here
var id = $(this).attr('id');
idNum++;
contentToScroll=new IScroll('#'+id,{scrollbars: true});
});
Dynamically assign IDs to the expected scollable elements individually and tell the iScroll5 to make them scrollabile.
This may help someone