Showing posts with label ajax. Show all posts
Showing posts with label ajax. Show all posts

Sunday 23 September 2012

live word preview using jquery

In , , , // siddhu vydyabhushana // 3 comments
am sure that this post can really motivate to develop projects.
in my last posts i taught u about jquery functions. present i used keyup()  function, html()



LIVE PREVIEW


1.JQUERY CODE:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<style>
input
{
width:300px;
height:50px;
}
</style>
<script>
$(function()
{
$('.username').keyup(function()
{
var username=$(this).val();

if(username!='')

$('.check').html(username);

});
});
</script>

2.  HTML CODE:

<body>
<input type="text" name="username" class="username"><bR><span class="check" style="color:red;" >-------------</span>@aitamelearning.blogspot.com.
</body>





Read More


























            

          

          

        

Tuesday 21 August 2012


          

        





HOW TO create login button like twitter









       In 
,
,
,
,

 
//
siddhu vydyabhushana


//
            

Leave a Comment










twitter is a one of the good social networking site but the interface of this site is too good than other sites so all are interested to make a page like this this is also one of the attempt to create a login page .thanq our tut starts 1,2,3, lets go

1)first u must aware of ajax then u can understand otherwise i am providing files also

2)download below files
jquery.corner.js
jquery-1.3.2.min.js


save the below code with .html extension  


<html>
<head>
</head>
<style>
body
{
  background: #F9F7ED;
  font-family: Sans-serif;
  margin: 0;
}
#loginBox
{
    margin-left: 150px;
    background: #2088B2;
    padding: 5px;
    color: #fff;
    width: 50px;
    margin-top: 3px;
    cursor: pointer;
}
#loginBoxContent
{
    background: #4AC0F2;
    padding: 5px;
    display: none;
    font-size: 12px;
    width: 180px;}
p { padding-bottom: 1px;}
</style>
<body>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("div[id^='loginBox']").corner("5px");
        $("#loginBox").click(function() {
            if ($("#loginBoxContent").css('display') == 'block') {
                $("#loginBoxContent").css('display', 'none');
                $("#loginBox").css('background', '#2088B2').corner("5px");
            }
            else {
                var offset = $(this).offset();
                $("#loginBoxContent").css({
                    'left': offset.left-130, 'top': offset.top+25,
                    'position':'absolute', 'display': 'block'}).uncorner().corner("tl bl br");
                $(this).css('background', '#4AC0F2').corner("tl tr");
            }
        });
    });
    </script>

    <div id="loginBox">Login </div>

    <div id="loginBoxContent">
    <div>Username or e-mail:</div>
    <div><input type="text" name="login" /></div>
    <div>Password:</div>
    <div><input type="password" name="password" /></div>
    <div><input type="submit" value="Login"></div>
    </div>

</body>
</html>







Read More


























            

          

          

        

Tuesday 14 August 2012


          

        





HOW TO upload image and retrive image using ajax









       In 
,
,

 
//
siddhu vydyabhushana


//
            

1 comment











  
i know you all are waiting for this tutorial , but there i worked one day to make easy for u dont mis use it and  learn and apply in your domain




db.php:- for database connection


<?php$mysql_hostname = "localhost";$mysql_user = "root";$mysql_password = "";$mysql_database = "test";$prefix = "";$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");mysql_select_db($mysql_database) or die("Opps some thing went wrong");
?>

image.php:- its for uploading image



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

 $valid_formats = array("jpg", "png", "gif", "bmp","JPG");
 if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
  {
   $name = $_FILES['photoimg']['name'];
   $size = $_FILES['photoimg']['size'];
   
   if(strlen($name))
    {
     list($txt, $ext) = explode(".", $name);
     if(in_array($ext,$valid_formats))
     {
     if($size<(1024*1024))
      {
       $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
       $tmp = $_FILES['photoimg']['tmp_name'];
       if(move_uploaded_file($tmp, $path.$actual_image_name))
        {
        mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
         
         echo "<img src='uploads/".$actual_image_name."'  class='preview'>";
        }
       else
        echo "failed";
      }
      else
      echo "Image file size max 1 MB";     
      }
      else
      echo "Invalid file format.."; 
    }
    
   else
    echo "Please select image..!";
    
   exit;
  }
?>









Read More


























        

      



























Designed By Blogtipsntricks. In Association With Tozilnutpam and Praverb Dot Net.


© 2012 Java,Android,j2ee and jsp tutorials blog