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 (0)

.Net "Specified method is not supported." Error

by nolovelust 20. April 2011 16:13

I started to get this "Specified method is not supported." error quite a lot since I moved one of the sites to Windows 2008 R2 64bit.

Exact error something like below

 

 

Server Error in '/' Application.
Specified method is not supported. 
 Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

 Exception Details: System.NotSupportedException: Specified method is not supported.

Source Error: 
 An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below. 


Stack Trace: 

[NotSupportedException: Specified method is not supported.]
   System.Web.HttpResponseStream.get_Position() +29
   System.Drawing.ComStreamFromDataStream.Seek(Int64 offset, Int32 origin) +44

[HttpException (0x80004005): An error occurred while communicating with the remote host. The error code is 0x800703E3.]
   System.Web.Hosting.IIS7WorkerRequest.RaiseCommunicationError(Int32 result, Boolean throwOnDisconnect) +3049599
   System.Web.Hosting.IIS7WorkerRequest.ReadEntityCoreSync(Byte[] buffer, Int32 offset, Int32 size) +49
   System.Web.Hosting.IIS7WorkerRequest.ReadEntityBody(Byte[] buffer, Int32 size) +23
   System.Web.HttpRequest.GetEntireRawContent() +8920994
   System.Web.HttpRequest.GetMultipartContent() +68
   System.Web.HttpRequest.FillInFormCollection() +172
   System.Web.HttpRequest.get_Form() +68
   System.Web.HttpRequest.get_HasForm() +8921807
   System.Web.UI.Page.GetCollectionBasedOnMethod(Boolean dontReturnNull) +97
   System.Web.UI.Page.DeterminePostBackMode() +69
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +135



Above sample from a page where user submits multipart form data.

Same eror happens when user downlods file from a HttpHandler.

Actual error is quite confusing and as far as i understand it has nothing to do with System.Drawing but client disconnect during to upload proccess.

There is a bug report about I couldn't get any more info.

I have seen no side effects of this error and can say simply igonoring it is the current solution :)

Tags: , ,

ASP.NET | Useful

Permalink | Comments (0)

New "I just learned how to net $xxx in just about two days online" SCAM!

by nolovelust 20. April 2011 16:04

Did you receive an email saying

"I just learned how to net $186 in just about two days online. made it without effort at - x.co/xxx - youre going to be so much more happier!"

or smilar? 

First of all IT IS A SCAM! 

If you visit the page, you get redirected to article.news21nbc.com which looks like legit nbc site but it hosted in China!

Article preecets a screen capture from APERANTLY NBC but if you pay attention you'll see that it is French TV LC1 :)

Thats not it. All the comments and Facebook Likes on the article are fake too!

Don't be fooled.

Here is the screenshot of the site.

 

Tags: ,

Useful

Permalink | Comments (0)

Adverts

Welcome

Tag cloud

Month List