Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Friday 21 September 2012

Live check availability using PHP

// siddhu vydyabhushana // Leave a Comment
today am going to learn trick on live check availability   .Before going to learn u need to have some grip on database management,PHP.
so get ready to learn 1
                      2
                      3
                      Lets go.................

whatever you are going to enter text(email id) 
u get the text and check with the database data.php code for checking

<?phpinclude 'database.php';
if(isSet($_POST['username'])

{$sql=mysql_query('SELECT * FROM registration'); 
while($row=mysql_fetch_array($sql)){$get=$row['regusername'];$p=$_POST['username'];if($p==$get)echo "<big><font color='RED'>Not available";elseecho "<big><font color='green'>Available";}}?>
DATABASE CONNECTION :

<?phpmysql_connect("localhost","USERNAME","PASSWORD");mysql_select_db("DATABASE NAME");?>
HTML CODE :

<style>
#main
{
margin-left:275;
width:600px;
padding:10px;
border:solid 1px blue;
background:#eeeeee;
}
</style>
<div id="main">
<b>Already 'vydyas@gmail.com' is existed so if u check with another u can identify<br>
is it working or not
<form id='myform' method='POST' action='index.php' enctype="multipart/form-data">
<input type='text' name='username' size=15>
<button>check</button>
</form>


<?php

include 'result.php';
?>


Read More

Thursday 20 September 2012

Interesting presentationt's for students to learn jQUERY,AJAX,CSS,PHP,JAVASCRIPT

// siddhu vydyabhushana // 3 comments
i know as long long time u are waiting for this type of tutorials, by a simple presentation u can able to understand,learn all scripting languages here..the below list includes,ajax,how to write modular css, about java script libraries, jquery

AJAX:
Introduction to programming with Ajax. Covers XMLHttpRequest, XML, JSON, JavaScript, HTML, CSS, Dom Scripting, Event Handling with some examples from YUI library.





JQUERY:
A short introduction to jQuery in particular about functions, collections, grabbing values and chaining.








JAVASCRIPT:
An interesting Overview about the most popular JavaScript libraries (jquery, prototype, Scriptaculous...) for web designers. 




CSS:
A clearly explained modular system that allows you to hide and show CSS rules to specific browsers without the need for extensive hacks or workarounds

Read More

jquery,css code to design post like facebook,google+

// siddhu vydyabhushana // Leave a Comment
hi already in my last posts i discussed on 
JQUERY   ,CSS   , tutorials but today as per many requests,present am going to explain on fb posts




LIVE DEMO      DOWNLOAD




css code to above posts:


<style>
#main
{
margin-left:300px;
overflow:auto;
margin-top:3px;
background:#eeeeee;
width:620px;

}
#popup_container {
font-family:'Lucida Grande',arial;
font-weight:bold;

text-align:left;
font-size: 12px;
width: 364px;
height: 86px;
background: #F3F3F3;

border:solid 1px #dedede;
border-bottom: solid 2px #456FA5;
color: #000;

}

#popup_title {
display:none;
}



#popup_message {
padding-top: 15px;
padding-left: 15px;
}

#popup_panel {
text-align: left;
padding-left:15px;

}
#main_left
{

float:left;
width:100px;
background-color:#f2f2f2;
height:120px;
}
#main_right
{
height:100px;
border: solid 1px black;
float:right;
width:490px;
padding:10px;
background-color:#bdbdbd;
}
#delete
{
margin-top:auto;
float:right;
text-decoration:none;
color:blue;
border:solid 1px black;
padding:3 3px;
}
#like
{
margin-left:110px;
text-decoration:none;

}
#comment
{
margin-left:10px;
text-decoration:none;
}
#comment:hover
{
margin-left:10px;
text-decoration:none;
color:#333333;
}
#com
{
margin-left:150px;
}
#button
{
background:#bdbdbd;
border-radius:4px;
border:blue;
padding:1px;
text-decoration:none;
}
#button:hover
{
background:#eeeeee;
border-radius:4px;
border:blue;
padding:1px;
text-decoration:none;
}
</style>

Jquery code:

<script type='text/javascript' src='jquery.js'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery_facebook.alert.js"></script>

</script>
<script>
$(function()
{
$('#delete').click(function()
{
jConfirm('are u sure to delete?','Confirmation Dialouge',
function(r)
{
if(r==true)
{
$('#main').fadeOut(300);
}
});
});

$('#comment').click(function()
{
$('#com').slideToggle();
});
$('#like').click(function()
{
$(this).html('unlike');

});

});
</script>

HTML CODE:

