article

Saturday, September 7, 2013

File Upload using php

File Upload using php
index.html
<html> 
<body>
  <form enctype="multipart/form-data" action="upload.php" method="post">
    <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
    Choose a file to upload: <input name="uploaded_file" type="file" />
    <input type="submit" value="Upload" />
  </form> 
</body> 
</html>
//upload.php
<?php
//Check that we have a file
if((!empty($_FILES["uploaded_file"])) && ($_FILES['uploaded_file']['error'] == 0)) {
  //Check if the file is JPEG image and it's size is less than 350Kb
  $filename = basename($_FILES['uploaded_file']['name']);
  $ext = substr($filename, strrpos($filename, '.') + 1);
  if (($ext == "jpg") && ($_FILES["uploaded_file"]["type"] == "image/jpeg") && 
 ($_FILES["uploaded_file"]["size"] <350000)) {
    //Determine the path to which we want to save this file
      $newname = dirname(__FILE__).'/upload/'.$filename;
      //Check if the file with the same name is already exists on the server
      if (!file_exists($newname)) {
        //Attempt to move the uploaded file to it's new place
        if ((move_uploaded_file($_FILES['uploaded_file']['tmp_name'],$newname))) {
           echo "It's done! The file has been saved as: ".$newname;
        } else {
           echo "Error: A problem occurred during file upload!";
        }
      } else {
         echo "Error: File ".$_FILES["uploaded_file"]["name"]." already exists";
      }
  } else {
     echo "Error: Only .jpg images under 350Kb are accepted for upload";
  }
} else {
 echo "Error: No file uploaded";
}
?>

Pagenation using php class

Pagenation using php class
<?php
class paginate{
var $current;
var $rows;
var $start_row;
var $total_data;
 function paginate($current_page,$totaldata,$rows_page = 10){
  $this->rows = $rows_page;
  $this->total_data = $totaldata;
  if($current_page < 1 or $current_page > $this->getTotalPage()){
   $this->current = 1;
  }
  else{
   $this->current = $current_page;
  }
 }
 function getTotalPage(){
  $total = ceil($this->total_data / $this->rows);
  return $total;
 }
 function getLimit(){
  if($this->current <= 1){
   $this->start_row = 0;
  }
  else{
   $this->start_row = $this->rows*($this->current-1);
  }
  return ' LIMIT '.$this->start_row.','.$this->rows;
 }
 function getNext(){
  if($this->current < $this->getTotalPage()){
   return $this->current + 1;
  }
 }
 function getPrevious(){
  if($this->current > 1){
   return $this->current - 1;
  }
 }
 function getPages(){
  $first = false; $last = false;
  if($this->getTotalPage() == 0){
   return false;
  }
  elseif($this->getTotalPage() > 10){
   for($i=1; $i<=$this->getTotalPage();$i++){
    if($i == $this->current){
     $page[] = array(
      'link' => false,
      'page' => $i
     );
    }
    elseif($i < $this->current-3 and $i > 3 and $i < $this->current+5 ){
     if(!$first){
      $page[] = array(
       'link' => false,
       'page' => '...',
      );
     }
     $first = true;
    }
    elseif($i < $this->getTotalPage()-3 and $i > $this->current+5){
     if(!$last){
      $page[] = array(
       'link' => false,
       'page' => '...',
      );
     }
     $last = true;
    }
    else{
     $page[] = array(
      'link' => true,
      'page' => $i
     );
    }
   }
  }
  else{
   for($i=1; $i<= $this->getTotalPage();$i++){
    if($i == $this->current){
     $page[] = array(
      'link' => false,
      'page' => $i
     );
    }
    else{
     $page[] = array(
      'link' => true,
      'page' => $i
     );
    }
   }
  }
  return $page;
 }
 function navigation($url=null,$attr=array()){
  $parm = '';
  if(is_array($attr)){
   foreach($attr as $name => $val){
    $parm .= ' '.$name.'="'.$val.'"';
   }
  }
  $nav = null;
  if($this->getPrevious()){
   $nav .= '<a href="'.$url.'&page='.$this->getPrevious().'" '.$parm.'>Previous</a> | ';
  }
  if($this->getPages()){
   foreach($this->getPages() as $name => $val){
    if($val['page'] != 1){
     $nav .= ', ';
    }
    if($val['link']){
     $nav .= '<a href="'.$url.'&page='.$val['page'].'" '.$parm.'>'.$val['page'].'</a>';
    }
    else{
     $nav .= '<b>'.$val['page'].'</b>';
    }
   }
  }
  if($this->getNext()){
   $nav .= ' | <a href="'.$url.'&page='.$this->getNext().'" '.$parm.'>Next</a>';
  }
  return $nav;
 }
}


/** example **/
if(isset($_GET['page'])){
 $page = $_GET['page'];
}
else{
 $page = 1;
}
$totaldata = 200;
$row_per_page = 10;
$paginate = new paginate($page,$totaldata,$row_per_page);

echo 'Limit for Query: SELECT * FROM `table`'.$paginate->getLimit();
echo '<br/>';
echo 'Current Page: '.$paginate->current;
echo '<br/>';
echo 'Pages Navigation: '.$paginate->navigation('index.php?',array('id' => 'page'));
echo '<br/>';
echo 'Total Page: '.$paginate->getTotalPage();
?>

How to Increase Decrease Font Size of Page Using Jquery

How to Increase Decrease Font Size of Page Using Jquery
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>How to Increase Decrease Font Size of Page Using Jquery</title>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>   
<script type="text/javascript">
 $(document).ready(function(){
   var originalSize = $('div').css('font-size');
  // reset
   $(".resetMe").click(function(){
  $('div').css('font-size', originalSize); 

   });

   // Increase Font Size
   $(".increase").click(function(){
  var currentSize = $('div').css('font-size');
  var currentSize = parseFloat(currentSize)*1.2;
  $('div').css('font-size', currentSize);

  return false;
   });

   // Decrease Font Size
   $(".decrease").click(function(){
  var currentFontSize = $('div').css('font-size');
  var currentSize = $('div').css('font-size');
  var currentSize = parseFloat(currentSize)*0.8;
  $('div').css('font-size', currentSize);

  return false;
   });
});
</script>
</head>
<body>
<h1>How to Increase Decrease Font Size of Page Using Jquery </h1>
 
   <input type="button" class="increase" value=" + ">
   <input type="button" class="decrease" value=" - "/>
   <input type="button" class="resetMe" value=" = ">
   <div>Click Respected Buttons to Increase or Decrease the Font </div>
</body>
</html>

Monday, September 2, 2013

Create CSS3 Dropdown menu

Create CSS3 Dropdown menu
<style type="text/css">#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}</style>
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Related Post