Translate

Thursday 27 June 2013

Animation Using JS

Screen Shot:
                  
index.php:

<body>
<button>Click Me</button>
<p>Blogger Name</p>
<div style="border:1px solid #FFF; width:100px; height:20px; background-color:#CCC; position:absolute; box-shadow:0 0 2px 2px #CCC;">Creater Site</div>
</body>


Scripts:

<script>

$(document).ready(function() {
$("button").click(function(){

 $("div").animate({left:'250px', opacity:'',height:'60px',width:'100px'});

});
});
</script>
<script type="text/javascript" src="j.js">

Download:JS

Wednesday 26 June 2013

Draggable the object using JS

index.php:
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div> 
 Script:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
  $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
Style:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
#draggable { width: 100px; height:100px;padding: 0.5em;float: left;margin: 10px 10px 10px 0;}
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

Tuesday 25 June 2013

Convert a Form to as Zip File

Screenshot:
                        
index.php:

<body>
<form name="zips"  method="post">
<div >
<table width="600" border="0" align="center" cellpadding="10" cellspacing="0" 
style="border-collapse:collapse; border:#ccc 1px solid;" id="tbl">
  
  <tr>
    <td align="center"><input type="checkbox" name="files[]" value="for.php" /> 
<span> &nbsp;&nbsp;for.php</span></td>
  </tr>
  <tr><td align="center" colspan="2"><input type="submit" name="submit" 
value="create as zip" /></td></tr>
       </table>
</div>
</form>
</body>
   
form:

<?php
    
    if(isset($_POST['submit'])){
        $post = $_POST;     
        $file_folder = "files/";    
        if(extension_loaded('zip')){    
            if(isset($post['files']) and count($post['files']) > 0){    
                $zip = new ZipArchive();            
                $zip_name = time().".zip";          
                if($zip->open($zip_name, ZIPARCHIVE::CREATE)!==TRUE){       
                    $error .=  "* Sorry ZIP creation failed at this time<br/>";
                }
                foreach($post['files'] as $file){               
                    $zip->addFile($file_folder.$file);          
                }
                $zip->close();
                if(file_exists($zip_name)){
                    
            header('Content-type: application/zip');
            header('Content-Disposition: attachment; filename="'.$zip_name.'"');
                    readfile($zip_name);
                
                    unlink($zip_name);
                }
                
            }}
    }
?>
        
           

Monday 24 June 2013

Multiple Select Box in Static

index.php:

<body>
<form method="post" action="">
    <select name="php[]" multiple="multiple">
        <option value="PHP">PHP</option>
        <option value="Javascript">Javascript</option>
        <option value="Ajax">Ajax</option>
        <option value="Jquery">Jquery</option>
        <option value="HTML">HTML</option>
    </select> 
    <input type="Submit" value="Submit" />
</form>
</body>

Condition:

<?php if(!empty($_POST['php'])){
    for ($i=0; $i < count($_POST['php']);$i++) {
        echo $_POST['php'][$i] . ", ";
    }
}
?>

Friday 21 June 2013

Upload and Resize an image using PHP&Javascripts

Screenshot:
             


index.php:

 <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; ?>" />  &nbsp;&nbsp;&nbsp;&nbsp;<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">&nbsp;</Td></tr>
               <tr>
        <td width="150"><div align="right" class="titles">Image : </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>
     
 scripts:

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery_002.js"></script>
    <script type="text/javascript" src="js/displaymsg.js"></script>
    <script type="text/javascript" src="js/ajaxdelete.js"></script>
 
Download:Coding
         




Wednesday 19 June 2013

Notification concept using PHP&AJAX

Screenshot:
                         
 index.php:

