Swiping in Web Pages using dragend.js

swiping in web pages

Swiping:

Swiping is the most expected technology implementation in web applications soon, since people are very familiar and very comfortable with swiping in mobiles and they are not liking much to click everything. Already top shopping and ticket booking systems are in the beta phase swiping web applications/web pages development to make their site more user interactive.

Today we are going to see how to implement swiping in web pages using dragend.js.

dragend js

 

Requirements:

1. jQuery JS

2. Dragend JS

3. Bootstrap CSS

demo
download

 

 

 

 

HTML Source code:

<div id="demo">
<ul>
<li class="first dragend-page">

<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">iPhone 4s [3.5 inch]</div>
<iframe width="320px" height="480px" style="margin-left:400px;" src="http://javadomain.in"></iframe>


</div>
</li>
<li class="dragend-page">

<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">iPhone 5,5S [4 inch]</div>
<iframe width="320px" height="568px" style="margin-left:400px;" src="http://javadomain.in"></iframe>

</div>
</li>



<li class="first dragend-page">
<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">iPhone 6 [4.7 inch]</div>
<iframe width="375px" height="667px" style="margin-left:350px;" src="http://javadomain.in"></iframe>

</div>
</li>
<li class="dragend-page">
<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">iPhone 6 Plus [5.5 inch]</div>
<iframe width="414px" height="736px" style="margin-left:350px;" src="http://javadomain.in"></iframe>

</div>
</li>
<li class="first dragend-page">
<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">iPad, iPad mini, iPad 2,iPad Air, iPad Mini Retina [9.7 inch]</div>
<iframe width="1024px" height="768px" style="margin-left:70px;" src="http://javadomain.in"></iframe>
</div>

</li>

<li class="dragend-page">
<div id="device">
<div id="note_info">Swipe from Left to Right or from Right to Left </div>
<div id="device_name">Desktop View </div>

<iframe width="1366px" height="768px" src="http://javadomain.in"></iframe>

</div>
</li>

</ul>
</div>

Each li is one web page and swiping in web pages┬ábetween the li’s.

 

Swiping in web pages Source Code:


Once the swiping ends then it will initialize to 0 to display the first li at the end of the last li swipe.

<script>

/*This function calls the first li after the last li again*/
/*if this function removed user can navigate only in one direction (left to right).*/
$(function() {

var firstChild = $("#demo li:first-child").clone(),
lastChild = $("#demo li:last-child").clone(),
container = $("#demo ul");

firstChild.appendTo(container);
lastChild.prependTo(container);

$("#demo").dragend({
jumpToPage: 2,
onSwipeEnd: function() {
var first = this.pages[0],
last = this.pages[this.pages.length - 1];

if (first === this.activeElement) {
this.jumpToPage(this.pages.length - 1 );
}

if (last === this.activeElement) {
this.jumpToPage(2);
}

},
afterInitialize: function() {
this.container.style.visibility = "visible";
}
});
});
</script>

 

 

967 total views, 1 views today

Leave a Reply

Your email address will not be published. Required fields are marked *