article

Wednesday, August 1, 2012

Tooltips CSS and jQuery

Tooltips CSS and jQuery 





 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<style type="text/css">
body {
 margin: 0; padding: 0;
 font: normal 12px Verdana, Geneva, sans-serif;
 line-height: 1.8em;
 color: #333;
}
* {outline: none;}
a {color: #d60000; text-decoration: none;}
.tip {
 color: #fff;
 background:#1d1d1d;
 display:none; 
 padding:10px;
 position:absolute; z-index:1000;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}
</style>
<script type="text/javascript">
$(document).ready(function() {
 //Tooltips
 $(".tip_trigger").hover(function(){
  tip = $(this).find('.tip');
  tip.show(); //Show tooltip
 }, function() {
  tip.hide(); //Hide tooltip    
 }).mousemove(function(e) {
  var mousex = e.pageX + 20; //Get X coodrinates
  var mousey = e.pageY + 20; //Get Y coordinates
  var tipWidth = tip.width(); //Find width of tooltip
  var tipHeight = tip.height(); //Find height of tooltip
  
  //Distance of element from the right edge of viewport
  var tipVisX = $(window).width() - (mousex + tipWidth);
  //Distance of element from the bottom of viewport
  var tipVisY = $(window).height() - (mousey + tipHeight);
    
  if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
   mousex = e.pageX - tipWidth - 20;
  } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
   mousey = e.pageY - tipHeight - 20;
  } 
  tip.css({  top: mousey, left: mousex });
 });
});
</script>
<div class="container">
    <p>
  <a class="tip_trigger" href="#">Tooltiptext 
   <span class="tip" style="width: 400px;">
    <img src="naruto.jpg" style="float: left; margin-right: 20px;"/>
     http://r-ednalan.blogspot.com/ alis augue accumsan vulputate aptent vel aptent iusto ullamcorper vero. delenit hos dolore occuro tation euismod eum quadrum si nulla sa
   </span>
  </a>
 </p>
</div>

Monday, July 30, 2012

php pagination

php pagination



 
<style>
.paginate {
font-family:Arial, Helvetica, sans-serif;
 padding: 3px;
 margin: 3px;
}
.paginate a {
 padding:2px 5px 2px 5px;
 margin:2px;
 border:1px solid #999;
 text-decoration:none;
 color: #666;
}
.paginate a:hover, .paginate a:active {
 border: 1px solid #999;
 color: #000;
}
.paginate span.current {
    margin: 2px;
 padding: 2px 5px 2px 5px;
  border: 1px solid #999;
  
  font-weight: bold;
  background-color: #999;
  color: #FFF;
 }
 .paginate span.disabled {
  padding:2px 5px 2px 5px;
  margin:2px;
  border:1px solid #eee;
  color:#DDD;
 }
 li{
  padding:4px;
  margin-bottom:3px;
  background-color:#FCC;
  list-style:none;}
 ul{margin:6px;
 padding:0px;} 
</style>
<?php
 include('connect.php'); 
 $tableName="country";  
 $targetpage = "index.php";  
 $limit = 10; 
 $query = "SELECT COUNT(*) as num FROM $tableName";
 $total_pages = mysql_fetch_array(mysql_query($query));
 $total_pages = $total_pages['num'];
 $stages = 3;
 $page = mysql_escape_string($_GET['page']);
 if($page){
  $start = ($page - 1) * $limit; 
 }else{
  $start = 0; 
  } 
    // Get page data
 $query1 = "SELECT * FROM $tableName LIMIT $start, $limit";
 $result = mysql_query($query1);
 // Initial page num setup
 if ($page == 0){$page = 1;}
 $prev = $page - 1; 
 $next = $page + 1;       
 $lastpage = ceil($total_pages/$limit);  
 $LastPagem1 = $lastpage - 1;     
 $paginate = '';
 if($lastpage > 1)
 { 
  $paginate .= "<div class='paginate'>";
  // Previous
  if ($page > 1){
   $paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
  }else{
   $paginate.= "<span class='disabled'>previous</span>"; }
  // Pages 
  if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
  { 
   for ($counter = 1; $counter <= $lastpage; $counter++)
   {
    if ($counter == $page){
     $paginate.= "<span class='current'>$counter</span>";
    }else{
     $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}     
   }
  }
  elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
  {
   // Beginning only hide later pages
   if($page < 1 + ($stages * 2))  
   {
    for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
    {
     if ($counter == $page){
      $paginate.= "<span class='current'>$counter</span>";
     }else{
      $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}     
    }
    $paginate.= "...";
    $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
    $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";  
   }
   // Middle hide some front and some back
   elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
   {
    $paginate.= "<a href='$targetpage?page=1'>1</a>";
    $paginate.= "<a href='$targetpage?page=2'>2</a>";
    $paginate.= "...";
    for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
    {
     if ($counter == $page){
      $paginate.= "<span class='current'>$counter</span>";
     }else{
      $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}     
    }
    $paginate.= "...";
    $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
    $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";  
   }
   // End only hide early pages
   else
   {
    $paginate.= "<a href='$targetpage?page=1'>1</a>";
    $paginate.= "<a href='$targetpage?page=2'>2</a>";
    $paginate.= "...";
    for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
    {
     if ($counter == $page){
      $paginate.= "<span class='current'>$counter</span>";
     }else{
      $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}     
    }
   }
  }
  // Next
  if ($page < $counter - 1){ 
   $paginate.= "<a href='$targetpage?page=$next'>next</a>";
  }else{
   $paginate.= "<span class='disabled'>next</span>";
   }
  $paginate.= "</div>";  
}
 echo $total_pages.' Results';
 // pagination
 echo $paginate;
?>
<ul>
<?php 
 while($row = mysql_fetch_array($result))
  {
  echo '<li>'.$row['country'].'</li>';
  }
 ?>
</ul>
<?php
$dbhost       = "localhost";
$dbuser       = "root";
$dbpass       = "ednalan";
$dbname       = "dbname";
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname);
?>

Wednesday, July 25, 2012

Pagination with jquery, Ajax and PHP

Pagination with jquery, Ajax and PHP

Download
 
//index.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript">
            $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }                
                function loadData(page){
                    loading_show();                    
                    $.ajax
                    ({
                        type: "POST",
                        url: "load_data.php",
                        data: "page="+page,
                        success: function(msg)
                        {
                            $("#container").ajaxComplete(function(event, request, settings)
                            {
                                loading_hide();
                                $("#container").html(msg);
                            });
                        }
                    });
                }
                loadData(1);  // For first time page load default results
                $('#container .pagination li.active').live('click',function(){
                    var page = $(this).attr('p');
                    loadData(page);
                });           
                $('#go_btn').live('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);
                    }else{
                        alert('Enter a PAGE between 1 and '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }
                    
                });
            });
</script>
<style type="text/css">
            body{
                width: 800px;
                margin: 0 auto;
                padding: 0;
            }
            #loading{
                width: 100%;
                position: absolute;
                top: 100px;
                left: 100px;
    margin-top:200px;
            }
            #container .pagination ul li.inactive,
            #container .pagination ul li.inactive:hover{
                background-color:#ededed;
                color:#bababa;
                border:1px solid #bababa;
                cursor: default;
            }
            #container .data ul li{
                list-style: none;
                font-family: verdana;
                margin: 5px 0 5px 0;
                color: #000;
                font-size: 13px;
            }
            #container .pagination{
                width: 800px;
                height: 25px;
            }
            #container .pagination ul li{
                list-style: none;
                float: left;
                border: 1px solid #006699;
                padding: 2px 6px 2px 6px;
                margin: 0 3px 0 3px;
                font-family: arial;
                font-size: 14px;
                color: #006699;
                font-weight: bold;
                background-color: #f2f2f2;
            }
            #container .pagination ul li:hover{
                color: #fff;
                background-color: #006699;
                cursor: pointer;
            }
   .go_button
   {
   background-color:#f2f2f2;border:1px solid #006699;color:#cc0000;padding:2px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;margin-left:3px;
   }
   .total
   {
   float:right;font-family:arial;color:#999;
   }
        </style>
<div align="center" style="font-size:24px;color:#cc0000;font-weight:bold">Pagination with jquery, Ajax and PHP</div>
        <div id="loading"></div>
        <div id="container">
            <div class="data"></div>
            <div class="pagination"></div>
        </div>
