Introduction
In this article we will see how to scroll our page content in the same manner as scrolling in touch screen mobile devices like iPhones. All of you are already aware of scrolling content in mobile devices by finger; such kind of script I'll show you here, how you can achieve this using j-query mobile.
For scrolling the page content I'm using MVC4 and the j-query mobile. You can read more about MVC4 and j-query mobile here. I'm creating this application for our desktop website, not for mobile and to do it I'm using the j-query mobile. So let's get started here.
Step 1:
First you need to download the j-query mobile from here. After downloading j-query mobile, copy the scripts listed below and css files to your server directory.
-
jquery.mobile-1.0.1.min.css
-
jquery.mobile.scrollview.css
-
jqm-docs.css
-
jquery.js
-
jquery.mobile-1.0.1.min.js
-
jquery.easing.1.3.js
-
jquery.mobile.scrollview.js
-
scrollview.js
-
jqm-docs.js
Step 2:
After you have copied all the files and css, add the references to them in your page head section like below.
<link href="../../Srollerjscss/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css" />
<link href="../../Srollerjscss/jquery.mobile.scrollview.css" rel="stylesheet" type="text/css" />
<link href="../../Srollerjscss/jqm-docs.css" rel="stylesheet" type="text/css" />
<script src="../../Srollerjscss/jquery.js" type="text/javascript"></script>
<script src="../../Srollerjscss/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<script src="../../Srollerjscss/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="../../Srollerjscss/jquery.mobile.scrollview.js" type="text/javascript"></script>
<script src="../../Srollerjscss/scrollview.js" type="text/javascript"></script>
<script src="../../Srollerjscss/jqm-docs.js" type="text/javascript"></script>
Step 3:
Now copy and paste the following style in the same head section of your aspx page.
<style>
.ui-content.ui-scrollview-clip {
padding: 0;
}
.ui-content.ui-scrollview-clip > div.ui-scrollview-view {
margin: 0;
padding: 15px;
}
.ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
margin: 0;
}
.square {
width: 98px;
height: 98px;
border: solid 1px #333;
text-align: center;
line-height: 100px;
font-size: 60px;
}
.ui-scrollview-clip .ui-scrollview-clip .square {
background-color: #3CF;
}
.ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
background-color: #F39;
}
.ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
background-color: #0F6;
}
.ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .ui-scrollview-clip .square {
background-color: #FF6;
}
.threeByThree {
border: solid 1px black;
background-color: #999;
overflow: hidden;
width: 300px;
height: 300px;
}
.vertical
{
border: solid 1px black;
background-color: #999;
overflow: hidden;
width: 100px;
height: 200px;
}
.threeByThree > .ui-scrollview-view {
width: 1300px;
background-color: white;
}
.threeByThree .square {
float: left;
}
</style>
Step 4:
New create your body structure by creating some div's like below. Here you have one more option for your div i.e. data-role (page, header or content).
<div data-role="page">your sub div will go here</div>
In the above line we created a simple div tag having a data-role as page. Now create a sub div inside this div like header div and then the div which contains your content by specifiying data-role as content like below:
<div data-role="header">Header what you want</div>
Now create the div with data-role as a content like below.
<div data-role="content">your content div will go here</div>
Step 5:
Still we are at start-up only; now we will move to our actual content div structure so let's see the following code which you can write under content div.
<div data-role="content">
<div data-scroll="x" class="threeByThree">
<div class="square">C</div>
<div class="square">-</div>
<div class="square">S</div>
<div class="square">H</div>
<div class="square">R</div>
<div class="square">P</div>
<div class="square">C</div>
<div class="square">O</div>
<div class="square">R</div>
<div class="square">N</div>
<div class="square">E</div>
<div class="square">R</div>
</div>--End of scrolling div
</div>---End of content div
In the above lines we have created one content div and under that we have created a sub div having one more new attribute called data-scroll with x specifying the horizontal scrolling of the contents. In that we have created sub divs which contains only single characters as C-SHARPCORNER; this div will scroll our content horizontally; if you want it to scroll vertically then set the data-scroll to 'y'.
Step 6:
Now run you application and scroll the content by dragging your mouse.
Conclusion
In this way we can create the scrollable content for our website using j-query mobile.