Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Posts: 2
Registered: ‎09-19-2013
My Device: no mobile
My Carrier: no mobile
Accepted Solution

Horizontal scrolling as well vertical scrolling

[ Edited ]

I want to implement some thing like this

slider

For doing the same I search and found this one http://developingwithstyle.blogspot.co.uk/2010/11/jquery-mobile-swipe-up-down-left-right.html But the code written in this blog does not make sense to me.

I also downloaded the demo provided at http://www.idangero.us/sliders/swiper/ and try to modified according to my need. But could not able to do the same. If any one have Idea or ling or demo project then please help me. Regards!

 

 

A similler Question can be found here http://stackoverflow.com/questions/20565126/horizontal-scrolling-and-vertical-scrolling-in-jquerymob...

Retired
Posts: 1,561
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: Horizontal scrolling as well vertical scrolling

Hi there, this isn't necessarily a jQuery solution as it can be done with the correct CSS styling. I was able to produce the effect you noted with the following index.html.

 

<!DOCTYPE html>
<html>
	<head>
		<title>Scrolling</title>
		<style type="text/css">
			html, body {
				position: fixed;
				left: 0px; right: 0px; top: 0px; bottom: 0px;
				overflow: hidden;
			}

			#container {
				border: 0px; margin: 0px; padding: 0px;
				height: 100%;
				overflow-x: hidden;
				width: 100%;
			}

			.verticalScroll {
				overflow-y: scroll;
				-webkit-overflow-scrolling: -blackberry-touch;
			}

			.horizontalScroll {
				width: 100%;
				font-size: 24px;
				overflow-x: scroll;
				-webkit-overflow-scrolling: -blackberry-touch;
			}

			.content {
				height: 100%;
				width: 150%;
			}
		</style>
	</head>
	<body>
		<div id="container" class="verticalScroll">
			<div class="horizontalScroll"><div class="content">Content goes here.</div></div>
			<div class="horizontalScroll"><div class="content">Content goes here.</div></div>
			<div class="horizontalScroll"><div class="content">Content goes here.</div></div>
			<div class="horizontalScroll"><div class="content">Content goes here.</div></div>
			<div class="horizontalScroll"><div class="content">Content goes here.</div></div>
			<div class="horizontalScroll"><div class="content">Content goes here.</div></div>
			<div class="horizontalScroll"><div class="content">Content goes here.</div></div>
			<div class="horizontalScroll"><div class="content">Content goes here.</div></div>
			<div class="horizontalScroll"><div class="content">Content goes here.</div></div>
			<div class="horizontalScroll"><div class="content">Content goes here.</div></div>
		</div>
	</body>
</html>

 

For the Content goes here. piece, I borrowed paragraphs from tastiest of text generators:

http://baconipsum.com/?paras=20&type=all-meat&start-with-lorem=1

 

With the above, I had a series of <div> elements that I could scroll through vertically, and then scroll each one individually, horizontally.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
New Developer
Posts: 12
Registered: ‎06-17-2013
My Device: Blackberry 9800
My Carrier: Reliance

Re: Horizontal scrolling as well vertical scrolling

Hi,

Use Iscroll 4 for scrolling in both horizontal and Vertical. You can lock One, either horizontal or vertical.
Thanks & Regards,
Nitish
Blackberry and PhoneGap Developer

------------------------------------------------------------------------------------------------
- If a post contains the solution to the problem, please click "Accept as Solution"
- If a post contains helpful content, please give it a "Thumbs Up"