//load_data.php
<?php
if($_POST['page'])
{
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 15;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";

$query_pag_data = "SELECT mes_id,message from messages LIMIT $start, $per_page";
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$msg = "";
while ($row = mysql_fetch_array($result_pag_data)) {
$htmlmsg=htmlentities($row['message']);
    $msg .= "<li><b>" . $row['mes_id'] . "</b> " . $htmlmsg . "</li>";
}
$msg = "<div class='data'><ul>" . $msg . "</ul></div>"; // Content for Data


/* --------------------------------------------- */
$query_pag_num = "SELECT COUNT(*) AS count FROM messages";
$result_pag_num = mysql_query($query_pag_num);
$row = mysql_fetch_array($result_pag_num);
$count = $row['count'];
$no_of_paginations = ceil($count / $per_page);

/* ---------------Calculating the starting and endign values for the loop----------------------------------- */
if ($cur_page >= 7) {
    $start_loop = $cur_page - 3;
    if ($no_of_paginations > $cur_page + 3)
        $end_loop = $cur_page + 3;
    else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
        $start_loop = $no_of_paginations - 6;
        $end_loop = $no_of_paginations;
    } else {
        $end_loop = $no_of_paginations;
    }
} else {
    $start_loop = 1;
    if ($no_of_paginations > 7)
        $end_loop = 7;
    else
        $end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul>";

// FOR ENABLING THE FIRST BUTTON
if ($first_btn && $cur_page > 1) {
    $msg .= "<li p='1' class='active'>First</li>";
} else if ($first_btn) {
    $msg .= "<li p='1' class='inactive'>First</li>";
}

// FOR ENABLING THE PREVIOUS BUTTON
if ($previous_btn && $cur_page > 1) {
    $pre = $cur_page - 1;
    $msg .= "<li p='$pre' class='active'>Previous</li>";
} else if ($previous_btn) {
    $msg .= "<li class='inactive'>Previous</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {

    if ($cur_page == $i)
        $msg .= "<li p='$i' style='color:#fff;background-color:#006699;' class='active'>{$i}</li>";
    else
        $msg .= "<li p='$i' class='active'>{$i}</li>";
}

// TO ENABLE THE NEXT BUTTON
if ($next_btn && $cur_page < $no_of_paginations) {
    $nex = $cur_page + 1;
    $msg .= "<li p='$nex' class='active'>Next</li>";
} else if ($next_btn) {
    $msg .= "<li class='inactive'>Next</li>";
}

// TO ENABLE THE END BUTTON
if ($last_btn && $cur_page < $no_of_paginations) {
    $msg .= "<li p='$no_of_paginations' class='active'>Last</li>";
} else if ($last_btn) {
    $msg .= "<li p='$no_of_paginations' class='inactive'>Last</li>";
}
$goto = "<input type='text' class='goto' size='1' style='margin-top:-1px;margin-left:60px;padding:2px;text-align:center;'/><input type='button' id='go_btn' class='go_button' value='Go'/>";
$total_string = "<span class='total' a='$no_of_paginations'>Page <b>" . $cur_page . "</b> of <b>$no_of_paginations</b></span>";
$msg = $msg . "</ul>" . $goto . $total_string . "</div>";  // Content for pagination
echo $msg;
}
//db.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "ednalan";
$mysql_database = "dbname";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>

Tuesday, July 17, 2012

Multiple Checkbox Select/Deselect jquery

Multiple Checkbox Select/Deselect jquery




 
<STYLE>
body, input{
 font-family: Calibri, Arial;
 margin:0px;
}
h1 {
 margin: 0 0 0 20px;
}
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }

#header {
 height:50px;
 background-color:#ddd;
 border-bottom:1px solid #aaa;
 width:100%;
}
#footer {
 font-size: 12px;
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
 text-align:center;
}

table {
 width: 300px;
 border: 1px solid;
 border-collapse:collapse;
 margin: 0 0 0 20px;
}
th {
 background-color:#3E6DB0;
 color: white;
 padding: 5px;
}
</STYLE>
<H1>Multiple Checkbox Select/Deselect</H1>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table border="1">
<tr>
 <th><input type="checkbox" id="selectall"/></th>
 <th>Programming Language</th>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
 <td>PHP Programming</td>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
 <td>Java Script</td>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
 <td>Jquery</td>
</tr>
<tr>
 <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
 <td>Java</td>
</tr>
</table>
<SCRIPT>
$(function(){
 // add multiple select / deselect functionality
 $("#selectall").click(function () {
    $('.case').attr('checked', this.checked);
 });
 // if all checkbox are selected, check the selectall checkbox
 // and viceversa
 $(".case").click(function(){

  if($(".case").length == $(".case:checked").length) {
   $("#selectall").attr("checked", "checked");
  } else {
   $("#selectall").removeAttr("checked");
  }

 });
});
</SCRIPT>

Thursday, July 12, 2012

Login Register jquery ajax

Login Register jquery ajax

 Download




//Index.php
<?php
include 'conf.php';
function secure()
{
 $username = sql_secure($_COOKIE['login_u']);
 $password = sql_secure($_COOKIE['login_p']);
 $sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
 $query = mysql_query($sql);
 $num_rows = mysql_num_rows($query);
 if ($num_rows == '0')
 {
   $url = $_SERVER['REQUEST_URI'];
   header("location:login.php?url=$url");  
   exit();     
 }
}
secure();
?>
If you see this text you have logged in
conf.php
<?php
$mysql_host     = 'localhost';
$mysql_username = 'root';
$mysql_password = 'ednalan';
mysql_connect("$mysql_host","$mysql_username","$mysql_password");
mysql_select_db("dbname");
#A function to secure SQL queries in the script.
function sql_secure($string) {
  if (get_magic_quotes_gpc()) {
   $string = stripslashes($string);
  }
  $string = mysql_real_escape_string($string);
 return $string;
}
?>
login.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
html,body {
 margin :0px;
 padding:0px;
}
.login_wrap {
 position: absolute;
 top: 0px;
 left: 40px;
 font-family: Arial, Helvetica, sans-serif;
 color: #95B841;
}
.login_button {
 background-color: #E5E5E5;
 border-right-width: 3px;
 border-bottom-width: 3px;
 border-left-width: 3px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #95B841;
 border-bottom-color: #95B841;
 border-left-color: #95B841;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 10px;
 float: left;
 -webkit-border-bottom-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
 cursor:pointer;
 color:#0099FF;
 font-weight:bold;
}
input {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 background-color: #FFF;
 font-weight: bold;
 padding: 3px;
 margin: 2px;
 color: #0099FF;
 font-family: Arial, Helvetica, sans-serif;
 border: 3px solid #95B841;
}
.login_error {
 color: #0099FF;
 padding: 20px;
 width: 200px;
 margin-top: 100px;
 margin-right: auto;
 margin-left: auto;
 background-color: #E5E5E5;
 border: 2px solid #95B841;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 font-weight: bold;
}
.register, .cancel {
 color: #0099FF;
 font-size: 10px;
 text-decoration: none;
 padding-top: 3px;
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #95B841;
}
.registration_box_wrap {
 z-index: 888;
 height: 100%;
 width: 100%;
 background-color: #E5E5E5;
 position: absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
 top: 0px;
}
.registration_box {
 background-color: #E5E5E5;
 height: auto;
 width: 200px;
 margin-top: 70px;
 margin-right: auto;
 margin-left: auto;
 border: 5px solid #95B841;
 z-index: 999;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 -khtml-opacity: 1;
 opacity: 1;
 position: relative;
 padding: 20px;
 color: #95B841;
 font-family: Arial, Helvetica, sans-serif;
 color: #0099FF;
}
.registration_box h2 {
 color: #0099FF;
 font-family: Arial, Helvetica, sans-serif;
}
.registration_error {
 font-size: 14px;
 padding: 5px;
 border: thin solid #95B841;
 margin: 5px;
 text-align: center;
}
.login_box {
 background-color: #E5E5E5;
 padding: 5px;
 margin-bottom: -3px;
 border-right-width: 3px;
 border-bottom-width: 3px;
 border-left-width: 3px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #95B841;
 border-bottom-color: #95B841;
 border-left-color: #95B841;
 -webkit-border-bottom-right-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 border-bottom-right-radius: 5px;
}
.right_box {
 float: right;
 top: 0px;
 right: 20px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 24px;
 position: absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
 $('.login_box').hide();
    $('.login_button').click(function () {
        $('.login_box').toggle();
        this.hide();
    });
    $('input[type="text"]').focus(function () {
        if (this.value == this.defaultValue) {
            this.value = '';
        }
        if (this.value != this.defaultValue) {
            this.select();
        }
    });
    $('input[type="text"]').blur( function () {
  if (this.value == "") {
   this.value = this.defaultValue;
  }
 });
    $('#password_1').focus(function () {
        $('#password_1').remove();
        $('#password').show();
  $('#password').val() = "";
        $('#password').focus();
    });
    $('#submit').click(function () {
        var str = $('#login_form').serialize();
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: str,
            success: function (msg) {
                if (msg.length == "") {
            $('.login_error').html("Success, redirecting...").fadeIn().delay(3000).fadeOut(
      function() { window.location.replace('<?php echo $_GET['url'];?>'); }
      );
                     
                } else {
                    $('.login_error').html(msg).fadeIn().delay(3000).fadeOut();
                }
            }
        });
  return false;
    });
 $('#Register').click(function () {
        var str = $('#register_form').serialize();
        $.ajax({
            type: "POST",
            url: "register.php",
            data: str,
            success: function (msg) {
                if (msg.length == "") {
    $('.registration_error').html("You Have Successfully Registered.")
    .fadeIn()
    .delay(3000)
    .slideUp();
    $('.registration_box_wrap,.registration_box').delay(1500).fadeOut();
                } else {
                    $('.registration_error').html(msg)
     .fadeIn()
     .delay(3000)
     .slideUp();
                }
            }
        });
  return false;
    });
    $('.register').click(function () {
        $('.registration_box_wrap').fadeIn(500);
        $('.registration_box').fadeIn(200);
    });
    $('.cancel').click(function () {
        $('.registration_box_wrap').fadeOut(500);
        $('.registration_box').fadeOut(200);
    });
});
</script>
<div class="login_error" style="display:none;"></div>
<div class="login_wrap">
 <div class="login_box" style="display:;">
    <br />
    <form id="login_form" name="login_form" method="post" action="">
  <input name="username" type="text" id="username" value="Username" />
  <br />
  <input name="password_1" type="text" id="password_1" value="Password" />
  <input name="password" type="password" id="password" style="display:none;" /><br />
  <input name="Button" type="button" value="Login!" id="submit" />
    </form>
    <a class="register" href="#">Not Registered? Click Here!</a><br />
 </div>
    <div class="login_button">Login</div>
