Menu
Please Help me to scroll fixed list item using iscroll. i am working on a project in which i want to scroll three LIST Item on one time scroll using iscroller. I allready tryed to scroll with scrollTo, ScrollToPage, ScrollToElement function of iscroller but it didn't work for me so please help me to scroll the fixed length item on one time user scroll.I am working on android project and i am using iscroll4 to scroll the element.
My Cade Is Like This...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.span8{
position: absolute;
width:630px;
height:100px;
overflow:auto;
}
.menu{
float:left;
width:200px;
height:100px;
background-color:red;
margin-left:10px;
}
#scroller{
width:3000px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/libs/iscroll.js" type="text/javascript"></script>
<script>
var isScrolling = false;
myScroll = new iScroll('headerWrapper',{
snap: 'li',ome Wor
hScrollbar: false,
vScrollbar: false ,
momentum: true,
vScroll: false,
onScrollMove : function(e){
// clearHeaderInterval();
// myScroll.scrollTo(50, 0);
// myScroll.refresh();
console.log('onScrollMove===============>>>>>>>>>>>>>');
isScrolling = true;
// here get the device type and version
if(deviceType() == 'android'){
var deviceVersion = device.version;
console.log(" deviceType is ===>>"+deviceVersion);
if(deviceVersion=='4.1' || deviceVersion=='4.1.1'|| deviceVersion=='4.1.2'){
console.log("android version is ===>>"+deviceVersion);
setTimeout(function(){
myScroll.refresh(); }, 1000);
}
}
// setTimeout(function(){myScroll.refresh();},0);
},
});
</script>
</head>
<body>
<div class="span8 marginleft mid-menu-panel" id="headerWrapper">
<div id="scroller">
<ul id="tabitems">
<li class="dropdown-toggle menu click_h" id="home">
Home
</li>
<li class="dropdown-toggle menu click_h" id="word" >
Word
</li>
<li class="dropdown-toggle menu click_h" id="sentences">
Sentence
</li>
<li class="dropdown-toggle menu click_h" id="icon">
Icon
</li>
<li class="dropdown-toggle menu click_h" id="question">
Question
</li>
<!--<li class="dropdown-toggle menu click_h" id="write_words">-->
<!--Write-->
<!--</li>-->
<li class="dropdown-toggle menu click_h" id="level" >
Level
</li>
<li class="dropdown-toggle menu click_h" id="config/" >
Configuration
<li class="dropdown-toggle menu click_h" id="info" >
Info
</li>
</li>
<li class="dropdown-toggle menu click_h" id="website">
Web Services
</li>
<li class="dropdown-toggle menu click_h" id="help" >
Help
</li>
<!--td width="20">
<div class="buttons next">
<button class="btn btn-large right_arrow" type="button">
<i class="icon_right_arrow"></i>
</button>
</div></td-->
</ul>
</div>
</div>
</body>
</html>
514
If im getting it correctly, you want to snap every 3rd item in the iscroll window.
I can't think of any elegant way to do this ( not sure if there is an option that allows to set number of elements to ignore before snapping )
But you could ( depending on how flexible you are with modifying the markup a bit ) move those three elements as child of every "li".
Heres the link to js fiddle ( http://jsfiddle.net/QFz3L/1/ )
HTML/CSS/JS below.
There isnt much difference in CSS and JS, Just some alterations to HTML
HTML:
<div class="span8 marginleft mid-menu-panel" id="headerWrapper">
<ul id="scroller">
<li class="menu">
<div>block 1</div>
<div class="cf">
<div class="span3">
item 1
</div>
<div class="span3">
item 2
</div>
<div class="span3">
item 3
</div>
</div>
</li>
<li class="menu">
<div>block 2</div>
<div class="cf">
<div class="span3">
item 4
</div>
<div class="span3">
item 5
</div>
<div class="span3">
item 6
</div>
</div>
</li>
<li class="menu">
<div>block 3</div>
<div class="cf">
<div class="span3">
item 7
</div>
<div class="span3">
item 8
</div>
<div class="span3">
item 9
</div>
</div>
</li>
</ul>
</div>
CSS:
.cf {
overflow:hidden;
}
.span3 {
float:left;
height:100px;
background:green;
width:210px;
}
.span8{
position: absolute;
width:630px;
height:100px;
}
.menu{
float:left;
width:630px; /* same as parent( .span8 ) to make sure only 1 .menu is visible ofc */
height:100px;
background-color:red;
}
#scroller{
width:1890px; /* total width of children, 630 * 3 */
overflow:hidden;
list-style:none;
padding:0;
margin:0;
}
JS:
myScroll = new iScroll('headerWrapper',{
snap: 'li',
hScrollbar: false,
vScrollbar: false ,
momentum: true,
vScroll: false
});
Hope that helps.
Cheers Varinder
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
