Ajax load with swipe gesture on touch screen phones

by nolovelust 21. July 2011 15:26

There is a nice jQuery plugin called TouchWipe to obtain touch gestures from iPhone, iPod Touch and iPad and Android phones. Simple example below shows how to trigger an ajax load with left or right swipe on certain element

<!DOCTYPE html>
<html>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="http://www.netcu.de/templates/netcu/js/jquery.touchwipe.min.js"  type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#list").touchwipe({
                wipeLeft: function () { loadData(); },
                wipeRight: function () { loadData(); },
                preventDefaultEvents: true
            });
        });  
		
		function loadData() {
		$.ajax({
			type: "GET",
			url: "AjaxLoad.htm",
			dataType: "html",
			success: function (result) { $('#listul').html(result); },
			error: function (err) {  }
		});
	}

    </script>
</head>
<body>
<div id="list" class="list" title="Swipe your finger left or right on the thumbnails below to load next set video set.">
<ul id="listul"></ul>
</div>
</body>
</html>

Tags: , , , , , , ,

Mobile web | Useful

Permalink | Comments (0)

jQuery Higlight items that are more than one in a list

by nolovelust 13. May 2011 14:16

For a website I needed to highlight items in a list that are more than one. Let me explain with an example. Here is a sample list.

<li id="s0" class="list">
    <div>
    <div class="left">
    <b>(3)</b> <span id="ip0"><b>121.1.18.241</b></span> <img src="/assets/flags/PH.png" alt="*" title="Philippines"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s0','121.1.18.241',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua0" class="small">Mozilla/5.0 (SymbianOS/9.4; U; Series60/5.0 Nokia5800d-1/21.0.025; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413</span>
  </li>

   <li id="s1" class="list darklist">
    <div>
    <div class="left">
    <b>(2)</b> <span id="ip1"><b>115.69.159.213</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s1','115.69.159.213',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua1" class="small">NokiaX2-00/5.0 (04.90) Profile/MIDP-2.1 Configuration/CLDC-1.1</span>
  </li>

   <li id="s2" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip2"><b>115.69.159.213</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s2','115.69.159.213',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua2" class="small">sonyericssonk550i/UC Browser7.6.1.82/70/351</span>
  </li>

   <li id="s3" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip3"><b>115.69.159.213</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s3','115.69.159.213',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua3" class="small">Nokia2700c-2/2.0 (09.95) Profile/MIDP-2.1 Configuration/CLDC-1.1</span>
  </li>

   <li id="s4" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip4"><b>115.246.149.87</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s4','115.246.149.87',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua4" class="small">SAMSUNG-GT-C3303/C3303DDJG4 NetFront/3.5 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
  </li>

   <li id="s5" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip5"><b>114.127.246.46</b></span> <img src="/assets/flags/ID.png" alt="*" title="Indonesia"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s5','114.127.246.46',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua5" class="small">Nokia6680/1.0 (4.04.07) SymbianOS/8.0 Series60/2.6 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
  </li>

   <li id="s6" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip6"><b>114.127.246.39</b></span> <img src="/assets/flags/ID.png" alt="*" title="Indonesia"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s6','114.127.246.39',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua6" class="small">NokiaN70-1/5.0737.3.0.1 Series60/2.8 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
  </li>

   <li id="s7" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip7"><b>114.127.246.100</b></span> <img src="/assets/flags/ID.png" alt="*" title="Indonesia"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s7','114.127.246.100',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua7" class="small">Nokia5310XpressMusic/2.0 (05.81) Profile/MIDP-2.1 Configuration/CLDC-1.1</span>
  </li>

   <li id="s8" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip8"><b>113.210.127.216</b></span> <img src="/assets/flags/MY.png" alt="*" title="Malaysia"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s8','113.210.127.216',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua8" class="small">Mozilla/5.0 (SymbianOS/9.3; Series60/3.2 NokiaE72-1/031.023; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/525 (KHTML, like Gecko) Version/3.0 BrowserNG/7.2.3.1</span>
  </li>

   <li id="s9" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip9"><b>112.205.22.54</b></span> <img src="/assets/flags/PH.png" alt="*" title="Philippines"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s9','112.205.22.54',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua9" class="small">Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaC6-00/10.0.021; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.2.6 3gpp-gba</span>
  </li>

   <li id="s10" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip10"><b>112.198.77.222</b></span> <img src="/assets/flags/PH.png" alt="*" title="Philippines"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s10','112.198.77.222',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua10" class="small">NokiaN73</span>
  </li>

   <li id="s11" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip11"><b>110.227.164.156</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s11','110.227.164.156',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua11" class="small">Mozilla/5.0 (SymbianOS/9.3; Series60/3.2 NokiaC5-00/032.010; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/525 (KHTML, like Gecko) Version/3.0 BrowserNG/7.2.5.2</span>
  </li>

   <li id="s12" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip12"><b>110.225.99.28</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s12','110.225.99.28',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua12" class="small">Mozilla/5.0 (SymbianOS/9.4; U; Series60/5.0 Nokia5800d-1/20.0.012; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413</span>
  </li>

   <li id="s13" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip13"><b>110.224.223.59</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s13','110.224.223.59',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua13" class="small">LG-GS290/V100 Obigo/WAP2.0 Profile/MIDP-2.1 Configuration/CLDC-1.1 UNTRUSTED/1.0 lg-gs290</span>
  </li>

   <li id="s14" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip14"><b>1.38.14.4</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s14','1.38.14.4',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua14" class="small">SAMSUNG-GT-B5310/B5310DDIK5 SHP/VPP/R5 Dolfin/1.5 Nextreaming SMM-MMS/1.2.0 profile/MIDP-2.1 configuration/CLDC-1.1</span>
  </li>

   <li id="s15" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip15"><b>1.38.14.3</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s15','1.38.14.3',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua15" class="small">SAMSUNG-GT-S5620/S5620DDJC2 SHP/VPP/R5 Dolfin/1.5 Nextreaming SMM-MMS/1.2.0 profile/MIDP-2.1 configuration/CLDC-1.1</span>
  </li>

   <li id="s16" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip16"><b>1.38.14.3</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s16','1.38.14.3',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua16" class="small">NokiaN70-1/5.0638.3.0.1 Series60/2.8 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
  </li>

   <li id="s17" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip17"><b>1.38.14.3</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s17','1.38.14.3',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua17" class="small">Nokia3600slide/2.0 (04.86) Profile/MIDP-2.1 Configuration/CLDC-1.1</span>
  </li>

   <li id="s18" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip18"><b>1.38.13.4</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s18','1.38.13.4',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua18" class="small">LG-GB270 Obigo/WAP2.0 MIDP-2.0/CLDC-1.1</span>
  </li>

   <li id="s19" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip19"><b>1.38.13.3</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s19','1.38.13.3',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua19" class="small">SAMSUNG-GT-S5620/S5620DDJC2 SHP/VPP/R5 Dolfin/1.5 Nextreaming SMM-MMS/1.2.0 profile/MIDP-2.1 configuration/CLDC-1.1</span>
  </li>

</ul>

 

 

In above list IP 1.38.14.3 occurred 3 times and user agent SAMSUNG-GT-S5620/S5620DDJC2 SHP/VPP/R5 Dolfin/1.5 Nextreaming SMM-MMS/1.2.0 profile/MIDP-2.1 configuration/CLDC-1.1

appeared 2 time. I wanted to have them highlighted with different colour so that every occurrence of   IP 1.38.14.3  would have same highlight colour and so on.

After few tries I've ended up with below script. I hope it would help you too.

 

First css

 

.i2
{
    background: #FF0000;
    color: #fff;
}
.i3
{
    background: #660000;
    color: #fff;
}
.i4
{
    background: #5757FF;
}
.i5
{
    background: #336600;
}
.i6
{
    background: #000000;
    color: #fff;
}
.u2
{
    background: #7BCAE1;
}
.u3
{
    background: #B89AFE;
}
.u4
{
    background: #FF00FF;
    color: #fff;
}
.u5
{
    background: #9900FF;
    color: #fff;
}
.u6
{
    background: #0000FF;
    color: #fff;
}

 

Then JavaScript

 

// count function
function countElement(item, array) {
    var count = 0;
    $.each(array, function (i, v) {
        if (v === item) {
            count++;
        }
    });
    return count;
}
$(document).ready(function () {
    // create array from ips in the list
    ipList = [];
    uaList = [];
    $('li.list').each(function (i) {
        var spans = $(this).find('span');
        spans[0] = $(spans[0]);
        spans[1] = $(spans[1]);
        ipList[i] = spans[0].text();
        uaList[i] = spans[1].text();
    });
    // check how many for each ip
    $('li.list').each(function (i) {
        var spans = $(this).find('span');
        spans[0] = $(spans[0]);
        spans[1] = $(spans[1]);
        var ipText = $(spans[0]).text();
        var uaText = $(spans[1]).text();
        var count = countElement(ipText, ipList);
        //if more than one update class of span
        if (count > 1) {
            spans[0].addClass('i' + count);
        }
        var countua = countElement(uaText, uaList);
        //if more than one update class of span
        if (countua > 1) {
            spans[1].addClass('u' + countua);
        }
    });
});

 

 

Tags: , ,

Useful

Permalink | Comments (0)

Display and Hide Ajax loading icon on every ajax request with jQuery

by nolovelust 28. April 2011 10:28

I've had my eureka moment while viewing source of a site last night.

I usually create a show and hide functions and call them with ajax.load function. But last nigh I've realised I could just listen ajaxStart and Stop events. Well It may be normal way of life for you but it never came to my mind. Anyways, here is the code to listen start/stop events and show/hide loading animation with jQuery

$(document).ready(function () {
    $(document).ajaxStart(function () { showProgress() }).ajaxStop(function () { hideProgress() });
});
function showProgress() {
    $('body').append('<div id="progress"><img src="/assets/images/loading.gif" alt="" width="16" height="11" /> Loading...</div>');
    $('#progress').center();
}
function hideProgress() {
    $('#progress').remove();
}
jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    return this;
}

Tags: , , , ,

Useful

Permalink | Comments (1)

jQuery infinite scrolling like twitter that loads data as you scroll down

by nolovelust 9. February 2011 12:21

To create a simple infinite scrolling / paging with jQuery like on Twitter that loads data as you scroll down, all you need is to copy couple of lines of code below.

Code finds scrolling position and triggers your load function. You don't need any plugin at all. Here is the sample:

 

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
	$(window).scroll(function () {
		if ($(window).scrollTop() == $(document).height() - $(window).height()) {
			$('#morepages').trigger("click");
		}
	});
function loadBookmarksAddToLi(folderId, startRow) {
	showProgress();
	$.get('AjaxListBookmarks.aspx?folderId=' + folderId + '&startRow=' + startRow , function (data) { appendData(data) });
	$("li[rel^='moreli']").remove();
}
</sript>

<ul>
<li><a href="http://foo-domain.com">foo</a></li>
<li id="moreli" rel="moreli0"><a href="#" id="morepages" onclick="loadBookmarksAddToLi(0,0); return false;">More</a></li>
</ul>

Tags: , ,

Permalink | Comments (2)

override javascript alert with jquery

by nolovelust 19. December 2010 13:38

Sample One

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<style type='text/css'>
#popup{
display: none;
position: absolute;
left: 100px;
top: 100px;
background-color: #ffffdd;
border: 1px solid #888;
padding: 5px;
cursor: pointer;
}

#title{
font-weight: bold;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$(document).ready(function() {

$("a").click(function(evt) {
var title = $(this).data('title');
var msg = $(this).data('msg');
var top = evt.pageY + 3;
var left = evt.pageX + 3;
showPopup(top, left, title, msg);
});

$("#popup").click(function() {
$(this).hide();
});

});

function showPopup(top, left, title, msg) {
$("#title").html(title);
$("#msg").html(msg);
$("#popup").css({
top: top,
left: left
}).show();

}
});
//]]>
</script>

</head>
<body>
<a href='#' data-title='Alert' data-msg='This is my message'>alert</a>
<div id="popup">
<div id="title"></div>
<div id="msg"></div>
</div>

</body>
</html>

 Sample Two

<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script>window.alert = function() {
jQuery('<div></div>', { html: arguments[0].replace(/\n/, "<br />") }).dialog({title:'Alert'});
};</script>
<title>Test Page</title>
</head>
<body>
<a href="#" onclick="alert('test');return false;">Custom Alert</a>

</body>
</html>

 

from http://stackoverflow.com/questions/4483088/can-jquery-replace-default-javascript-alert-or-confirm/

Tags: , , ,

Useful

Permalink | Comments (0)

Tag cloud

Month List