<body>
<div id="menu">
    <ul>
        <li>
            <a href="#" style="padding:10px 0;">
            <img src="images.png" style="width: 25px;" />
            <?php
            include("db.php");
                $sql=mysql_query("select * from comments");
                $comment_count=mysql_num_rows($sql);
                if($comment_count!=0)
                {
                echo '<span id="mes">'.$comment_count.'</span>';
                }
            ?>
            </a>
        <ul class="sub-menu">
        
            <?php
            
            $msql=mysql_query("select * from messages order by msg_id desc");
            while($messagecount=mysql_fetch_array($msql))
            $id=$messagecount['msg_id'];
            $msgcontent=$messagecount['message'];
            ?>
            <li class="egg">
            <div class="toppointer"><img src="top.png" /></div>
                <?php 

                $sql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id");
                $comment_count=mysql_num_rows($sql);

                if($comment_count>2)
                {
                $second_count=$comment_count-2;
                } 
                else 
                {
                $second_count=0;
                }
                ?>

                <div id="view_comments<?php echo $id; ?>"></div>

                <div id="two_comments<?php echo $id; ?>">
                <?php
                $listsql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit $second_count,2 ");
                while($rowsmall=mysql_fetch_array($listsql))
                { 
                $c_id=$rowsmall['com_id'];
                $comment=$rowsmall['comments'];
                ?>

                <div class="comment_ui">

                <div class="comment_text">
                <div  class="comment_actual_text"><?php echo $comment; ?></div>
                </div>

                </div>
                
                <?php }?>
                <div class="bbbbbbb" id="view<?php echo $id; ?>">
                    <div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
                    <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
                    </div>
                </div>
            </li>
        </ul>
        </li>
    </ul>
</div>
</body>

Scripts:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() 
{
$(".view_comments").click(function() 
{

var ID = $(this).attr("id");

$.ajax({
type: "POST",
url: "comments.php",
data: "msg_id="+ ID, 
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});

return false;
});
});
</script>

comments.php:
 <?php
 include("db.php");

if(isSet($_POST['msg_id']))
{
$id=$_POST['msg_id'];
$com=mysql_query("select * from comments where msg_id_fk='$id' order by com_id");
while($r=mysql_fetch_array($com))
{
$c_id=$r['com_id'];
$comment=$r['comments'];
?>
<div class="comment_ui" >
<div class="comment_text">
<div  class="comment_actual_text"><?php echo $comment; ?></div>
</div>
</div>
<?php } }?>


               
                      

Wednesday 12 June 2013

Cropping Uploaded Image Using Ajax&JS

Screenshot:
                        

Download Coding:coding

 index.php:


<body>
<div style="margin:0 auto; width:600px">
<?php echo $image; ?>
<div id="thumbs" style="padding:5px; width:600px"></div>
<div style="width:600px">

<form id="cropimage" method="post" enctype="multipart/form-data">
    Upload your image <input type="file" name="photoimg" id="photoimg" />
    <input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
    <input type="submit" name="submit" value="Submit" />
</form>

</div>
</div>

Condition:

<?php
include('db.php');
session_start();
$session_id='1'; //$session id

$path = "uploads/";
?>
<?php

    $valid_formats = array("jpg", "png", "gif", "bmp");
    if(isset($_POST['submit']))
        {
            $name = $_FILES['photoimg']['name'];
            $size = $_FILES['photoimg']['size'];
            
            if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name);
                    if(in_array($ext,$valid_formats) && $size<(1024*1024))
                        {
                            $actual_image_name = time().substr($txt, 5).".".$ext;
                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if(move_uploaded_file($tmp, $path.$actual_image_name))
                                {
                                mysql_query("UPDATE crop_tbl SET profile_images='$actual_image_name' WHERE uid='$session_id'");
                                    $image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" style='max-width:500px' >";
                                    
                                }
                            else
                                echo "failed";
                        }
                    else
                        echo "Invalid file formats..!";                 
                }
            else
                echo "Please select image..!";
        }
?>

Onclick Event

Live Demo:  
               
                                      

index.php:

<p><input type="button" value="Click here" onClick="showAlert();"></p>


To Check the Email in DB using PHP