<body bgcolor='#9900cc'>
<div id="main">
<div id="main_left">
<img src='67.jpg' width='100' height='100'></img>
</div>
<div id="main_right">
<a href='#' id='delete'>X</a>
hi, tutorial by siddhu vydyabhushana.<br>
<a href='#'>click here for tutorial aitamelearning.blogspot.com</a>

</div>
<a href='#' id='like'>like</a>
<a href='#' id='comment'>comment</a>
<div id='com'>
<textarea cols='35' rows='1'></textarea>&nbsp&nbsp<a href='#' id='button'>Comment</a>
</div>
<hr size='1' color:'#1e1e1e' />
</div>
Read More

Saturday 8 September 2012

JQUERY PART-3 VERY INTERESTING

// siddhu vydyabhushana // Leave a Comment
in my last posts i really enjoyed for ur good response , today am  going to post on ANIMATE() .this is very interesting to do web projects..



LAST POSTS ARE:

JQUERY PART-1 (INSTALLATION , fadeIn(),fadeOut(),slideToggle())

animation with animation() event:

while clicking the animate block1 button it calls block1 when we 

press animate block2 button it calls block2 when we are going to 

reset it uses $(selector).css() function



LIVE DEMO


<html>
<head>
<style>
div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>

<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>

$( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "30%" }, 200)
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});

$( "#go2" ).click(function(){
$( "#block2" ).animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});

$( "#go3" ).click(function(){
$( "#go1" ).add( "#go2" ).click();
});

$( "#go4" ).click(function(){
$( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});

</script>

</body>
</html>



CHANGE BACKGROUND COLOR ON HOVER :

please download first CILCK HERE (jquery.color.js)

for this i am going to use jquery.color.js after 
$(selector).hover(function()) and $(this).animate() enjoy this..

<style>
#div
{
background:#333333;
width:500px;
broder:1px;

}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function()
{
$('#div').hover(function()
{
$(this).animate({
"backgroundColor":"#bdbdbd",
},5000);
});

});
</script>

<div id="div">
this is siddhu
</div>

play with Mouseover() and  Mouseout() Events:
same as above exmaple  but o mouse over and out it will be animate


this is siddhu


<style>
#div
{
background-color:#eeeeee;
border:solid 3px #9900cc;
height:160px;
font-size:46px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function()
{
$('#div').mouseover(function()
{
$(this).animate({
"backgroundColor":"#bdbdbd",
"borderBottomWidth":"10px",
"borderBottomColor":"green"
},1000);
}).mouseout(function()
{
$(this).animate({
"backgroundColor":"#333333",
"borderBottomWidth":"3px"

},1000);
});

});
</script>

<div id="div">

this is siddhu
</div>
Read More

Friday 7 September 2012

JQUERY PART-2 FOR BEGINNERS

// siddhu vydyabhushana // Leave a Comment
Hello today this is my second post on jquery
for my last post i got good response

last post: JQUERY PART-1

in this i really want to discuss on EFFECTS AND HTML



EFFECTS: in this for

Fadein and fadeout:$().fadeIn() ,$().fadeOut()
sliding up and down:$().slideUp(),$().slideDown()
Sliding toggle:$().slideToggle()

am going to show examples on above events:

FADEIN AND OUT EVENT:
 in the below eg fadeIn(speed,callback)

fadeIn("speed" or "slow")

else

fadeIn(300)


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript">
$(function()
{
$('#fadeout').click(function()
{
$('#box').fadeOut("slow");
});
$('#fadein').click(function()
{
$('#box').fadeIn("slow");
});

});
</script>
<body>
<input type="button" value="fadein" id="fadein">
<input type="button" value="fadeout" id="fadeout">
<div id="box">

hello this is siddhu

</div>
</body>

learn attr() in jquery()
attr() is a function in jquery it will retrive the value from html
syntax: $().attr(property)  property:-'id','class','href'

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript">
$(function()
{
$('#link').click(function()
{
var id=$(this).attr("id");
alert(id);
});


});

</script>
<a href="http://aitamelearning.blogspot.com" id="link">siddhu tut link click here</a>
</body>

LEARN addClass() AND html() in JQUERY

get the html contents by html.$(selector).html()


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript">
$(function()
{
$('.link').click(function()
{
var href=$(this).attr("href");
$("h1").html(href);
});
});
</script>
<a href="http://aitamelearning.blogspot.com" >Click </a>
Link HREF value : <h1></h1>

Add specified class to each set ofelements.$(selector).addClass()


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript">
$(function()
{
$('.changeclass').click(function()
{
$(".big").addClass("small");
});
});
</script>
<a href="#" class="changeclass" >Click </a>
<div class="big">aitamelearning.blogspot.com</div>

css code:


