This one is not for the kids at home. I will reward anyone who comes close to a solution. I have included a working example of what i want that u can use to try to fix the problem. This must work in a phonegap application on a iphone/android devices. What i want to do is simple. I want to be able to scroll vertical with the "text elements" i have in the containing div. When i touch the red images to the right then they can scroll horizontally. If i scroll the images sideways thats fine, but if i keep holding down the finger and scroll vertically nothing happens to the text elements. I want to be able to scroll the text elements vertically when i press the image-elements.. Please help me out on this one guys :)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#exerciseMenu{
height:600px;
overflow:scroll;
}
.scrollImages{
width: 100px;
height: 125px;
margin:10px 5px;
float:left;
background-color:red;
}
.headerWrapper{
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
width:200px;
height:157px;
}
.exerciseWrapper{
margin-top:5px;
margin-right:5px;
margin-left:5px;
position:relative;
border:5px solid black;
background-color:white;
height:157px;
}
.scrollWrapper {
position:absolute;
border-left:6px solid black;
right:0px;
top:0px;
padding-left:5px;
width:260px;
height:148px;
background:#aaa;
overflow-x:auto;
}
.scroller {
padding:0;
width:1000px;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').append('<div id="exerciseMenu"></div>');
for (var i=0;i<8;i++)
{
AppendMenuItems();
}
});
function AppendMenuItems(){
var menuu=$('#exerciseMenu').append('<div class="exerciseWrapper">TEXT<div class="scrollWrapper"><div class="scroller">'+
'<div class="scrollImages">Im</div>'+
'<div class="scrollImages">Im</div>'+
'<div class="scrollImages">Im</div>'+
'<div class="scrollImages">Im</div>'+
'<div class="scrollImages">Im</div>'+
'<div class="scrollImages">Im</div>'+
'<div class="scrollImages">Im</div>'+
'<div class="scrollImages">Im</div>'+
'</div></div></div></div>');
}
</script>
</head>
<body>
</body>
</html>
