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
dineshchandra
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...

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,557
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.
Please use plain text.
New Developer
Nitish_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"
Please use plain text.