Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts
Thursday, January 13, 2011
Friday, December 12, 2008
AJAX PHP CAPTCHA
Thanks for http://www.phpcaptcha.org/documentation/quickstart/ provide a cool php captcha code. One of my colleague supporting a php site which need CAPTCHA to prevent spamming but most of the example given needed page post back which is not so practical. I have implement an AJAX CAPTCHA for ASP in my previous post on AJAX ASP CAPTCHA.
Now, we are using the same method to implement in PHP. By reuse the same javascript code with jquery, there is only a small changes in PHP part. Within 20 minutes, the code done and tested working. The files available for download here.
Happy programming. Please let me know if you have any problem.
Now, we are using the same method to implement in PHP. By reuse the same javascript code with jquery, there is only a small changes in PHP part. Within 20 minutes, the code done and tested working. The files available for download here.
Happy programming. Please let me know if you have any problem.
Tuesday, November 18, 2008
Classic ASP CAPTCHA with JQuery Cross domain AJAX
It come to the point that i need to maintain my old application which written in ASP. I was asked to add a new feature in form submission to prevent from spamming. CAPTCHA is the thing that i could thought of. Thanks Emir Tüzül who willing to share his ASP CAPTCHA. You can download it from http://www.tipstricks.org/ .
I downloaded the code and modify the code so that the security checking is before the asp postback. The solution i could thought of is AJAX. When i thought of javascript, the coolest javascript framework will be JQuery.
The decision is go for JQuery in order to perform Ajax with ASP.
There is one concern, the application will need to perform cross domain ajax. If use normal jquery ajax (code below), it will work if all the file reside in the same domain but not when cross domain. Error : Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "" data: no] will be displayed.
var html = $.ajax({
url: "/captcha.asp?validateCaptchaCode=" + $("#captchacode").val(),
async: false
}).responseText;
In our case, the file put in different domain. The technics will be use is Cross-Domain getJSON (using JSONP). Sample code below
$.getJSON("captcha.asp?validateCaptchaCode=" + $("#captchacode").val() + "&format=json&jsoncallback=?", function(data)
{
if (data.status == "1")
{ alert("verified and submit.");
$("#form").submit();
result = true;
}
else
{
if (data.session == "0")
RefreshImage("imgCaptcha");
alert("Please key in the security key correctly!");
$("#captchacode").focus();
result = false;
}
});
The Cross-Domain getJSON will espect the data return in Json format. So, my ajax handler file (in my case is captcha.asp) will need to return Json format data for processing.
After develop and tested. It's work. You can download my sample file here and test on it. Please let me know if it's help.
I downloaded the code and modify the code so that the security checking is before the asp postback. The solution i could thought of is AJAX. When i thought of javascript, the coolest javascript framework will be JQuery.
The decision is go for JQuery in order to perform Ajax with ASP.
There is one concern, the application will need to perform cross domain ajax. If use normal jquery ajax (code below), it will work if all the file reside in the same domain but not when cross domain. Error : Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "" data: no] will be displayed.
var html = $.ajax({
url: "/captcha.asp?validateCaptchaCode=" + $("#captchacode").val(),
async: false
}).responseText;
In our case, the file put in different domain. The technics will be use is Cross-Domain getJSON (using JSONP). Sample code below
$.getJSON("captcha.asp?validateCaptchaCode=" + $("#captchacode").val() + "&format=json&jsoncallback=?", function(data)
{
if (data.status == "1")
{ alert("verified and submit.");
$("#form").submit();
result = true;
}
else
{
if (data.session == "0")
RefreshImage("imgCaptcha");
alert("Please key in the security key correctly!");
$("#captchacode").focus();
result = false;
}
});
The Cross-Domain getJSON will espect the data return in Json format. So, my ajax handler file (in my case is captcha.asp) will need to return Json format data for processing.
After develop and tested. It's work. You can download my sample file here and test on it. Please let me know if it's help.
Monday, September 8, 2008
Call VBScript in Javascript
Well, it's actually working fine in IE but not other browser. As we all know, client side vbscript is microsoft product and it's only support in IE.
Try this,
<HTML>
<HEAD>
<SCRIPT LANGUAGE=vbscript>
Function vbFunc()
Msgbox("VBScript: Vb function")
End Function
</SCRIPT>
<SCRIPT LANGUAGE=javascript>
function jsFunc()
{
alert("Javascript: jsFunc function");
vbFunc();
}
</SCRIPT>
</HEAD>
<BODY onload="jsFunc()" >
</BODY>
</HTML>
Try this,
<HTML>
<HEAD>
<SCRIPT LANGUAGE=vbscript>
Function vbFunc()
Msgbox("VBScript: Vb function")
End Function
</SCRIPT>
<SCRIPT LANGUAGE=javascript>
function jsFunc()
{
alert("Javascript: jsFunc function");
vbFunc();
}
</SCRIPT>
</HEAD>
<BODY onload="jsFunc()" >
</BODY>
</HTML>
Sunday, August 17, 2008
Wednesday, July 9, 2008
Javascript: Shorten for if/else
Sometime our code will looks messy if containing too many if/else. We can shorten the code and make it more tidy. Check the code below:
<html>
<head>
<script language="JavaScript">
function foo()
{
var myGender = "female";
alert((myGender == "male") ? "i am male" : "I am female");
}
</script>
</head>
<body onload="javascript:foo();">
</body>
</html>
<html>
<head>
<script language="JavaScript">
function foo()
{
var myGender = "female";
alert((myGender == "male") ? "i am male" : "I am female");
}
</script>
</head>
<body onload="javascript:foo();">
</body>
</html>
Friday, June 27, 2008
JQuery document ready
If you want to fire an event after the document ready using jquery, you can call function inside $(document).ready(function()){// put all jQuery function here}); or $(function() {// put all jQuery function here.});
You can use
You can use
- $(document).ready(function() {
- // put all jQuery code in here.
- });
- $(function() {
- // put all jQuery code in here.
- });
Thursday, June 12, 2008
textContent not working in IE, use innerHTML
My javascript is working fine in FireFox and Safari but when use IE (mine is IE7), it's give me problem [Undefined].
.........................
..........................
this.post[i].head = this.posts[i].getElementsByTagName('a')[0];
this.post[i].title = this.post[i].head.textContent;
.......................
......................
Spend hours to check on the issue and finally found a very simple way to solve it, use innerHTML instead of using textContent.
.........................
..........................
this.post[i].head = this.posts[i].getElementsByTagName('a')[0];
this.post[i].title = this.post[i].head.innerHTML;
.......................
......................
problem solve.
.........................
..........................
this.post[i].head = this.posts[i].getElementsByTagName('a')[0];
this.post[i].title = this.post[i].head.textContent;
.......................
......................
Spend hours to check on the issue and finally found a very simple way to solve it, use innerHTML instead of using textContent.
.........................
..........................
this.post[i].head = this.posts[i].getElementsByTagName('a')[0];
this.post[i].title = this.post[i].head.innerHTML;
.......................
......................
problem solve.
Sunday, June 8, 2008
[Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e
This is cause by calling AJAX file different domain from my current site.Check my previous post
http://dotnetfish.blogspot.com/2007/11/jquery-exception-permission-denied-to.html
Saturday, December 15, 2007
Retrive ASP.NET Object value using javascript
I have a checkbox name Checkbox2 runat server, if we try to get value by calling ID= Checkbox2 using javascipt, javascript error: Object not found, this is because server side ID is different with the client side ID. Client side ID for this object is Checkbox2.ClientID.
For example, i need to pass Checkbox2 value to a javascript function during page load, this is what i do.
protected void Page_Load(object sender, EventArgs e)
{
Page.RegisterStartupScript("Onload", "<script language='javascript'>fnCheck('" + Checkbox2.ClientID +"');</script>");
}
fnCheck is a javascript function that i already define some where.
Sunday, November 25, 2007
Expected identifier, string or number
 |
| Invoice software |
For below javascript code, i got error "Expected identifier, string or number" in IE but it's working fine in firefox and safari.
var RealtimeViewer =
{
timer : 5000,
Interval : null,
init: function() {
xxxxxxxxx
xxxxxxxxx
},
RatingUpdate: function(){
xxxxxxxx
xxxxxxxx
},
};
To solve the problem, remove the last "," before close the object RealtimeViewer "};". It will become
var RealtimeViewer = {
timer : 5000,
Interval : null,
init: function()
{
xxxxxxxxx
xxxxxxxxx
},
RatingUpdate: function()
{
xxxxxxxx
xxxxxxxx
}
};
Monday, November 12, 2007
technorati like - News Scroller with jQuery
I have create a real time viewer for blogarate.com in ASP.NET using jQuery. If you not familiar with jquery, you can read more here jquery.com. It's a very powerful javascript library.
Let me explain how the real time viewer/scroller/ticker/ works:
When web user access to realtime.aspx. The page will bind 5 latest rated blog and show on screen. once the user/visitor rate on the blog, the newly rated blog will show on top, the rest will scroll down and the last one will be deleted. To see real example, please check on http://202.75.40.204/blogarate/Realtime_.aspx
There are few things that we need to take care of in my case:
I'm using in the scroller <ol> because we have more than one (5) message want to display.
<div id="content">
<ol class="wrapper">
<li class="headline">
Message 1
</li>
<li class="headline">
Message 2
</li>
<li class="headline">
Message 3
</li>
<li class="headline">
Message 4
</li>
<li class="headline">
Message 5
</li>
</ol>
</div>
CSS
Create CSS for #content and .wrapper with height: 395px; width: 500px; overflow: hidden; The height: 395px; is the trick here. You will get what i mean when go along.
Each headline will have height: 78px; 5 headline will give total of 390px.
#content {
position: relative;
overflow: hidden;
float:left;
height: 395px;
width: 500px;
clear: both;
}
.wrapper
{
position:relative;
float: left;
margin:0;
overflow:hidden;
width: 500px;
padding-left: 0;
list-style-type: none;
}
.headline {
position: relative;
height: 78px;
width: 500px;
left:5px;
overflow: hidden;
border-bottom: 1px solid #CCC;
float: left;
list-style-type: none;
z-index : 1;
}
.next
{
margin-top: -100px;
/* for IE */
filter: alpha(opacity=40);
/* CSS3 standard */
opacity: 0.4;
/* for Mozilla */
-moz-opacity: 0.4;
}
active
{
background-color:#EEE;
border-bottom: none;
}
Javascript
// JScript File
var BlogarateRealtime = {
timer : 10, // second
display : 5, // how many item displayed
interval: null,
animation: 500, //milisecond
init: function() {
if (!BlogarateRealtime.interval) {
// stop scrolling when mouseover the message
// start scroll again when mouseout
$("#content .wrapper").mouseover(function(){
BlogarateRealtime.stopScroll();
}).mouseout(function(){
BlogarateRealtime.startScroll();
})
BlogarateRealtime.RatingUpdate();
BlogarateRealtime.startScroll();
}
},
RatingUpdate: function(){
var i;
// add class active when mouseover
// remove class active when mouse out
var cpostItem = $(".wrapper .headline");
$(cpostItem).mouseover(function() {
$(this).addClass("active");
}).mouseout(function() {
$(this).removeClass("active");
});
// xxx.shx return realtime message (rewly post)
var html = $.ajax({
url: http://xxx.ashx/ ,
async: false
}).responseText;
// return 3 value:
//1. PostUpdating[0] - any blog rated
//2. PostUpdating[1] - new blog ID
//3. PostUpdating[2] - new blog information
var PostUpdating = html.split("");
// check if any new blog rated (1 = yes, 0 = no)
if (PostUpdating[0] == "1")
{
// assign currentItem with new blog infomation
var currentItem = PostUpdating[2];
// add class next to currentItem
// pre append currentItem to #content .wrapper
$(currentItem).addClass("next").prependTo("#content .wrapper");
// scrolling (animate) the new blog to marginTop -1
$(".wrapper .next").animate( { marginTop: -1 }, BlogarateRealtime.animation, function() {
// remove marginTop -1, class next and fadeIn new blog
$(".wrapper .next").css("marginTop", -1);
$(".wrapper .next").removeClass("next");
$(".wrapper .next").fadeIn(BlogarateRealtime.animation);
});
var postItem = $(".wrapper .headline");
// fade out and remove the last post
$(postItem[BlogarateRealtime.display]).animate( { opacity: .50 }, BlogarateRealtime.animation, function(){
$(postItem[BlogarateRealtime.display]).remove();
} );
// add class active when mouse over
// remove class active when mouseout
$(postItem).mouseover(function() {
$(this).addClass("active");
}).mouseout(function() {
$(this).removeClass("active");
});
}
},
startScroll: function() {
if (!this.interval) {
this.interval = setInterval("BlogarateRealtime.RatingUpdate()", this.timer * 1000);
}
},
stopScroll: function() {
if (this.interval) {
clearInterval(this.interval);
this.interval = false;
}
}
};
// initial once ducument finish loaded
$(BlogarateRealtime.init);
AJAX
The call of http://xxx.ashx/ will return newly added post if there is any.
You can see the effect in http://202.75.40.204/blogarate/Realtime_.aspx . You will only see the scroll effect if only new post rated. Done.
Leave me a message or a comment if you have any. Thanks
Let me explain how the real time viewer/scroller/ticker/ works:
When web user access to realtime.aspx. The page will bind 5 latest rated blog and show on screen. once the user/visitor rate on the blog, the newly rated blog will show on top, the rest will scroll down and the last one will be deleted. To see real example, please check on http://202.75.40.204/blogarate/Realtime_.aspx
There are few things that we need to take care of in my case:
- HTML/ASPX
- CSS
- Javascript
- AJAX
I'm using in the scroller <ol> because we have more than one (5) message want to display.
<div id="content">
<ol class="wrapper">
<li class="headline">
Message 1
</li>
<li class="headline">
Message 2
</li>
<li class="headline">
Message 3
</li>
<li class="headline">
Message 4
</li>
<li class="headline">
Message 5
</li>
</ol>
</div>
CSS
Create CSS for #content and .wrapper with height: 395px; width: 500px; overflow: hidden; The height: 395px; is the trick here. You will get what i mean when go along.
Each headline will have height: 78px; 5 headline will give total of 390px.
#content {
position: relative;
overflow: hidden;
float:left;
height: 395px;
width: 500px;
clear: both;
}
.wrapper
{
position:relative;
float: left;
margin:0;
overflow:hidden;
width: 500px;
padding-left: 0;
list-style-type: none;
}
.headline {
position: relative;
height: 78px;
width: 500px;
left:5px;
overflow: hidden;
border-bottom: 1px solid #CCC;
float: left;
list-style-type: none;
z-index : 1;
}
.next
{
margin-top: -100px;
/* for IE */
filter: alpha(opacity=40);
/* CSS3 standard */
opacity: 0.4;
/* for Mozilla */
-moz-opacity: 0.4;
}
active
{
background-color:#EEE;
border-bottom: none;
}
Javascript
// JScript File
var BlogarateRealtime = {
timer : 10, // second
display : 5, // how many item displayed
interval: null,
animation: 500, //milisecond
init: function() {
if (!BlogarateRealtime.interval) {
// stop scrolling when mouseover the message
// start scroll again when mouseout
$("#content .wrapper").mouseover(function(){
BlogarateRealtime.stopScroll();
}).mouseout(function(){
BlogarateRealtime.startScroll();
})
BlogarateRealtime.RatingUpdate();
BlogarateRealtime.startScroll();
}
},
RatingUpdate: function(){
var i;
// add class active when mouseover
// remove class active when mouse out
var cpostItem = $(".wrapper .headline");
$(cpostItem).mouseover(function() {
$(this).addClass("active");
}).mouseout(function() {
$(this).removeClass("active");
});
// xxx.shx return realtime message (rewly post)
var html = $.ajax({
url: http://xxx.ashx/ ,
async: false
}).responseText;
// return 3 value:
//1. PostUpdating[0] - any blog rated
//2. PostUpdating[1] - new blog ID
//3. PostUpdating[2] - new blog information
var PostUpdating = html.split("");
// check if any new blog rated (1 = yes, 0 = no)
if (PostUpdating[0] == "1")
{
// assign currentItem with new blog infomation
var currentItem = PostUpdating[2];
// add class next to currentItem
// pre append currentItem to #content .wrapper
$(currentItem).addClass("next").prependTo("#content .wrapper");
// scrolling (animate) the new blog to marginTop -1
$(".wrapper .next").animate( { marginTop: -1 }, BlogarateRealtime.animation, function() {
// remove marginTop -1, class next and fadeIn new blog
$(".wrapper .next").css("marginTop", -1);
$(".wrapper .next").removeClass("next");
$(".wrapper .next").fadeIn(BlogarateRealtime.animation);
});
var postItem = $(".wrapper .headline");
// fade out and remove the last post
$(postItem[BlogarateRealtime.display]).animate( { opacity: .50 }, BlogarateRealtime.animation, function(){
$(postItem[BlogarateRealtime.display]).remove();
} );
// add class active when mouse over
// remove class active when mouseout
$(postItem).mouseover(function() {
$(this).addClass("active");
}).mouseout(function() {
$(this).removeClass("active");
});
}
},
startScroll: function() {
if (!this.interval) {
this.interval = setInterval("BlogarateRealtime.RatingUpdate()", this.timer * 1000);
}
},
stopScroll: function() {
if (this.interval) {
clearInterval(this.interval);
this.interval = false;
}
}
};
// initial once ducument finish loaded
$(BlogarateRealtime.init);
AJAX
The call of http://xxx.ashx/ will return newly added post if there is any.
You can see the effect in http://202.75.40.204/blogarate/Realtime_.aspx . You will only see the scroll effect if only new post rated. Done.
Leave me a message or a comment if you have any. Thanks
Wednesday, October 31, 2007
window.location.search
window.location.search is a very useful script that able to return all querystring for further usage like pass to another page/AJAX.
To test on the usage, save below page as locationsearch.htm. To see the result, add querystring to the page called: locationsearch.htm?p=testing&l=javascript
<html>
<head>
<script language="JavaScript">
function onload()
{
alert(window.location.search);
}
</script>
</head>
<body onLoad="onload()">
</body>
</html>
To test on the usage, save below page as locationsearch.htm. To see the result, add querystring to the page called: locationsearch.htm?p=testing&l=javascript
<html>
<head>
<script language="JavaScript">
function onload()
{
alert(window.location.search);
}
</script>
</head>
<body onLoad="onload()">
</body>
</html>
Tuesday, August 28, 2007
Javascript Drag & Drop
It's pretty interesting to visit a website or a web application with drag and drop function like Blogger, EncelabsCRM. Very user friendly and impressive. After surf around on how to do that, i found that there are some free UI library ready to be used complete with documentation. Yahoo UI library, mootools and etc. Go to play around and maybe you will get benefits from there.
Subscribe to:
Posts (Atom)
