Today we learn how to make a 'scrollable newstape' using scroller plugin which help user to scroll a list of news with support of some events i.e mouse wheel, mouse drag.
Example :
HTML Code :
<Html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="../jquery.newstape.js"></script>
<script src="../assets/jquery.event.drag.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function() {
$('.newstape').newstape();
});
</script>
<div id="jquery-script-menu">
<div id="wrapper" style="margin-top:150px;">
<div class="newstape">
<div class="newstape-content">
<div class="news-block">
<h3>Lorem ipsum</h3>
<small>13.04.2015</small>
<p class="text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
</p>
<div class="text-right">
<a href="#">More</a>
</div>
<hr />
</div>
<div class="news-block">
<h3>Ut enim ad</h3>
<small>13.04.2015</small>
<p class="text-justify">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...
</p>
<div class="text-right">
<a href="#">More</a>
</div>
<hr />
</div>
</div>
</div>
</div>
In above html code i have load the juery plugin i.e. 'newstape' and jquery library file (it must be present) .
Then i have included dram.min.js file this file help the users to drag the news i.e users can visit any news.
Css Code :
.newstape a { color: #F5F7FA; }
#wrapper {
width: 450px;
margin: 0 auto;
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.newstape {
background-color: #3BB0D6;
color: #fff;
height: 400px;
overflow: hidden;
}
.newstape-content {
position: relative;
padding: 15px;
}
In above css file i have set the width of wrapper and it appear at the center with respect to the window and newstape will appear with blue background color with fixed height and other content will be hidden.
0 Comment(s)