Software Development: September 2014

Friday, 5 September 2014

Multiple Image fade-in fade-out Using Css3

Multiple Image fade-in fade-out using css3 is very useful for making silder or other design.

Here is below example for this.

<style>
@-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

@-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

@-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

@keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}

#ritu {
position:relative;
margin:0 auto;
}
#ritu img {
position:absolute;
left:0;
}

#ritu img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;

-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;

-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;

animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#ritu img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#ritu img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#ritu img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#ritu img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
</style>

<div id="ritu" class="shadow">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
<img src="images/slider3.jpg">
</div>

Thursday, 4 September 2014

reCaptcha system using Google API and PHP and sent mail using php

The reCaptcha system will Prevent you form spam.
It will also enable the audio captcha also. here in this article I will explain how to create a reCaptcha using PHP and Google API.

What you have to do is first you have to get your Public and Private Key of Google reCaptcha API. You can register the API below,

http://www.google.com/recaptcha/intro/index.html

Sign up with your Google account.

Now you will get both Public and Private Key. Replace the $publickey and $privatekey in

index.php

<html>
<head>
<title>Sample Email Form</title>
</head>
<body>

<script>
function checkForm() {
if (document.forms.myphpform.elements['yname'].value.length == 0) {
alert('Please enter a value for the "Name" field');
return false;
}
if (document.forms.myphpform.elements['email'].value.length == 0) {
alert('Please enter a value for the "Email" field');
return false;
}
if (document.forms.myphpform.elements['message'].value.length == 0) {
alert('Please enter a value for the "Message" field');
return false;
}

return true;
}
</script>

<form action="?done=1" method="post" name="myphpform" onSubmit="return checkForm()" >
<table border=0>
<tr>
<td>Your Name:</td> <td><input type="text" name="yname" size="50" maxlength="50" value="" /></td>
</tr>

<tr>
<td>Your Email:</td> <td><input type="text" name="email" size="50" maxlength="50" value="" /></td>
</tr>

<tr>
<td>Message:</td> <td><input type="text" name="message" size="50" maxlength="50" value="" /></td>
</tr>
<tr>
<td>Are you a human being?</td>
<td>
<?php

@require_once('recaptchalib.php');
$publickey = "YOUR-PUBLIC-KEY";
$privatekey = "YOUR-PRIVATE-KEY";

$resp = null;
$error = null;

# are we submitting the page?
if ($_POST["submit"]) {
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);

if ($resp->is_valid) {
$to="you@example.com";
$subject="Feedback from example.com";
$body=" Message via webform:

Name: " .$_POST["yname"] . "\n

Email: " .$_POST["email"] . "\n

Message: " .$_POST["message"] . "\n";
/* send email */
mail($to,$subject,$body);
echo "<p>Email sent!</p>";
exit(1);

} else {
echo "Captcha Wrong";
}
}
echo recaptcha_get_html($publickey, $error);
?>
<td/>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" value="submit" /></td>
</tr>
</table>
</form>
</body>

</html>

Tuesday, 2 September 2014

How to Show and Hide content using read more... option

This is an example using this you can easily make a read more content file.

Suppose you want to show only some content having read more... option.Then using this code you
can use easily show an hide content as per your need.
Its very simple.
Note For more read more... option, there should be id name will be unique to execute or show your content.
because of js will call values according to your data.

************** style part **************

<style type="text/css">
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
padding-left: 8px;
}
a.hideLink {
}
a.showLink:hover, a.hideLink:hover {
}
</style>

************** style part END **************
************** JS part **************
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
************** JS part END **************
************** DIV part **************
<span class="ritu">
<a href="" id="example-show" class="showLink" onclick="showHide('example');return false;">Read More...</a></span>
<div id="example" class="more">
<p>This Is Hidden content</p>
<p><a href="" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Close...</a></p>
</div>

************** DIV part END**************