It's obviously important to give your readers a way to tell their friends and colleagues about your site - it's free advertising after all. That's why it is important to put the Email to Friends or Tell your Friends link at the top of every page of the site.
What we have here is just a link Email to Friend which open a pop-up div where user can enter their email address, the email addresses of his friends and a note(optional).
First thing we will do is to create the div.
<body>
<%--the link that will appear in the page--%>
<div>
<a href="#" onclick="openThis(); return false;">Email to Friend</a>
</div>
<%--the div that will pop-up--%>
<div id="popUpDivEmail">
<div id="EmailContainer" class="emailPopUp">
<div id="EmailTitleContainer">
<h5><span id="at16ptc">Email a Friend</span></h5><a onclick="closeThis(); return false;" href="#" id="">close</a>
</div>
<div id="errorEmail">Please enter a valid email address.</div>
<div style="padding:5px 10px" id="the_form">
<form onsubmit="sendThis(); return false;"> <%--onsubmit="send_thisEmail();return false;"--%>
<label for="at_to">To:(email address)</label>
<textarea onblur="document.getElementById('at_to').style.background='#fff'" onfocus="document.getElementById('at_to').style.background='#FFFFF0'" tabindex="2" onkeyup="" onkeypress="" rows="4" cols="30" id="at_to" style="overflow:hidden"></textarea>
<label for="at_from">From:(email address)</label>
<input type="text" onblur="document.getElementById('at_from').style.background='#fff'" onfocus="document.getElementById('at_from').style.background='#FFFFF0'" size="30" tabindex="3" name="at_from" id="at_from" />
<label for="at_msg">Note:(optional)</label>
<textarea onblur="document.getElementById('at_msg').style.background='#fff'" onfocus="document.getElementById('at_msg').style.background='#FFFFF0'" onkeyup="" tabindex="4" rows="6" cols="30" id="at_msg" style="overflow:hidden;" > </textarea>
<div id="" style="text-align:right"><small>255 character limit</small></div>
<div id="addthis-pop-email-btns">
<input type="submit" onclick="" value="Send" tabindex="5" class="btn" style="font-weight:bold;"/>
<input type="reset" onclick="closeThis(); return false;" value="Cancel" tabindex="6" class="btn"/>
</div>
</form>
</div>
</div>
</div>
</body>
Second is to put a css for the div that pop-up.
#popUpDivEmail
{
border: 8px solid #5E5E5E;
font-size:12px;
left:50%;
margin:-185px auto 0 -155px;
padding:10px;
position:absolute;
top:50%;
width:300px;
z-index:10000001;
display:none;
}
.emailPopUp
{
color:#333333;
font-family:arial,helvetica,tahoma,verdana,sans-serif;
font-size:11px;
}
#EmailContainer
{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #CCCCCC;
height:370px;
position:static;
text-align:left;
width:298px;
}
#EmailTitleContainer
{
background:#F2F2F2 none repeat scroll 0 0;
height:13px;
padding:5px 10px;
position:relative;
}
#EmailTitleContainer a
{
color:#4C4C4C;
position:absolute;
right:10px;
text-decoration:none;
top:5px;
}
#the_form input, #the_form textarea
{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #BBBBBB;
color:#333333;
font-family:arial,helvetica,tahoma,verdana,sans-serif;
font-size:11px;
font-weight:normal;
line-height:1.4em;
margin:0 0 8px;
padding:3px;
width:272px;
}
.btn
{
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #B5B5B5;
color:#333333;
cursor:pointer;
font-size:11px !important;
font-weight:bold;
margin:0 2px !important;
padding:2px 4px;
width:60px !important;
}
#addthis-pop-email-btns .btn:hover
{
color:#41BBFF;
border: 1px solid #ececec;
}
#errorEmail
{
background:#F26D7D none repeat scroll 0 0;
border-bottom:1px solid #DF5666;
color:#FFFFFF;
padding:5px 10px;
display:none;
}
So have this script in the hearder<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function closeThis() {
$('#popUpDivEmail').css({
'display': 'none'
}).fadeOut();
}
function openThis() {
$('#popUpDivEmail').css({
'display': 'block'
}).fadeIn();
}
function sendThis() {
var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var ToMails = GetAllEmail();
var Fromemail = document.getElementById('at_from').value;
$('#at_to').css('border', '1px solid #BBBBBB');
$('#at_from').css('border', '1px solid #BBBBBB');
$('#errorEmail').css('display', 'none');
if (!ToMails && !Fromemail.match(emailRegEx)) {
$('#errorEmail').css('display', 'block');
$('#at_to').css('border', '1px solid #FF1313');
$('#at_from').css('border', '1px solid #FF1313');
}
else {
if (!ToMails) {
$('#errorEmail').css('display', 'block');
$('#at_to').css('border', '1px solid #FF1313');
$('#at_to').focus();
}
else if (!Fromemail.match(emailRegEx)) {
$('#errorEmail').css('display', 'block');
$('#at_from').css('border', '1px solid #FF1313');
$('#at_from').focus();
}
else {
// Sending Email
var FROM = $('#at_from').val();
var TO = [];
TO = $('#at_to').val().split(/[;?,?]/);
var msg = $('#at_msg').val();
$.ajax({
type: "POST",
async: false,
url: "/Home/EmailToFriend",
data: { "To_Email": TO, "From_Email": FROM, "msg": msg },
beforeSend: function() {
$('#popUpDivEmail').css('display', 'none');
$('#sentEmail').css('display', 'block');
$('#alertEmail').html("<span style=\"font-size: 24px; font-weight: bold;\">Sending Email...</span>").css("height", "30px");
},
success: function(data) {
if (data != null) {
if (data == 'false') {
$('#sentEmail').css('display', 'none');
$('#popUpDivEmail').css('display', 'block');
$('#errorEmail').css('display', 'block');
document.getElementById('errorEmail').innerHTML = "Error occured sending email";
}
else {
$('#popUpDivEmail').css('display', 'none');
$('#sentEmail').css('display', 'block');
$('#alertEmail').html("<span style=\"color:#D17D4F;font-size: 15px;\" class=\"textBoldClass\">Successfully sent email</span> <a onclick=\"document.getElementById('sentEmail').style.display='none'\" href=\"#\" >close</a>");
}
}
},
error: function() {
$('#errorEmail').css('display', 'block');
document.getElementById('errorEmail').innerHTML = "Error occured sending email";
}
});
}
}
function GetAllEmail() {
var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var Toemail = document.getElementById('at_to').value;
var emails = Toemail.split(/[;?,?]/);
for (ctr = 0; ctr < emails.length; ctr++) {
if (!emails[ctr].match(emailRegEx))
{ return false; }
}
return true;
}
}
$(function() {
$('#at_msg').keyup(function() {
var len = this.value.length;
if (len >= 255) {
this.value = this.value.substring(0, 255);
}
//$('#charLeft').text(255 - len);
});
});
</script>
To get the latest js that we exported on the header just copy and paste this latest.js and create a new js file and save it as jquery.js.
The function openThis() and closeThis() are for opening and closing the pop-up div respectively.
In the sendThis() function notice the variable emailRegex, its a regular expression for email. We check first the email enter before we call the server side function EmailToFriend. Another thing is the variable emails = Toemail.split(/[;?,?]/) in function GetAllEmail() this variable will split all the Email To either the user input semicolon ; or comma , to separate the multiple emails. The last function will limit the user number of character inputed on the notes to 255 only.
Basically the form will look like this:
And last part is the sever side function EmailToFriend where sending of email will take place. This is just a simple asp.net C# code, you can have your own code in here depending on your scope and limitation on how you will have it.
public JsonResult EmailToFriend(string[] To_Email, string From_Email, string msg)
{
for (int i = 0; i < To_Email.Count(); i++)
{
MailMessage message = new MailMessage();
//subject
message.Subject = From_Email + " has shared something with you at Chenz101Tutorials";
string url = HttpContext.Request.UrlReferrer.ToString();
string body = msg + "<br /> <br />" + url;
body += "<br /> <br /> P.S. This message was sent by " + From_Email + " via chenz101tutorials.blogspot.com";
//body
message.Body = body;
message.IsBodyHtml = true;
//from
message.From = new MailAddress(From_Email);
try
{
message.To.Add(To_Email[i]);
//Set SMTP Client
SmtpClient SmtpHost = new SmtpClient();
SmtpHost.EnableSsl = true;
SmtpHost.Host = "smtp.gmail.com";
SmtpHost.Port = 587;
NetworkCredential netCred = new NetworkCredential("username", "password");
SmtpHost.Credentials = netCred;
//Send Email
SmtpHost.Send(message);
}
catch (Exception ex)
{
return Json(false);
}
}
return Json(true);
}
Read More...
Email to Friend script and design for Asp.net
Customize lightbox for div element
Lots of thread i read about Lightbox says it wont work on the div element only on images. So i tried to customize some of the lighbox jqueries and its css, and ending up creating a new lightbox.js that adopts div element.
To have a customize lighbox for div element simply:
1. Create the css file for the lightbox [ lightbox.css ].
2. Create the js file[ gsp_lightbox.js ].
3. Import the two file in your page header.
4. Have your html body. And on your hyperlink event ONCLICK add "showLightBox(); return false;" which will open the div lightbox. The div id="light" will contains all the information inside the popup div. Refer html body.
Below contains all the code you will be needed. { copy and paste }
lightbox.css
#fade
{
display: none;
background-color:#3E3E3E;
position: absolute;
top: 0%;
left: 0%;
z-index: 90;
width: 100%;
height: 500px;
-moz-opacity: 0.8;
opacity: 0.8;
filter : alpha(opacity=80);
}
#light
{
display: none;
position: absolute;
top: 0%;
left: 0%;
z-index: 100;
text-align: left;
width:100%;
}
.white_innerContent
{
background-color: #fff;
position: relative;
width: 560px;
height: 500px;
margin: 0 auto;
color:#333333;
}
.lightfoot
{
font-family:Arial,Helvetica,sans-serif;
background-color:#AD7032;
height:32px;
color:#fff;
font-weight:bold;
font-size:12px;
}
.divTextHolder
{
border: 15px solid #B2AD94;
overflow:auto;
width: 510px;
height: 440px;
padding:10px;
}
gsp_lightbox.js
/**
* customized lightbox for div element
* GSP
* http://chenz101tutorials.blogspot.com/
*/
function showLightbox() {
// Get page sizes
var arrPageSizes = currentPageSize();
// Get page scroll
var arrPageScroll = currentPageScroll();
// Style overlay and show it
$('#fade').css({
width: arrPageSizes[0] + 'px',
height: (arrPageSizes[1] + 100) + 'px'
}).fadeIn();
// calculate top and left offset for the jquery-lightbox div object and show it
$('#light').css({
top: (arrPageScroll[1] + (arrPageSizes[3] / 10)) + 'px',
left: arrPageScroll[0] + 'px'
}).show();
$(window).resize(function() {
// Get page sizes
var arrPageSizes = currentPageSize();
// Get page scroll
var arrPageScroll = currentPageScroll();
// Style overlay and show it
$('#fade').css({
width: arrPageSizes[0] + 'px',
height: (arrPageSizes[1] + 100) + 'px'
});
// Calculate top and left offset for the jquery-lightbox div object and show it
$('#light').css({
top: (arrPageScroll[1] + (arrPageSizes[3] / 10)) + 'px',
left: arrPageScroll[0] + 'px'
});
});
//Enable a support to keyboard navigation
$(document).keydown(function(objEvent) {
_keyboard_action(objEvent);
});
}
//get PageSize
function currentPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
};
function currentPageScroll() {
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScroll, yScroll);
return arrayPageScroll;
};
//close LightBox
function closeLightbox() {
$('#light').css('display','none');
$('#fade').fadeOut(function() { $('#fade').css('display', 'none'); });
// Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
$('embed, object, select').css({ 'visibility': 'visible' });
}
/**
* Perform the keyboard actions
*
*/
function _keyboard_action(objEvent) {
// To ie
if (objEvent == null) {
keycode = event.keyCode;
escapeKey = 27;
// To Mozilla
} else {
keycode = objEvent.keyCode;
escapeKey = objEvent.DOM_VK_ESCAPE;
}
// Get the key in lower case form
key = String.fromCharCode(keycode).toLowerCase();
// Verify the keys to close the ligthBox
if ((key == 'c') || (key == 'x') || (keycode == escapeKey)) {
closeLightbox();
}
}
html body
<body>
<p>This is the main content. To display a lightbox click <a href = "#" onclick = "showLightbox()">here</a></p>
<div id="fade" onclick="closeLightbox();"></div> <%-- overlay --%>
<%-- the pop-up div starts here. --%>
<div id="light">
<div class="white_innerContent">
<div class="divTextHolder">
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
This is the lightbox content. <br />
</div>
<div class="lightfoot">
<div style="float:left;padding:5px;">
Amenitites
</div>
<div style="float:right;">
<a href = "#" onclick="closeLightbox();">
Close
</a>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
<%-- the pop-up div ends here. --%>
</body>
well, it looks like this after.
Read More...
To use onchange event of dropdownlist on asp.net MVC
Lots of us are still learning the MVC framework. Some are facing difficulties on how to interact the controller and the views. Probably one of the common problems we encounter was dealing with the dropdownlist. In a scenario that you will be having two dropdownlist linking to each other
(dropdown A and dropdown B). And on the onchange event of the dropdown A another set of values will be loaded on the dropdown B.
You don’t want to post the form containing the two dropdown lists back to the server each and every time a user selects a new value from dropdown A. That would create a really bad user experience. Instead, you want to update the list of dropdown B after a new value of dropdown A is selected without a form post.
so probably you be needed cascading drop-downs.
A good sample.
-87
Read More...
Hover effect over a div tag, Jquery
A hover effect will be applied usually on an image. Others have an image inside a div, its still an image which will be resize every mouse in and mouse out. What i have in here in this post will be a div with different element inside of it. It will expand the div and each element inside of it every mouse in and out.
First thing we need to have a html form which will serves our main page for this example.
What i have here is a div inside a div. The div id=card is the main container. Take a look of the styles i have in every div that holds my card information. It is so important to have that positioning of every element, you will know it on the later part of this post.
<form id="form1" runat="server">
<ul class="thumb">
<li>
<div id="card" class="container" style="position:relative; z-index:0;" >
<div class="innercontainer">
<div style="position: absolute; z-index: 1; left: 172px; top: 12px; opacity: 1; font-size: 30px; color: rgb(204, 0, 0); font-family: comic sans ms; font-weight: bold; font-style: normal; text-decoration: underline;" id="idCmpnyName"><p>Bizdak Inc.</p></div>
<div style="position: absolute; z-index: 1; left: 10px; top: 118px; opacity: 1; font-size: 12px;" id="idJobTitle">Web Developer</div>
<div style="position: absolute; z-index: 1; left: 10px; top: 94px; opacity: 1; font-weight: bold; font-style: italic;" id="idFullName">Mr. Chenzz Fernan</div>
<div style="position: absolute; z-index: 1; left: 10px; top: 140px; opacity: 1; font-size: 12px;" id="idEmailAddress">Email :<a href="mailto:dna.chenzz@gmail.com" title="Email" target="">dna.chenzz@gmail.com</a></div>
<div style="position: absolute; z-index: 1; left: 10px; top: 164px; opacity: 1; font-size: 12px;" id="idWebSite">Website: <a href="http://chenz101tutorials.blogspot.com/" title="My Site" target="">http://chenz101tutorials.blogspot.com/</a></div>
<div style="position: absolute; z-index: 1; left: 136px; top: 60px; opacity: 1; font-size: 10px;" id="idMailingAddress"><p>RM 302 Keppel Building, Cebu Business Park, Cebu City</p></div>
</div>
</div>
</li>
</ul>
</form>
Next, we need to have the the latest jQuery library. And this AnimateMyDiv.js that i have below:
-
/*
-------------------------------------------------
FileName:AnimateMyDiv.js
Author: http://chenz101tutorials.blogspot.com/
-------------------------------------------------
*/
$(document).ready(function() {
DivSmall($(this).find('div.innercontainer').children());
$('ul.thumb li').hover(function() {
$(this).css({ 'z-index': '10' }); /*Add a higher z-index value so this image stays on top*/
DivBig($(this).find('div.innercontainer').children()); // this function call when mouse in
$(this).find('div.container').addClass('hover').stop()
.animate({
width: '500px', /* Set new width */
height: '300px', /* Set new height */
padding: '10px'
}, 100); /* this value of "200" is the speed of how fast/slow this hover animates */
}, function() {
$(this).css({ 'z-index': '0' }); /* Set z-index back to 0 */
$(this).find('div.container').removeClass('hover').stop()
.animate({
width: '250px', /* Set width back to default */
height: '150px', /* Set height back to default */
padding: '5px'
}, 200);
DivSmall($(this).find('div.innercontainer').children()); // this function called when mouse out
});
function DivBig(content) {
for (var i = 0; i < content.length; i++) {
var fontSize = parseFloat($(content[i]).css("font-size"));
var posTop = parseFloat($(content[i]).css("top"));
var posLeft = parseFloat($(content[i]).css("left"));
$(content[i]).css({ 'font-size': fontSize * 2 + 'px', 'top': posTop * 2 + 'px', 'left': posLeft * 2 + 'px' });
}
var contW = parseFloat($('div.innercontainer').width());
var contH = parseFloat($('div.innercontainer').height());
}
function DivSmall(content) {
for (var i = 0; i < content.length; i++) {
var fontSize = parseFloat($(content[i]).css("font-size"));
var posTop = parseFloat($(content[i]).css("top"));
var posLeft = parseFloat($(content[i]).css("left"));
$(content[i]).css({ 'font-size': fontSize / 2 + 'px', 'top': posTop / 2 + 'px', 'left': posLeft / 2 + 'px' });
}
var contW = parseFloat($('div.innercontainer').width());
var contH = parseFloat($('div.innercontainer').height());
$('div.innercontainer').css({ 'width': contW / 2 + 'px', 'height': contH / 2 + 'px' });
}
});
-
Copy the codes above and paste it in a js templates name the file AnimateMyDiv.js.
Import both JS in the <head> of the Info.aspx.
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.AnimateMyDiv.js"></script>
Take a look on the function DivBig() and function DivSmall(), see how important the positioning of each element. It may be tricky but thats the real score, it makes every element go small and big.
To make it complete heres the CSS:
<style type="text/css">
ul.thumb
{
float: left;
list-style: none;
margin: 0;
padding: 10px;
}
ul.thumb li
{
margin: 0;
padding: 10px;
position: relative; /* Set the absolute positioning base coordinate */
}
ul.thumb li div.container
{
width: 250px; height: 150px; /* Set the small thumbnail size */
border: 1px solid #ddd;
padding: 10px;
background: #f0f0f0;
border-width: 5px;
position: absolute;
left: 0; top: -10;
margin: 2px;
}
ul.thumb li div.container.hover {
width: 500px; height: 300px; /*Set the small thumbnail size */
background: #C9DDF0;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 5px;
color: inherit;
padding: 5px;
vertical-align: top;
}
.innercontainer
{
height: 500px;
width: 300px;
}
</style>
Read More...
Customize reCaptcha, remove theme. ASP.net
It was my first time to use reCaptcha, and i found out that there is a default theme plugin to it, where all i need to get is just the image, with the link reload captcha and link to play audio, similar to the facebook and twitter. Set the reCaptcha theme to "clean" ( theme: 'clean' ) still looks bad. And it took me a while to configure the API inorder to blend in and work good to the website we have.
Well, custom theming API allows you to do the same thing that Facebook has done. Unfortunately, this customization can't be done without javascript.
In order to use custom theming, you must first set the theme property of the RecaptchaOptions to 'custom'. This tells reCAPTCHA that it should not create a user interface of its own. reCAPTCHA will rely on the presence of HTML elements with the following IDs to display the CAPTCHA to the user:
* An empty div with ID recaptcha_image. This is where the actual image will be placed. The div will be 300x57 pixels.
* A text input with ID and name both set to recaptcha_response_field. This is where the user can enter their answer.
* Optionally, a div which contains the entire reCAPTCHA widget. This ID div should be placed into the custom_theme_widget and the style of the div should be set to display:none. After the reCAPTCHA theming code has fully loaded, it will make the div visible. This element avoids making the page flicker while it loads.
<script type="text/javascript">
Recaptcha.create("6LcouQcAAAAAAIfOt5NpxgvR4oMAqI4Mkxp5RXcs",
"recaptcha_image",
{
theme:"custom",
callback:Recaptcha.focus_response_field,
custom_theme_widget: 'recaptcha_widget'
}
);
</script>
Note: dont forget to export the recaptcha.js before the above code.
On the page you will have this html code:
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div><br />
<table>
<tr>
<td>
<%--an empty div with ID recaptcha_image --%>
<div id="recaptcha_image" style="width:300px;height:57px;"></div> <br />
</td>
<td>
<a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a> <br />
<a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a> <br />
</td>
</tr>
</table>
<div id="recaptcha_widget" style="display:none"></div> <br />
<%--a text input with ID and name both set to recaptcha_response_field --%>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" /> <br />
<a href="#"><input type="submit" value="Verify" id="submitLink" /></a>
So its kindda look like this( is use asp.net MVC ):
Have this script also to check if the inputed text is same as the image recaptcha that generated.
$(function() {
$('#submitLink').click(function() {
$.ajax({
type: "POST",
url: "/Home/isCaptchaValid",
async: false,
data: { "challenge": Recaptcha.get_challenge(), "response": Recaptcha.get_response() },
success: function(data) {
alert(data);
},
error: function() { alert('error'); }
});
});
});
Take a look at the URL i call it will go on the HOME controller (as i used the MVC). The code behind for this application:
//be reminded that i use ASP.net MVC
//it will return a JSON boolean.
[AcceptVerbs(HttpVerbs.Post)]
public bool isCaptchaValid(string challenge,string response)
{
// Add your operation implementation here
Recaptcha.RecaptchaValidator validator = new Recaptcha.RecaptchaValidator
{
PrivateKey = "6LcouQcAAAAAAOjcmhymXE9M7jTHAmV9VsIm1UFy",
RemoteIP=Request.UserHostAddress,
Challenge=challenge,
Response=response
};
Recaptcha.RecaptchaResponse Cresponse = validator.Validate();
return Cresponse.IsValid;
}
The parameters Recaptcha.get_challenge() and Recaptcha.get_response() are the helper functions that return the reCAPTCHA challenge string and the response that the user has typed in to the response field. They return null if the widget isn't showing. Can be used with the AJAX API to retrieve the answers so that an XMLHttpRequest can be used to post the reCAPTCHA solution.
View the demo.
For more info visit: ASP.NET CAPTCHA Library for reCAPTCHA
-87
Read More...
101 Free Twitter Buttons, Badges and Widget to Show Off Your Tweets
One of the best ways to find new followers for your Twitter account is to provide any other online profile that you might already have. If you have a website, blog or other social media account linking to your Twitter account is a great way to do this.
There are a number of ways to promote your Twitter (Twitter) account. You can add yourself to one of the many growing Twitter directories, Twitter directories, or, have an eye catching button, widget or counter can be even more effective. Well, of course there are some Official Twitter Badges available...but what if you want something a little different(considering the color, format and sizes)?
So below are the list of links where you can download a buttons, embed badges and widgets that you can customize to include your tweets for your website:
Cute Twitter Bird Vector Art - by Smashing Magazine. The set is available as a free download and can be used for any purpose without any restrictions whatsoever. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sub-licensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.
TwitStamp – TwitStamp lets you set up an easy, attractive, and customizable badge that displays your latest tweet. You can select the badge’s size, background and so on. You can also set up a TwitCard that will show your name, avatar, bio, latest tweet, number of followers and more.
U Stand Out Twitter Badges – U Stand Out offers up a nice selection of badges you can use for your site or blog that range from artsy to straight-to-the-point.
SayTweet – SayTweet allows you to upload a picture of your own, tag the Twitter users shown, and their tweets will show up in speech bubbles on the image as they publish them.
Siah Design - Free Twitter Buttons - 42 Twitter buttons - some of them animated. You can download the graphics by right clicking the image and downloading the link. Just place the image on your site and link to your Twitter profile.
TwitterSalt – allows you to customize your widget on their site and then just by using a single line of HTML code you can post your updates on sites, on message boards, in emails and more.
Twignature - Another Japanese creation that allows you to enter your account name and have a personalized twitter button with your account name on it. Lots of sizes and a few different styles to choose from.
Twitt-Twoo - WordPress plugin Widget for your blog’s sidebar. There’s another WP sidebar widget plugin here.
MilkAddict - Twitter button - 2 simple round buttons.
Follow me on Twitter badges - 36 colorful Twitter badges. There are also some backgrounds to go with these badges.
31 Logos et boutons pour Twitter - 31 great buttons. The blog might not be in English but the buttons are. Some great designs here.
Web Design by mt - 10 Twitter Buttons for Free (German).
Randa Clay - Free Twitter Graphics - 18 different Twitter buttons like this one.
TwiBadge – is a WordPress plugin widget that allows you to easily add the official Twitter widget to your site. This allows you to show a group of your most recent tweets, your user name and number of followers, but best of all, it will also enable your readers to login and follow you so they can do everything right from your sidebar.
-87
Read More...
A fancy style for search suggestion
A fancy style for search suggestion.
Type rest of the post here
Read More...