.big
{
font-size:106px;
}
.small
{
font-size:12px;
}
Read More

JQUERY PART-1 FOR BEGINNERS

// siddhu vydyabhushana // Leave a Comment
JQUERY PART-1 FOR BEGINNERS

hi friends if u really want to learn JQUERY ,just follow the below steps...jquery is a awesome javascript library .its help you to develop good interface



This tutorials is very basic level i will show tut using CLICK() event...................

INSTALLATION:

before you use jquery function you download 
jquery.js from jquery.com


<script type="text/javascript" src="jquery.js" ></script>

OR

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
 " ></script>

JQUERY CODE:

we use this jquery in  html files...

<script type="text/javascript">
$(document).ready(function()
{
alert("this is first tutby siddhu");
});
</script>


in the above script we used $(document).ready(function()
instead of that we can use function()
for example:


<script type="text/javascript">
$(function()
{
alert("this is first tutby siddhu");
});
</script>

if u want to alert any code after loading of page we need to use $(window).load(function())


<script type="text/javascript">
$(window).load(function()
{
alert("this is first tutby siddhu");
});
</script>

JQUERY STRUCTURE:

we are using '$' symbol that indicates jquery
selector is a document object model,function executes parameters

$(selectors).function(parameters)

Selectors

 Select DOM elements eg: $('h1') ,$('div')$('li')..
 Select ID : $('#id_name')


 Select Class : $('.class_name')

WORKING WITH CLICK() EVENT:

syntax:$().click() below ex:

<script type="text/javascript">
$(function()
{
$('#button').click(function()
{
alert('button clicked by siddhu');
});
});
</script>
<body>
<input type="button" id="button" value="button">
</body>

HIDE AND SHOW WITH CLICK EVENT:
we use $().hide(),$().show() functions


<script type="text/javascript">
$(function()
{
$('.hide').click(function()
{
$('#div').hide();
});


$('.show').click(function()
{
$('#div').show();
});

});
</script>
<body>
<input type="button" class="hide" value="button">
<input type="button" class="show" value="button">
<div id="div">
u learned jquery part-1 by siddhu
</div>
</body>



Read More

Saturday 1 September 2012

Attractive page loading effect with jquery for blogger and websites

// siddhu vydyabhushana // 1 comment

Good evening friends today am surely telling u that this tutorial is really attractive and suspecious.Jquery is a lightweight framework ,it will provide attractive interface.for some changes we need to provide some images also.


first i will show this effect for blogger , follow the below steps


1. If  u used blogger ,its good!! else If u interested in site its also good......

                        before  </head>  please paste the below code


$(window).load(function(){

$("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
});

});
})(jQuery);

after please paste the below code after  <body>  

below code for all pages


<div id='md-loading'><div 
id='md-progress-bar'></div><div
id='md-loader'>Loading...</div></div>


for only home page

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

<div id='md-loading'><div
id='md-progress-bar'></div><div
id='md-loader'>Loading...</div></div></b:if>
thanq
siddhuSIDDHU VYDYABHUSSHANA

LOVE WEB DESIGNING,SCRIPTING,PROGRAMMING.

EMAIL::: VYDYAS[at]GMAIL.COM
Read More

Sunday 26 August 2012

Dynamic image selection by query and html

// siddhu vydyabhushana // Leave a Comment
hello friends in my there are some posts on jquery but today am interesting to post dynamic image selection

in my blog there is so many posts and tut based on jquery ,php, ajax, and html also. I think this is useful to u.



CODE IS :

<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()
{
$('#radio').click(function()
{
$('#female').hide();
$('#male').show();

});
$('#radio1').click(function()
{
$('#female').show();
$('#male').hide();

});


});
</script>
<form>
<input type="radio" name="choose" id="radio" checked="checked"/> male<br />
<input type="radio" name="choose" id="radio1"/> female<br />
</form>
<img id="male" src="male.jpg"></img>
<img id="female" src="female.jpg"></img>


the below code is constant we cant modifyit  the file is in googleapis

"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
Read More

Thursday 23 August 2012

Learn JQUERY hover effect easily & Live Demo

// siddhu vydyabhushana // Leave a Comment

What is jQuery?
jQuery is a library of JavaScript Functions.
jQuery is a lightweight "write less, do more" JavaScript library.
The jQuery library contains the following features:
  • HTML element selections
  • HTML element manipulation
  • CSS manipulation
  • HTML event functions
  • JavaScript Effects and animations
  • HTML DOM traversal and modification
  • AJAX



JQUERY POPOVER STYLE:






DOWNLOAD HERE  

DEMO VIEW
Read More

Tuesday 21 August 2012

HOW TO create login button like twitter

// 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