</div>
<div class="registration_box" style="display:none;">
  <h2>Register</h2>
  <div class="registration_error" style="display:none;"></div>
  <form id="register_form" name="form1" method="post" action="">
    Username<br />
    <input type="text" name="username" id="username" />
    <br />
    Password<br />
    <input type="password" name="password" id="textfield2" />
    <br />
    Email<br />
    <input type="text" name="email" id="email" />
    <br />
    <br />
    <input type="submit" name="Register" id="Register" value="Register" />
 or <a class="cancel" href="#">cancel</a>
  </form>
</div>
<div class="registration_box_wrap"  style="display:none;"></div>
Register.php
<?php
include 'conf.php';
$username = sql_secure($_POST['username']);
$password = sql_secure($_POST['password']);
$email    = sql_secure($_POST['email']);
#Create a unique code which will be used to confirm user accounts.
$confirm_code = md5(rand(0,99999).rand(0,999999));
#Check if data is of required lenght.
if (strlen($username) < 3 || strlen($password) < 3 || strlen($email) < 3)
{
 die("All Fields Must Be At Least 3 Characters");
}
if (!preg_match('/^[a-zA-Z0-9&\'\.\-_\+]+\@[a-zA-Z0-9.-]+\.+[a-zA-Z]{2,6}$/', $email)) { 
 die("Email Address Not Vaild.");
}
#Check if username or email is already in use.
$password = md5($password);
$query = mysql_query("SELECT * FROM users WHERE username = '$username' OR email = '$email'");
if (mysql_num_rows($query) >= '1')
{
 die("Username Or Email Already In Use"); 
}
#Insert the user's information into the database.
$sql = mysql_query("INSERT INTO users (
username,
password,
email,
confirm_code,
reg_date) VALUES
('$username', '$password', '$email', '$confirm_code', now())");
if (!$sql) {
 die("Something Has Gone Wrong");
}
?>

Sunday, July 8, 2012

Loading Pages Using jquery

Loading Pages Using jquery





 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
<script type="text/javascript">
$(document).ready(function()
{
content();
topbanner();
sidebanner();
function content() {
 $.ajax({
 type: "POST",
 url: "content.php",
 data: "" , 
 beforeSend: function() { $("div#content").html('<span class="loading">Loading...</span>'); },
 cache: false,
 success: function(data){ 
 $("#content").html(data);
 }
 });
}
function topbanner() {
 $.ajax({
 type: "POST",
 url: "topbanner.php",
 data: "" , 
 beforeSend: function() { $("div#topbanner").html('<span class="loading">Loading...</span>'); },
 cache: false,
 success: function(data){ 
 $("#topbanner").html(data);
 }
 });
}
function sidebanner() {
 $.ajax({
 type: "POST",
 url: "sidebanner.php",
 data: "" , 
 beforeSend: function() { $("div#sidebanner").html('<span class="loading">Loading...</span>'); },
 cache: false,
 success: function(data){ 
 $("#sidebanner").html(data);
 }
 });
}
});
</script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
}
#main
{
width:400px; border:solid 2px #dedede; margin-top:30px; height:400px
}
#topbanner
{
height:100px; border-bottom:solid 2px #dedede
}
#content
{
float:left;width:260px; height:400px
}
#sidebanner
{
float:left;width:130px; height:300px;border-left:solid 2px #dedede
}
.loading
{
color:#cc0000;
}
</style>

<div id="main">
<div id="topbanner"></div>
<div id="content"></div>
<div id="sidebanner"></div>
</div>
<?php
//content.php
echo '<h2>Content.</h2> ';
?>
<?php
//topbanner.php
echo 'Top Banner';
?>
<?php
//sidebanner.php
echo 'Side Bar';
?>

Saturday, July 7, 2012

Set Modal box cookie using colorbox jquery plugins

Set Modal box cookie using colorbox jquery plugins

Download

 
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="js/colorbox.js"></script>
<link media="screen" rel="stylesheet" href="css/colorbox.css" /> 
<style>
 #subscribe_popup,.overlays {
 font:12px/1.2 Arial,Helvetica,san-serif;
 background:#fff !important;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;
 border-bottom:1px solid #000;
 }

 #subscribe_popup,.overlays a,#subscribe_popup,.overlays a:hover,#subscribe_popup,.overlays a:visited {
 text-decoration:none;
 }
 .box-title {
 color:#2C2D31;
 font-size:25px;
 font-weight:700;
 text-align:left;
 margin:20px 0 5px;
 } 
 #subs-container {
 position:relative;
 padding:15px 0 10px;
 }