index.php:


 <p>Email ID:<span style="color:red;">*</span></p>
 <input type="email" class="search" name="email" 
   required="required" autocomplete="off"/>
      <?php echo $email_error;?></p>

Coding:

<?php 
 ob_start("ob_gzhandler");
 include('admin/conn.php');
 session_start();
 if(isset($_POST['submit'])!="")
 {
 $email=$_POST['email'];
 $search_num1=mysql_query("select * from signup  where email='$email'")
  or die(mysql_error());
 $fetch1=mysql_num_rows($search_num1);
 if($fetch1)
 {
 $email_error="<span style=color:red; font-size:16px;><b>Already Exit This Email!</b></span>";  
 }
 else
 {
?><?php }} ?>



Thursday 6 June 2013

Toggle in Simple Javascript

                                      
         Download:coding

index.php:

<div class="jtr">
   
    <div id="opt"><a href="#" onclick="toggle_visibility('foo');"><img src="HH.png" width="23px" height="23px" style="border:0 solid #F00; width:23px; height:23px; margin-left:160px;"/></a>
        
        <div id="foo"><span class="panel"><a href="">My Blog</a>
        <a href="">My Rating</a>
        <a href="">Your Ads</a>
        <a href="">My Images</a>
        <a href="">My Videos</a>
        <a href="">Edit Profile</a>
        <a href=""> Change Password</a>
        <a href="">Logout</a></span></div>
      

    </div></div>

script:
<script type="text/javascript">

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

Tuesday 4 June 2013

Videos Upload in PHP

Screenshot:



index.php:

<form action="" method="post" enctype="multipart/form-data">
<label for="file" class="tbl">Filename:</label>
<input type="file" name="vid" id="file"><br>
<input type="submit" name="submit" value="Submit">
</form>
To View from Database:

              <?php
  
                $select=mysql_query("select * from myblog where id='$id' ");
                                      
                     while($fetch1=mysql_fetch_array($select))
                                      {
                                         
                                             $video=$fetch1['video'];
                                             
                                             ?>
 <video width="320" height="240" controls>
  <source src="uploadvideo/<?php echo $video;?>" type="video/mp4"> 
<source src="video/<?php echo $video; ?>" type="video/ogg" />
</video>
<?php }?>
 
To insert in Database:
<?php
if(isset($_POST['submit']))
{     
        $id=$_POST['id'];
        $video=$_FILES['vid']['name'];
        $type=$_FILES['vid']['type'];
        $size=$_FILES['vid']['size'];
        $tempname=$_FILES['vid']['tmp_name'];
        $dir="uploadvideo/".$video;
        move_uploaded_file($tempname,"$dir");
$insert=mysql_query("insert into myblog(`video`) values ('$video')")or die(mysql_error());
      if($insert)     
      {
          echo "<script>alert('Inserted Succesful')</script>";
        

     }
            
}
?>

Coding for Video:
<video width="320" height="240" controls>
  <source src="nature5.MP4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Monday 3 June 2013

Click Other field in an Select Option by using Javascript

Live Demo:


College:

index.php:

<form name="arun" id="checkid">
<div align="center" id="tbl">
<span style="font-size:18px;">College:</span>
<select name="country" onchange="ShowTB(this,'click');" id="on">
<option id="count">-------select-------</option>
<option id="count">South America</option>
<option id="count">North America</option>
<option id="count">Africa</option>
<option id="count">London</option>
<option id="count">other</option></select><br /><br />
<input type="text" id="click" placeholder="Please Enter The College Name" style="visibility:hidden; margin-right:-170px; width:45%;" />
</div> 
</form>

Script.php:
<script language="JavaScript" type="text/javascript">

function ShowTB(obj,id){
 txt=obj.options[obj.selectedIndex].text;
 if (txt.match('select')){
  document.getElementById(id).style.visibility='hidden';
 }
 if (txt.match('other')){
  document.getElementById(id).style.visibility='visible';
 }
}

</script>