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>

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>

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>';}
}
?>

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!';
  }
 }
?>

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);
?>