</style>   
<script>
$("document").ready(function (){ 
       // load the overlay
        if (document.cookie.indexOf('visited=true') == -1) {
   var fifteenDays = 1000*60*60*24*15;
   var expires = new Date((new Date()).valueOf() + fifteenDays);
   document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
  }
  $(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
 });
</script>
<a href="#" class="open_popup">Click here to open the popup</a>
<div style='display:none'>
  <div id='subscribe_popup' style='padding:10px;'>
    <h2 class="box-title">Title</h2>
    <div id="subs-container" class="clearfix">
      <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus</p>
    </div>
  </div>
</div>

Friday, July 6, 2012

Dyanamic Drop down combo box using Ajax Post jquery

Dyanamic Drop down combo box using Ajax Post jquery


 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 jQuery(document).ready(function(){    
  jQuery("select[name='country']").change(function(){    
   var optionValue = jQuery("select[name='country']").val();    
   jQuery.ajax({
    type: "POST",
    url: "data.php",
    data: ({country: optionValue, status: 1}),
    beforeSend: function(){ jQuery("#ajaxLoader").show(); },
    complete: function(){ jQuery("#ajaxLoader").hide(); },
    success: function(response){
     jQuery("#cityAjax").html(response);
     jQuery("#cityAjax").show();
    }
   });   
  });
 });
</script>
Countries: 
<select name="country">
 <option value="">Please Select</option>
 <option value="1">Nepal</option>
 <option value="2">India</option>
 <option value="3">China</option>
 <option value="4">USA</option>
 <option value="5">UK</option>
</select>
<div id="ajaxLoader" style="display:none"><img src="../ajax-loader.gif" alt="loading..."></div>
<div id="cityAjax" style="display:none"> 
 <select name="city">
  <option value="">Please Select</option>
 </select>
</div>
<?php
$country = $_POST['country'];
if(!$country) {
 return false;
}
$cities = array(
   1 => array('Kathmandu','Bhaktapur','Patan','Pokhara','Lumbini'),
   2 => array('Delhi','Mumbai','Kolkata','Bangalore','Hyderabad','Pune','Chennai','Jaipur','Goa'),
   3 => array('Beijing','Chengdu','Lhasa','Macau','Shanghai'),
   4 => array('Los Angeles','New York','Dallas','Boston','Seattle','Washington','Las Vegas'),
   5 => array('Birmingham','Bradford','Cambridge','Derby','Lincoln','Liverpool','Manchester')
  );
$currentCities = $cities[$country];
?>
City: 
<select name="city">
 <option value="">Please Select</option>
 <?php
 foreach($currentCities as $city) {
  ?>
  <option value="<?php echo $city; ?>"><?php echo $city; ?></option>
  <?php 
 }
 ?>
</select>

Monday, July 2, 2012

jQuery Tooltip text

jQuery Tooltip text
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
$('[rel=tooltip]').bind('mouseover', function(){
 var theMessage = $(this).attr('content');
 $('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
 $(this).bind('mousemove', function(e){
  $('div.tooltip').css({
   'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
   'left': e.pageX + 15
  });
 });
}).bind('mouseout', function(){
  $('div.tooltip').fadeOut('fast', function(){
   $(this).remove();
  });
 });
});
</script>
<style>
.tooltip{
 position:absolute;
 width:250px;
 background-image:url(tip-bg.png);
 background-position:left center;
 color:#FFF;
 padding:5px 5px 5px 18px;
 font-size:12px;
 font-family:Verdana, Geneva, sans-serif;
}
.tooltip span{font-weight:700;
color:#ffea00;
}
</style>
<a href="#" alt="Text Tooltip" rel="tooltip" content="<span>Text Title</span><br/> This is an example of a text tooltip">Text Tooltip</a>

Thursday, June 28, 2012

Jquery Message Effect Delay Trick

Jquery Message Effect Delay Trick
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#show-alert').click(function() {
 $('<div class="quick-alert">Message Effect Delay Trick</div>')
 .insertAfter( $(this) )
 .fadeIn('slow')
 .animate({opacity: 1.0}, 3000)
 .fadeOut('slow', function() {
   $(this).remove();
 });
  });
});
</script>
<style>
.quick-alert {
   width: 50%;
   margin: 1em 0;
   padding: .5em;
   background: #ffa;
   border: 1px solid #a00;
   color: #a00;
   font-weight: bold;
   display: none;
 }
</style>
<input type="submit" value="Show Alert" id="show-alert">

Create a URL from a string of text with PHP like wordpress

Create a URL from a string of text with PHP like wordpress
<?php
function create_slug($string){
   $string = preg_replace( '/[«»""!?,.!@£$%^&*{};:()]+/', '', $string );
   $string = strtolower($string);
   $slug=preg_replace('/[^A-Za-z0-9-]+/', '-', $string);
   return $slug;
}
$slug = create_slug('This is my page title');
echo $slug;
// this should print out: this-is-my-page-title
?>

Animate validation feedback using jQuery

Animate validation feedback using jQuery


    <style type="text/css">
        ul, ul li
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        ul li.first
        {
            border-top: 1px solid #DFDFDF;
        }
        ul li.last
        {
            border: none;
        }
        ul p
        {
            float: left;
            margin: 0;
            width: 310px;
        }
        ul h3
        {
            float: left;
            font-size: 14px;
            font-weight: bold;
            margin: 5px 0 0 0;
            width: 200px;
            margin-left:20px;
        }
        ul li
        {
            border-bottom: 1px solid #DFDFDF;
            padding: 15px 0;
            width:600px;
            overflow:hidden;
        }
        ul input[type="text"], ul input[type="password"]
        {
            width:300px;
            padding:5px;
            position:relative;
            border:solid 1px #666;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
        }
        ul input.required 
        {
            border: solid 1px #f00;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#signup").click(function() {
                resetFields();
                var emptyfields = $("input[value=]");
                if (emptyfields.size() > 0) {
                    emptyfields.each(function() {
                        $(this).stop()
                            .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                            .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                            .animate({ left: "0px" }, 100)
                            .addClass("required");
                    });
                }
            });
        });
        function resetFields() {
            $("input[type=text], input[type=password]").removeClass("required");
        }
    </script>
    <ul>
        <li class="first">
            <h3>Your Name</h3>
            <p>
                <input type="text" value="" id="name" name="name" /></p>
        </li>
        <li>
            <h3>Email</h3>
            <p>
                <input type="text" value="" name="email"  /></p>
        </li>
        <li>
            <h3>Password</h3>
            <p>
                <input type="password" name="passwd" /></p>
        </li>
        <li class="last">
            <a id="signup" href="#"><img src="submit.jpg"/></a>
        </li>
    </ul>

Monday, June 4, 2012

HTML 5 Form

HTML 5 Form

Download
 
 <style>
  *:focus {outline: none;}
  body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
  .html5form ul {
   width:750px;
   list-style-type:none;
   list-style-position:outside;
   margin:0px;
   padding:0px;
  }
  .html5form li{
   padding:12px; 
   border-bottom:1px solid #eee;
   position:relative;
  } 
  .html5form li:first-child, .html5form li:last-child {
   border-bottom:1px solid #777;
  }
  .html5form label {
   width:150px;
   margin-top: 3px;
   display:inline-block;
   float:left;
   padding:3px;
  }
  .html5form input {
   height:20px; 
   width:220px; 
   padding:5px 8px;
  }
  .html5form button {margin-left:156px;}
  /* form element visual styles */
   .html5form input { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
   }
   .html5form input:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:70px;
   }
   /* === HTML5 validation styles === */ 
   .html5form input:required {
    background: #fff url(images/red_asterisk.png) no-repeat 98% center;
   }
   .html5form input:required:valid {
    background: #fff url(images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
   }
   .html5form input:focus:invalid {
    background: #fff url(images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
   }
   /* === Form hints === */
   .form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
   }
   .form_hint::before {
    content: "\25C0";
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
   }
   .html5form input:focus + .form_hint {display: inline;}
   .html5form input:required:valid + .form_hint {background: #28921f;}
   .html5form input:required:valid + .form_hint::before {color:#28921f;}
   /* === Button Style === */
   button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
   }
   button.submit:hover {
    opacity:.85;
    cursor: pointer; 
   }
   button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
    
   }
 </style>
<form class="html5form" action="#" method="post" name="html5form">
    <ul>
  <li>
            <label for="name">Name:</label>
            <input type="text"  placeholder="Ednalan" required />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="email" name="email" placeholder="ednalan@gmail.com" required />
            <span class="form_hint">Proper format "ednalan@gmail.com"</span>
        </li>
        <li>
         <button class="submit" type="submit">Submit Form</button>
        </li>
    </ul>
</form>

Sunday, June 3, 2012

Dynamic Loading of ComboBox using jQuery and Ajax in PHP

Dynamic Loading of ComboBox using jQuery and Ajax in PHP

