9PHPinfo - Jquery, Ajax, PHP, Demos, Web Design, Javascript, Software and MySQL

17 Ocak 2013 Perşembe

Simple Drop Down Menu with Jquery and CSS

This post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu with CSS, HTML and Jquery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects.

Live Demo

HTML Code
Simple HTML code

<div class="dropdown">
<a class="account" >My Account</a>

<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li ><a href="#settings">Settings</a></li>
<li ><a href="#feedback">Send Feedback</a></li>
</ul>
</div>

</div>

JavaScript
Contains javascipt code. $(".account").click(function(){}- account is the class name of the My Account anchor tag. Using $(this).attr('id') calling id value of the anchor tag and based on condition showing .submenu div box and the same time $(this).attr('id', '1') adding id value too.

Document click on document $(document).mouseup(function() hiding the .submenu
CSS Code

.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

16 Ocak 2013 Çarşamba

Auto Load and Refresh Div every 10 Seconds with jQuery.

Have you seen this Twitter Search and Facebook shows most recent tweets/posts count from the database every 10 seconds on top of the page. I had developed like this with jQuery and Ajax. It's simple just 5 lines of code

Live Demo

Example 1

Index.html
Contains javascript and HTML code. Take a look at load("record_cound.php")

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()

{

$('#load_tweets').load('record_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds


<body>
<div id="load_tweets"> </div>

</body>

</script>

record_count.php
Just printing "9lessons | programming" every 10 seconds

<?php
echo "9lessons | Programming blog..............";

?>


Example 2

index.php
Contains PHP code you have to pass the search box value twitter.com/search?q="some thing" to $search_word in facebook pass the user id or user session value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()

{

$('#load_tweets').load('record_count.php?q=<?php echo $search_word;?>').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds


<body>
<div id="load_tweets"> </div>

</body>

</script>

record_count.php
Counting tweets/posts from the database.

<?php

$search_word=$_GET['q'];
$sql = mysql_query("Select id form Messages where message 
LIKE '%$search_word%'");
$record_count=mysql_num_rows($sql);

//Display count.........
echo $record_count;

?>

15 Ocak 2013 Salı

Gravatar Login Box Design with Jquery, CSS and PHP.

I had designed a simple interesting login box with contains Gravatar image, just importing user avatar from Gravatar.com based on email ID. This post is very basic level CSS implementation and few lines of Jquery and PHP code. I hope this login box design gives special flavor to to your web project. Before trying this live demo upload your avatar at Gravatar.

Live Demo
JavaScript
Contains javascipt code. $(".user").keyup(function(){}- user is the class name of input text. Using $(this).val() calling input value. If email value is match to email regularexpression syntax the ajax request goes to avatar.php.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$("#username").focus();
$(".user").keyup(function()
{
var email=$(this).val();
var dataString = 'email='+ email ;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

if(ck_email.test(email))
{
$.ajax({
type: "POST",
url: "avatar.php",
data: dataString,
cache: false,
success: function(html)
{
$("#img_box").html("<img src='http://www.gravatar.com/avatar.php?gravatar_id="+html+"?d=mm' />");
}
});
}

});
});
</script>

HTML Code

<div id='login_container'>
<div id='login_box'>
<div id='img_box'><img src='http://www.gravatar.com/avatar/?d=mm' /></div>
<form method='post' action='login.php'>
<input type='text' id='username'  class='input user'/> 
<input type='password' id='password' class='input passcode'/>
<input type='submit' value=' Login ' class='btn' />
</form>
</div>
</div> 

avatar.php
Contains simple PHP code getting the POST email value and converting into MD5 encoding

<?php
if($_POST['email'])
{
$email=$_POST['email'];
$lowercase = strtolower($email);
$image = md5($lowercase);
echo $image;
}
?>

CSS

#login_container
{
background:url(blue.jpg) #006699;
overflow: auto;
width: 300px;
}
#login_box
{
padding:60px 30px 30px 30px;
border:solid 1px #dedede;
width:238px;
background-color:#fcfcfc;
margin-top:70px;
}
#img_box
{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: 77px;
margin-top: -108px;
position: absolute;
width: 86px;
height: 86px;
}

Multiple File Drag and Drop Upload using HTML5 and Jquery.

Are you looking for Drag and Drop multiple file upload using HTML5. Just take a look at this post, I had implemented this system with using jquery and PHP that uploads multiple files into server. This script helps you to enrich your web applications upload system. It works with all modern browsers try live demo and drop files.

Multiple File Drag and Drop Upload this will work in modern browsers like Crome, Firefox and Safari, File uploads happening through ajax
for this I implemented with Form Data and File Reader javascript API.

Live Demo
Requirements
- Jquery (tested with 1.7+)
- HTML 5

How to use
Just include Jquery library and multiupload.js files available in download script.

Javascript Code
All config parameters are required. If you want to allow other files formats, add in valid files variable.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/multiupload.js"></script>
<script type="text/javascript">
var config = {
// Valid file formats
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif", 
form: "demoFiler", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
uploadUrl: "upload.php" // Server side file url
}
//Initiate file uploader.
$(document).ready(function()
{
initMultiUploader(config);
});
</script>

upload.php
Simple PHP code uploading files from client mechanic to server location uploadsfolder.

if($_SERVER['REQUEST_METHOD'] == "POST")
{
if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name']))
{
echo($_POST['index']); // to validate 
}
exit;
}

HTML5 Code
HTML5 drag and drop form.

<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here</h1>
</div>
<form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
<input type="file" name="multiUpload" id="multiUpload" multiple />
<input type="submit" name="submitHandler" id="submitHandler" value="Upload" />
</form>
<div class="progressBar">
<div class="status"></div>
</div>

Facebook Invite Friends API

Have you noticed the new button "Bring Your Friends" just take a quick look at the page position top right. Actually this is Facebook invite friends API system. For implementing this you have to create a Facebook application to setup your webpage canvas URL, just few lines of code but before that your web page should be SSL (https) enable.

live demo
Facebook Application
You have to create a Facebook application at developers.facebook.com click here. Here selected text is Facebook app id.

Facebook supports only https canvas URL, my next post I will explain how to configure SSL.

Code
You have to modify appId value.

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'APP_ID',
cookie:true,
status:true,
xfbml:true
});

function FacebookInviteFriends()
{
FB.ui({
method: 'apprequests',
message: 'Your Message diaolog'
});
}
</script>


//HTML Code
<div id="fb-root"></div>
<a href='#' onclick="FacebookInviteFriends();"> 
Facebook Invite Friends Link
</a>

Facebook invite friends screen.

Code IFrame
The following code is for breaking Iframe, include this code into your webpage.

<script type='text/javascript'>
if (top.location!= self.location)
{
top.location = self.location
}
</script>

SSL Certificate Installation.

I received many requests from my readers that asked to me how to configure SSL(https) for website like 9lessons labs. Actually I enable SSL for Facebook Application integration, nowadays most of the top sites allowing only secure https URL. In this post I explained few steps how to buy and setup a SSL certificate and configuration with XAMPP server in Ubuntu environment.

Step 1
Generating KEY file

root:/home# openssl genrsa -des3 -out domain.key 1024

Generating RSA private key, 1024 bit long modulus
....++++++
............++++++
e is 65537 (0x10001)
Enter pass phrase for domain.key: Password
Verifying - Enter pass phrase for domain.key: Password

Step 2
Generating server CRT certificate file.

root:/home# openssl req -new -key domain.key -out domain.crt

Enter pass phrase for domain.key: Key Password

Country Name (2 letter code) [AU]:IN // Country Code 
State or Province Name (full name) [Some-State]:Tamilnadu // State 
Locality Name (eg, city) []:Chennai // City 
Organization Name (eg, company) [Internet Widgits Pty Ltd]:9lessons 
Organizational Unit Name (eg, section) []:software
Common Name (eg, YOUR name) []:www.domain.com //
Email Address []:admin@domain.com // Domain Verification 


Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:SSL Password // No special characters
An optional company name []:egglabs

Where to buy?
Many are available on web, I suggest go for www.thawte.com SSL 123 Certificate and Thawte.com providing 21 days free trail click here. I ordered SSL 123 certificate from Bigrock these people providing Thawte certificates little cheaper.

Once SSL certificate order successful, download the domain.crt from your server and submit to SSL provider. SSL provider company eg. thawte will send you the domain verification mail to admin@domain.com which you specified email in CRT file.

Sample CRT file
After domain owner confirmation SSL provider generate a new SSL CRT file. You can download this from SSL provider admin panel based on the order.

Copy the new generated CRT text into notepad and save as into ssldomain.crt. Upload this into your server.

Step 3
Copy files in XAMPP directories

root:/home# cp ssldomain.crt /opt/lampp/etc/ssl.crt/ssldomain.crt
root:/home# cp domain.key /opt/lampp/etc/ssl.key/domain.key

Step 4
Enable SSL extension in /opt/lampp/etc/httpd.conf

LoadModule ssl_module modules/mod_ssl.so

Step 5
Modify a Virtual Host /opt/lampp/etc/extra/httpd-ssl.conf

<VirtualHost _default_:443>

# General setup for the virtual host
DocumentRoot "/opt/lampp/htdocs"
ServerName www.domain.com
ServerAdmin admin@domain.com
ErrorLog /opt/lampp/logs/error_log
TransferLog /opt/lampp/logs/access_log

# Server Certificate:
SSLCertificateFile /opt/lampp/etc/ssl.crt/ssldomain.crt

# Server Private Key:
SSLCertificateKeyFile /opt/lampp/etc/ssl.key/domain.key

# Certificate Authority (CA):
SSLCACertificateFile /opt/lampp/etc/ssl.crt/ca.crt
</VirtualHost>

You can download ca.crt file from thawte.com, or click here to download this file. Same way upload into server copy into /opt/lampp/etc/ssl.crt/ directory.

Step 6
Enable the SSL port 443