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--%>
<%--the div that will pop-up--%>
</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 ;
font-weight:bold;
margin:0 2px;
padding:2px 4px;
width:60px;
}
#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 header
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 + " " + url;
body += "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. This is the main content. To display a lightbox click here
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>
<%-- overlay --%>
<%-- the pop-up div starts here. --%>
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
This is the lightbox content.
<%-- the pop-up div ends here. --%>
</body>
well, it looks like this after.
Read More...