Download
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.livequery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('.parent').livequery('change', function() {
  $(this).nextAll('.parent').remove();
  $(this).nextAll('label').remove();
  $('#show_sub_categories').append('<img src="loader.gif" style="float:left; margin-top:7px;" id="loader" alt="" />');
  $.post("get_chid_categories.php", {
   parent_id: $(this).val(),
  }, function(response){
   
   setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
  });
  return false;
 });
});
function finishAjax(id, response){
  $('#loader').remove();
  $('#'+id).append(unescape(response));
} 
</script>
<style>
.both h4{ font-family:Arial, Helvetica, sans-serif; margin:0px; font-size:14px;}
#search_category_id{ padding:3px; width:200px;}
.parent{ padding:3px; width:150px; float:left; margin-right:12px;}
.both{ float:left; margin:0 0px 0 0; padding:0px;}
</style>
</head>
<?php include('dbcon.php');?>
<div style="padding-left:30px; height:710px;">
 <h1>Dynamic Loading of ComboBox using jQuery and Ajax in PHP</h1>
 <br clear="all" /><br clear="all" />
 <div id="show_sub_categories">
  <select name="search_category" class="parent">
  <option value="" selected="selected">-- Categories --</option>
  <?php
  $query = "select * from ajax_categories where pid = 1";
  $results = mysql_query($query);
  while ($rows = mysql_fetch_assoc(@$results))
  {?>
   <option value="<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>
  <?php
  }?>
  </select> 
 </div>
 <br clear="all" /><br clear="all" />
</div>
//dbcon.php
<?php
$link = mysql_connect('localhost', 'root', 'ednalan');
@mysql_select_db('dbname',$link); 
?>
//get_chid_categories.php
<?php
include('dbcon.php');
if($_REQUEST)
{
 $id  = $_REQUEST['parent_id'];
 $query  = "select * from ajax_categories where pid = ".$id;
 $results  = @mysql_query( $query);
 $num_rows = @mysql_num_rows($results);
 if($num_rows > 0)
 {?>
  <select name="sub_category" class="parent">
  <option value="" selected="selected">-- Sub Category --</option>
  <?php
  while ($rows = mysql_fetch_assoc(@$results))
  {?>
   <option value="<?php echo $rows['id'];?>"><?php echo $rows['category'];?></option>
  <?php
  }?>
  </select> 
 <?php 
 }
 else{echo '<label style="padding:7px;float:left; font-size:12px;">No Record Found !</label>';}
}
?>

Saturday, June 2, 2012

Delete Records with jQuery Effect and ajax ( FadeOut and SlideUp )

Delete Records with jQuery Effect and ajax ( FadeOut and SlideUp )

Download


 
//dbconfig.php
<?
$conn = mysql_connect("localhost","root","ednalan");
mysql_select_db("dbname",$conn);
?>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();
$.ajax({
   type: "POST",
   url: "deleteajax.php",
   data: dataString,
   cache: false,
   beforeSend: function()
   {
   parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");;
   }, 
   success: function()
   {
   
 parent.slideUp('slow', function() {$(this).remove();});
  }
   
 });
return false;
 });
});
</script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.comment_box
{
background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
a
 {
 text-decoration:none;
 color:#d02b55;
 }
 a:hover
 {
 text-decoration:underline;
 color:#d02b55;
 }
 *{margin:0;padding:0;}
 ol.update
 {list-style:none;font-size:1.2em; }
 ol.update li{ height:50px; border-bottom:#dedede dashed 1px; background-color:#ffffff}
 #main
 {
 width:300px; margin-top:20px; margin-left:100px;
 font-family:"Trebuchet MS";
 }
 .delete_button
 {
 margin-left:10px;
 font-weight:bold;
 float:right;
 }
 h1
 {
 margin-top:20px;
 margin-bottom:20px;
 background-color:#dedede;
 color:#000000;
 font-size:18px;
 }
</style>
<div id="main">
<div style="font-size:18px; font-weight:bold">Delete Records with jQuery Effect<br />( FadeOut and SlideUp )</div>
<div style="height:30px"></div>
<ol class="update">
<?php
include("dbconfig.php");
$sql="select * from updates order by msg_id desc"; 
$result = mysql_query($sql); 
while($row=mysql_fetch_array($result)) 
{ 
$message=stripslashes($row["message"]);
$msg_id=$row["msg_id"];  
?>
<li><?php echo $message; ?>   <a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a></li>
<?php
}
?>
</ol>
</div>
//deleteajax.php
<?php
if($_POST['id'])
{
$id=$_POST['id'];
$id = mysql_escape_String($id);
$sql = "delete from updates where ms_id='$id'";
mysql_query( $sql);
}
?>

URL Mod_Rewrite PHP and htaccess

URL Mod_Rewrite PHP and htaccess

Download


#.htaccess
RewriteEngine On

# Check if the file or directory actually exists - if it does we dont want to redirect
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# Pass the rewritten URL onto index.php with a $_GET['url'] parameter
RewriteRule ^(.*)$ index.php?url=$1 [PT,L]
//index.php
<?php
$incommingURL = (isset($_GET['url']) ? $_GET['url'] : '');
 $url = array();
 // Split apart the URL String on the forward slashes.
 $url = explode('/', $incommingURL);
 switch($url[0]) {
  case 'home':
   include_once('home.php');
   break;
  case 'news':
   include_once('news.php');
   break;
  default:
   include_once('home.php');
   break;
 }
?>
//news.php
<h1>News</h1>
<a href="http://localhost/mod_rewrite/home/">http://localhost/mod_rewrite/home</a>

<h3>News Pages</h3>
<a href="http://localhost/mod_rewrite/news/page-1/">http://localhost/mod_rewrite/news/page-1</a><br>
<a href="http://localhost/mod_rewrite/news/page-2/">http://localhost/mod_rewrite/news/page-2</a><br>
<a href="http://localhost/mod_rewrite/news/page-3/">http://localhost/mod_rewrite/news/page-3</a>

<?php
 $pageNumber = (isset($url[1]) ? $url[1] : 'page-1');
 $page = explode('-', $pageNumber);
 echo '<h4>Page: '.$page[1].'</h4>';
?>

Jquery Ajax auto complete text box

Jquery Ajax auto complete text box

Download



 
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
 function lookup(inputString) {
  if(inputString.length == 0) {
   // Hide the suggestion box.
   $('#suggestions').hide();
  } else {
   $.post("post.php", {queryString: ""+inputString+""}, function(data){
    if(data.length >0) {
     $('#suggestions').show();
     $('#autoSuggestionsList').html(data);
    }
   });
  }
 }
 function fill(thisValue) {
  $('#inputString').val(thisValue);
  setTimeout("$('#suggestions').hide();", 200);
 }
</script>
<style type="text/css">
 body {
  font-family: Helvetica;
  font-size: 11px;
  color: #000;
 }
 h3 {
  margin: 0px;
  padding: 0px; 
 }
 .suggestionsBox {
  position: relative;
  left: 30px;
  margin: 10px 0px 0px 0px;
  width: 200px;
  background-color: #212427;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border: 2px solid #000; 
  color: #fff;
 }
 .suggestionList {
  margin: 0px;
  padding: 0px;
 }
 .suggestionList li {
  
  margin: 0px 0px 3px 0px;
  padding: 3px;
  cursor: pointer;
 }
 .suggestionList li:hover {
  background-color: #659CD8;
 }
</style>
<div>
  <form>
   <div>
    Type your county:
    <br />
    <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
   </div>
   
   <div class="suggestionsBox" id="suggestions" style="display: none;">
    <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    <div class="suggestionList" id="autoSuggestionsList">
      
    </div>
   </div>
  </form>
</div>
//post.php
<?php
 $db = new mysqli('localhost', 'root' ,'ednalan', 'dbname');
 if(!$db) {
  echo 'ERROR: Could not connect to the database.';
 } else {
  if(isset($_POST['queryString'])) {
   $queryString = $db->real_escape_string($_POST['queryString']);
   if(strlen($queryString) >0) {
    $query = $db->query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10");
    if($query) {
     while ($result = $query ->fetch_object()) {
      echo '
  • '.$result->value.'
  • '; } } else { echo 'ERROR: There was a problem with the query.'; } } else { } } else { echo 'There should be no direct access to this script!'; } } ?>

    Friday, June 1, 2012

    Jquery Ajax Submit

    Jquery Ajax Submit

    Download

     
    <link href="css/main.css" type="text/css" media="screen, projection" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
     $('#submit').click(function() {
      $('#waiting').show(500);
      $('#demoForm').hide(0);
      $('#message').hide(0);
      $.ajax({
       type : 'POST',
       url : 'post.php',
       dataType : 'json',
       data: {
        email : $('#email').val()
       },
       success : function(data){
        $('#waiting').hide(500);
        $('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
         .text(data.msg).show(500);
        if (data.error === true)
         $('#demoForm').show(500);
       },
       error : function(XMLHttpRequest, textStatus, errorThrown) {
        $('#waiting').hide(500);
        $('#message').removeClass().addClass('error')
         .text('There was an error.').show(500);
        $('#demoForm').show(500);
       }
      });
      
      return false;
     });
    });
    </script>
    <div id="wrapper">
                <div id="message" style="display: none;">
                </div>
                <div id="waiting" style="display: none;">
                    Please wait<br />
                    <img src="images/ajax-loader.gif" title="Loader" alt="Loader" />
                </div>
                <form action="" id="demoForm" method="post">
                    <fieldset>
                        <legend>Demo form</legend>
                        <span style="font-size: 0.9em;">This ajax submit demo form.</span>
                        <p>
                            <label for="email">E-Mail:</label>
                            <input type="text" name="email" id="email" value="" />
                        </p>
                        <p>
                            <input type="submit" name="submit" id="submit" style="float: right; clear: both; margin-right: 3px;" value="Submit" />
                        </p>
                    </fieldset>
                </form>
            </div>
     
    <?php
    //post.php
    sleep(3);
    if (empty($_POST['email'])) {
     $return['error'] = true;
     $return['msg'] = 'You did not enter you email.';
    }
    else {
     $return['error'] = false;
     $return['msg'] = 'You\'ve entered: ' . $_POST['email'] . '.';
    }
    echo json_encode($return);
    ?>
    

    Wednesday, May 30, 2012

    Jquery Ajax Using fancybox jquery plugins

    Jquery Ajax Using fancybox jquery plugins

    Download


     
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>
    <script>
    $(document).ready(function(){
     $("#addButton").fancybox({
      'zoomSpeedIn'  : 600,
      'zoomSpeedOut'  : 500,
      'easingIn'   : 'easeOutBack',
      'easingOut'   : 'easeInBack',
      'hideOnContentClick': false,
      'padding'   : 15
     });
     /* The submit button: */
     $('#note-submit').live('click',function(e){
      if($('.pr-body').val().length<4)
      {
       alert("The note text is too short!")
       return false;
      }
      if($('.pr-author').val().length<1)
      {
       alert("You haven't entered your name!")
       return false;
      }
      $(this).replaceWith('<img src="img/ajax_load.gif" style="margin:30px auto;display:block" />');
      var data = {
       'body'  : $('.pr-body').val(),
       'author' : $('.pr-author').val()
      };
      /* Sending an AJAX POST request: */
      $.post('post.php',data,function(msg){
       $("#addButton").fancybox.close();
      });
      e.preventDefault();
     })
     $('.note-form').live('submit',function(e){e.preventDefault();});
    });
    </script>
    <a id="addButton" class="green-button" href="add_note.html">Add a note</a>
    
    //add_note.html
    <h3 class="popupTitle">Add a new note</h3>
    <div id="noteData"> 
    <form action="" method="post" class="note-form">
    <label for="note-body">Text of the note</label>
    <textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6"></textarea>
    <label for="note-name">Your name</label>
    <input type="text" name="note-name" id="note-name" class="pr-author" value="" />
    <a id="note-submit" href="" class="green-button">Submit</a>
    </form>
    </div>
    
    //post.php
    <?php
    error_reporting(E_ALL^E_NOTICE);
    require "connect.php";
    $author = mysql_real_escape_string(strip_tags($_POST['author']));
    $body = mysql_real_escape_string(strip_tags($_POST['body']));
    /* Inserting a new record in the notes DB: */
    mysql_query(' INSERT INTO notes (text,name)
        VALUES ("'.$body.'","'.$author.'")');
    
    ?>
    

    Jquery, Ajax and php mysql tabs navigation

    Jquery, Ajax and php mysql tabs navigation

    Download 

    //dbcon.php
    <?php
    $link = mysql_connect('localhost', 'root', 'ednalan');
    @mysql_select_db('dbname',$link);
    ?>
    
    //index.php
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() { 
     $("#first-tab").addClass('button2');
    });
    function navigate_tabs(page, tab)
    { 
     showLoader();
     /// load new page
     $.post("record.php?page="+page,{
     }, function(response){
      hideLoader();
      
      $('#place').html(unescape(response)); 
     });
     /// hover on navigation
     $("#first-tab").removeClass('button2');
     $("#second-tab").removeClass('button2');
     $("#third-tab").removeClass('button2');
     $("#fourth-tab").removeClass('button2');
     $("#"+tab).addClass('button2');
    }
    //show loading bar
    function showLoader(){
     $('.search-background').fadeIn(200);
    }
    //hide loading bar
    function hideLoader(){
     $('.search-background').fadeOut(200);
    };
    </script>
    <style>
    #place{ background:#FFFFFF;height:370px; border:solid #000000 px;width:570px; padding:14px}
    #wrap{
     text-align:left;
     overflow:hidden;
     width:650px;
     height:500px;
    }
    .search-background {
     display: none;
     font-size: 13px;
     background:#999999;
     color:#FFFFFF;
     font-weight: bold;
     height:250px;
     width:600px;
     position: absolute;
     padding-top:150px;
     text-align: center;
     opacity:0.5;filter: alpha(opacity=50) ;
     text-decoration: none;
    }
    a.button{   padding:5px 15px 5px 15px;
                    text-decoration: none;
                    display: inline-block;
                    -moz-border-radius: 10px;
                    -webkit-border-radius: 10px;
                    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                    border-bottom: 1px solid rgba(0,0,0,0.25);
                    font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
                    outline:none;
                    position:relative;
                    font-size: 22px;
                    margin:10px;
                    white-space:nowrap;}
    </style>
    <div id="wrap" >
    <a href="javascript:navigate_tabs('home','first-tab');" class="button" id="first-tab">Home</a>  
       <a href="javascript:navigate_tabs('services','second-tab');" class="button" id="second-tab">Services</a>
       <a href="javascript:navigate_tabs('about','fourth-tab');" class="button" id="fourth-tab">About</a>
       <a href="javascript:navigate_tabs('contact','third-tab');" class="button" id="third-tab">Contact</a>
       <br clear="all" />
       <div id="body" align="center">
        <div class="search-background">
         <label><img src="loading.gif" alt="" /></label>
        </div>
        <div id="place">
        </div>
       </div> 
      </div>
    
    <?php
    //records.php
    include("dbcon.php");
    $userip = $_SERVER['REMOTE_ADDR'];
    if(@$_REQUEST['page'])
    {
     $page = mysql_escape_string($_REQUEST['page']);
     $page = strip_tags($page);
     
     $result = mysql_query("select * from ajax_tabs where page='$page'");
     $num    = mysql_num_rows($result);
    echo $page;
    } 
    else
    {
     $result = mysql_query("select * from ajax_tabs where page='$page'");
     $num    = mysql_num_rows($result);
     $row=mysql_fetch_array($result);
     echo $row['text'];
    }
    ?>
    

    Sunday, May 13, 2012

    Auto iframe’s height using javascript

    Auto iframe’s height using javascript
    <script type="text/javascript">
    
    function iFrameHeight() { 
    var f = document.getElementById('blockrandom'); 
    f.style.height = '100px' ; 
    var d = (f.contentWindow.document || f.contentDocument) ;
    
    var height = Math.max(d.documentElement.scrollHeight, d.body.scrollHeight) ;
    
    height += 20; 
    f.style.height = height + 'px' ; 
    f.setAttribute("height", height) ;
    
    }
    </script>
    
    <iframe onload="iFrameHeight()" id="blockrandom"
     name=""
     src="test.htm" 
     width="100%"
     height="200"
     scrolling="no"
     align="top"
     frameborder="0"
     class="wrapper">
     No Iframes</iframe>
    

    Sunday, April 29, 2012

    Contact form with jquery

    html form
    <div id="contactform">
            <form id="contact" action="#">
           <fieldset>
             <label for="name" id="name_label">Name <br /></label>
             <input type="text" name="name" id="name"  value="" class="text-input" />
             <label for="email" id="email_label">E-mail<br /></label>
             <input type="text" name="email" id="email"  value="" class="text-input" />
             <label for="msg" id="msg_label">Message</label>
            <textarea cols="60" rows="10" name="msg" id="msg" ></textarea> <br class="clear" />
             <input type="submit" name="submit" class="button" id="submit_btn" value="Submit"/>
           </fieldset>
            </form>
             <br class="clear" />
            <span class="error" id="name_error">Please enter name !</span>
            <span class="error" id="email_error">Please enter email address !</span>
            <span class="error" id="email_error2">Please enter valid email address !</span>
            <span class="error" id="msg_error">Please enter message !</span>
         </div>
    
    jQuery(function() {
      jQuery('.error').hide();
      jQuery(".button").click(function() {
      // validate and process form
      // first hide any error messages
        jQuery('.error').hide();
      
       var name = jQuery("input#name").val();
      if (name == "") {
          jQuery("span#name_error").show();
          jQuery("input#name").focus();
          return false;
        }
       var email = jQuery("input#email").val();
       if (email == "") {
          jQuery("span#email_error").show();
          jQuery("input#email").focus();
          return false;
        }
     
     var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
     if(!emailReg.test(email)) {
     jQuery("span#email_error2").show();
        jQuery("input#email").focus();
          return false;
     }
     
       var msg = jQuery("textarea#msg").val();
       if (msg == "") {
       jQuery("span#msg_error").show();
       jQuery("textarea#msg").focus();
       return false;
        }
      
      var dataString = 'name='+ name + '&email=' + email + '&msg=' + msg;
      //alert (dataString);return false;
      
       jQuery.ajax({
          type: "POST",
          url: "process.php",
          data: dataString,
          success: function() {
            jQuery('#contactform').html("
    "); jQuery('#message').html("Contact Form Submitted!") .append("We will be in touch soon.
    ") .hide() .fadeIn(1500, function() { jQuery('#message'); }); } }); return false; }); });

    Sunday, February 26, 2012

    JavaScript Date

    JavaScript Date



    <html>
    <script language="JavaScript">
    var mydate=new Date()
    var year=mydate.getYear()
    if (year < 1000)
    year+=1900
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var daym=mydate.getDate()
    if (daym<10)
    daym="0"+daym
    //Arrays for the days of the week, and months of the year
    var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
    var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
    //Write out the date.
    document.write("<left><small><font color='Black' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small></left>")
    </script>
    </html>

    Saturday, February 25, 2012

    Upload and Resize an Image with PHP

    Upload and Resize an Image with PHP




    <?php
    error_reporting(0);
    $change="";
    $abc="";
    define ("MAX_SIZE","400");
    function getExtension($str) {
    $i = strrpos($str,".");
    if (!$i) { return ""; }
    $l = strlen($str) - $i;
    $ext = substr($str,$i+1,$l);
    return $ext;
    }
    $errors=0;
    if($_SERVER["REQUEST_METHOD"] == "POST")
    {
    $image =$_FILES["file"]["name"];
    $uploadedfile = $_FILES['file']['tmp_name'];
    if ($image)
    {
    $filename = stripslashes($_FILES['file']['name']);
    $extension = getExtension($filename);
    $extension = strtolower($extension);
    if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif"))
    {
    $change='<div class="msgdiv">Unknown Image extension </div> ';
    $errors=1;
    }
    else
    {
    $size=filesize($_FILES['file']['tmp_name']);
    if ($size > MAX_SIZE*1024)
    {
    $change='<div class="msgdiv">You have exceeded the size limit!</div> ';
    $errors=1;
    }
    if($extension=="jpg" || $extension=="jpeg" )
    {
    $uploadedfile = $_FILES['file']['tmp_name'];
    $src = imagecreatefromjpeg($uploadedfile);
    }
    else if($extension=="png")
    {
    $uploadedfile = $_FILES['file']['tmp_name'];
    $src = imagecreatefrompng($uploadedfile);
    }
    else
    {
    $src = imagecreatefromgif($uploadedfile);
    }
    echo $scr;
    list($width,$height)=getimagesize($uploadedfile);
    $newwidth=60;
    $newheight=($height/$width)*$newwidth;
    $tmp=imagecreatetruecolor($newwidth,$newheight);
    $newwidth1=25;
    $newheight1=($height/$width)*$newwidth1;
    $tmp1=imagecreatetruecolor($newwidth1,$newheight1);
    imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);
    imagecopyresampled($tmp1,$src,0,0,0,0,$newwidth1,$newheight1,$width,$height);
    $filename = "images/". $_FILES['file']['name'];
    $filename1 = "images/small". $_FILES['file']['name'];
    imagejpeg($tmp,$filename,100);
    imagejpeg($tmp1,$filename1,100);
    imagedestroy($src);
    imagedestroy($tmp);
    imagedestroy($tmp1);
    }}
    }
    //If no errors registred, print the success message
    if(isset($_POST['Submit']) && !$errors)
    {
    // mysql_query("update {$prefix}users set img='$big',img_small='$small' where user_id='$user'");
    $change=' <div class="msgdiv">Image Uploaded Successfully!</div>';
    }

    ?>
    <style type="text/css">
    .help
    {
    font-size:11px; color:#006600;
    }
    body {
    color: #000000;
    background-color:#999999 ;
    background:#999999 url(<?php echo $user_row['img_src']; ?>) fixed repeat top left;


    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;

    }
    .msgdiv{
    width:759px;
    padding-top:8px;
    padding-bottom:8px;
    background-color: #fff;
    font-weight:bold;
    font-size:18px;-moz-border-radius: 6px;-webkit-border-radius: 6px;
    }
    #container{width:763px;margin:0 auto;padding:3px 0;text-align:left;position:relative; -moz-border-radius: 6px;-webkit-border-radius: 6px; background-color:#FFFFFF }
    </style>
    <div align="center" id="err">
    <?php echo $change; ?> </div>
    <div id="space"></div>
    <div id="container" >
    <div id="con">
    <table width="502" cellpadding="0" cellspacing="0" id="main">
    <tbody>
    <tr>
    <td width="500" height="238" valign="top" id="main_right">
    <div id="posts">
    <img src="<?php echo $filename; ?>" /> <img src="<?php echo $filename1; ?>" />
    <form method="post" action="" enctype="multipart/form-data" name="form1">
    <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr><Td style="height:25px"> </Td></tr>
    <tr>
    <td width="150"><div align="right" class="titles">Picture
    : </div></td>
    <td width="350" align="left">
    <div align="left">
    <input size="25" name="file" type="file" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt" class="box"/>

    </div></td>
    </tr>
    <tr><Td></Td>
    <Td valign="top" height="35px" class="help">Image maximum size <b>400 </b>kb</span></Td>
    </tr>
    <tr><Td></Td><Td valign="top" height="35px"><input type="submit" id="mybut" value=" Upload " name="Submit"/></Td></tr>
    <tr>
    <td width="200"> </td>
    <td width="200"><table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="200" align="center"><div align="left"></div></td>
    <td width="100"> </td>
    </tr>
    </table></td>
    </tr>
    </table>
    </form>
    </div>
    </td>
    </tr>
    </tbody>
    </table>

    </div>

    </div>

    Sunday, February 19, 2012

    Jquery Floating Banners

    Jquery Floating Banners








    <script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(window).scroll(function(){
    if ($(window).scrollTop() > $(".Bannerscroll").offset({ scroll: false }).top){
    $(".bannerleftscroll").css("position", "fixed");
    $(".bannerleftscroll").css("top", "0");
    }
    if ($(window).scrollTop() <= $(".Bannerscroll").offset({ scroll: false }).top){
    $(".bannerleftscroll").css("position", "relative");
    $(".bannerleftscroll").css("top", $(".Bannerscroll").offset);
    }
    });
    });
    </script>
    <style>
    .mainWrap {
    width: 900px;
    margin: 0 auto;
    }
    .Wrap {
    float: right;
    width:600px;
    background-color: #F0F0F0;
    padding: 10px;
    height:900px;
    }
    .bannerleft {
    float: left;
    width:250px;
    }
    .bannerleftscroll {
    width:250px;
    background-color: #FF0000;
    }
    </style>
    <div class="mainWrap">
    <div class="Wrap">
    <iframe src="http://r-ednalan.blogspot.com/" width="600" height="900" frameborder="0"></iframe>
    </div>
    <div class="bannerleft">
    <div class="bannerleftscroll">
    <iframe src="http://r-ednalan.blogspot.com/" width="250" height="300" frameborder="0"></iframe>
    </div>
    <div class="Bannerscroll"></div>
    </div>
    </div>

    Tuesday, January 24, 2012

    Footer Toggle Content jquery

    Footer Toggle Content jquery


    Download






    <style type="text/css">
    body {
    font-size:72%;
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.9em;
    color:#434343;
    background:#FCFCFC;
    }
    a:hover {
    text-decoration:none;
    color:#7B7B7F;
    }
    h3 {
    font:2em Arial, Verdana, Helvetica, sans-serif;
    color:#2A313A;
    padding-bottom:20px;
    }
    ul, ol {
    margin:0;
    padding:0 0 20px;
    }

    ul {list-style:none;}

    ul li {
    margin:0;
    padding:5px 0 5px 21px;
    color:#434343;
    background:url(images/arr.gif) 0 9px no-repeat;
    }

    ul li a {
    color:#434343;
    text-decoration:none;
    }

    ol li {
    margin:0 0 0 2em;
    padding:0;
    color:#434343;
    }
    .wrap {
    width:1000px;
    position:relative;
    margin:0 auto;
    z-index:300;
    }
    .clear {clear:both; height:0px;}
    #footer_button {
    width: 121px;
    height:22px;
    margin-right:34px;
    float:right;
    cursor: pointer;
    background:url(images/more_info.png) 0 0 no-repeat;
    }

    #footer_higher {
    width:100%;
    background: #293139;
    position:relative;
    z-index:100;
    }

    #footer_higher #footer_content {
    width: 932px;
    margin: 0 auto;
    display: none;
    }

    #footer_higher #footer_content .footbox1 {
    float: left;
    width: 265px;
    margin: 20px 0 30px;
    }

    #footer_higher #footer_content .footbox2 {
    float: left;
    width: 130px;
    margin: 20px 0 30px 50px;
    }

    #footer_higher #footer_content .footbox3 {
    float: right;
    width: 260px;
    margin: 20px 0 30px;
    }

    #footer_higher h3 {
    color:#ffffff;
    font-size:1.5em;
    padding-bottom:5px;
    }

    #footer_higher .title {
    width:100%;
    position:relative;
    margin-bottom:15px;
    border-bottom:1px solid #191E23;
    }

    #footer_higher .title:after {
    width:100%;
    content: '';
    position: absolute;
    border-bottom:1px solid #39444F;
    bottom:-2px;
    }

    #footer_higher li {
    margin:0;
    padding:5px 0;
    background:none;
    border-bottom:1px solid #0D1012;
    }

    #footer_higher #footer_content .footbox1 li {
    padding-left:20px;
    background:url(images/foot_arr.gif) 0 8px no-repeat;
    }

    #footer_higher a {
    color:#9A9B9D;
    text-decoration:none;
    }

    #footer_higher a:hover {
    color:#ffffff;
    text-decoration:none;
    }

    #FootContact p {margin-bottom:3px; clear:both;}

    #FootContact p label {
    width:45px;
    padding-right:5px;
    font-size:0.9em;
    padding-top:2px;
    text-transform:uppercase;
    float:left;
    color:#96999C;
    }

    #FootContact input[type=text],
    #FootContact textarea {
    padding:3px;
    font:0.95em/0.9em Arial, Helvetica, sans-serif;
    color:#96999C;
    background:#1B2025;
    border-top:1px solid #0D1012;
    border-left:1px solid #0D1012;
    border-bottom:1px solid #394550;
    border-right:1px solid #394550;
    }

    #FootContact input[type=text] {
    width:199px;
    height:15px;
    }

    #FootContact input[type=text]:hover,
    #FootContact textarea:hover {background:#293139;}
    #FootContact input[type=text]:focus,
    #FootContact textarea:focus {background:#444A50;}

    #FootContact input[type=submit] {
    border:1px solid #1A1F24;
    box-shadow:1px 2px 2px #1A1F24;
    -moz-box-shadow:1px 2px 2px #1A1F24;
    -webkit-box-shadow:1px 2px 2px #1A1F24;
    box-shadow:1px 2px 2px #1A1F24;
    text-transform:uppercase;
    background: #444A50;
    }

    #FootContact textarea {
    width:249px;
    height:95px;
    overflow:hidden;
    }

    #footer_lower {
    border-top:6px solid #14181B;
    width: 100%;
    color: #434343;
    padding: 25px 0px;
    position:relative;
    z-index:200;
    background:#fff;
    }

    #footer_lower .valid {
    display:block;
    font-size:0.95em;
    color: #A1A1A1;
    }

    #footer_lower #footer_info {
    width: 932px;
    margin: 0 auto;
    }

    #footer_lower #copyright {
    width: 610px;
    float: left;
    text-align:left;
    }

    #footer_lower #attr {
    width: 300px;
    padding-top:10px;
    float: right;
    font-size:1.3em;
    text-align:right;
    color:#A1A1A1;
    }

    #footer_lower #attr b {font-weight:normal;}

    #attr ul {
    margin:0;
    padding:0;
    list-style:none;
    float:right;
    }

    #attr ul li {
    margin:0;
    padding:0 3px 0 0;
    float:left;
    background:none;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($) {
    var slide = false;
    var height = $('#footer_content').height();
    $('#footer_button').click(function() {
    var docHeight = $(document).height();
    var windowHeight = $(window).height();
    var scrollPos = docHeight - windowHeight + height;
    $('#footer_content').animate({ height: "toggle"}, 1000);
    if(slide == false) {
    if($.browser.opera) {
    $('html').animate({scrollTop: scrollPos+'px'}, 1000);
    } else {
    $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
    }
    slide = true;
    } else {
    slide = false;
    }
    });
    });
    </script>

    <div style="height:900px;"></div>
    <div class="wrap">
    <div id="footer_button"></div>
    <div class="clear"></div>
    </div>
    <div id="footer_higher">
    <div id="footer_content">
    <div class="footbox1">
    <div class="title"><h3>Recent News</h3></div>
    <ul>
    <li><a href="#" title="Donec accumsan lorem ipsum dolor...">Donec accumsan malesuada orcidonec sitmet eros lorem ipsum dolor...</a></li>
    <li><a href="#" title="Amet incon ecteetra magna donec accumsan...">Amet incon ectetuer adipiscing maurse pharetra magna donec accumsan...</a></li>
    <li><a href="#" title="Malesuada orcdo nsec tetuer malesuada...">Malesuada orcdonec umet lorem ipsum dolorconsec tetuer malesuada...</a></li>
    </ul>
    </div>
    <div class="footbox2">
    <div class="title"><h3>Archives</h3></div>
    <ul>
    <li><a href="#" title="June, 2010">June, 2010</a></li>
    <li><a href="#" title="May, 2010">May, 2010</a></li>
    <li><a href="#" title="April, 2010">April, 2010</a></li>
    <li><a href="#" title="March, 2010">March, 2010</a></li>
    <li><a href="#" title="February, 2010">February, 2010</a></li>
    <li><a href="#" title="January, 2010">January, 2010</a></li>
    </ul>
    </div>
    <div class="footbox2">
    <div class="title"><h3>Categories</h3></div>
    <ul>
    <li><a href="#" title="Advertising">Advertising</a></li>
    <li><a href="#" title="News">News</a></li>
    <li><a href="#" title="Web Design">Web Design</a></li>
    </ul>
    </div>

    <div class="footbox3">
    <div class="title"><h3>Email Us</h3></div>
    <form action="" id="FootContact">
    <p><label for="fname">Name:</label><input type="text" id="fname" /></p>
    <p><label for="femail">E-mail:</label><input type="text" id="femail" /></p>
    <p><textarea cols="5" rows="3"></textarea></p>
    <p><input type="submit" value="Submit" title="Submit" /></p>
    </form>
    </div>
    <div class="clear"></div>
    </div>
    </div>
    <div id="footer_lower">
    <div id="footer_info">
    <div id="copyright">
    Copyright © 2012 • r-ednalan.blogspot.com • All rights reserved
    <span class="valid">http://r-ednalan.blogspot.com/</span>
    </div>
    <div id="attr">
    <ul>
    <li><b>Stay Connected</b></li>
    </ul>
    </div>
    <div class="clear"></div>
    </div>
    </div>

    Related Post