Simple sliding login page..

<!–

used: jquery,css 2,html 4.01

This is a source code for sliding login page.It is not that kind of good as it has to be. I do it i have seen this kind of sliding login system in a web site.So whatever it is.. i will try to  update it next time.

When you click on “open login panel” it will slide down the log in panel and after click on the “close panel” it slideUp the panel ..

–>

Continue reading

Advertisements

App6: Image slide show using jquery

<!–

This is very normal slide show code using jquery

–>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
var c=0;
function f(a)
{
var i=new Image();
i[0]=”image/1.jpg”;
i[1]=”image/2.jpg”;
i[2]=”image/3.jpg”;
i[3]=”image/4.jpg”;
i[4]=”image/5.jpg”;
if(c==5)
c=0;
$(‘img’).attr(‘src’,i[c]);
c=c+1;
setTimeout(“f(c)”,4000);
}

</script>
<style type=”text/css”>

#frame
{
border:5px inset #999;
padding:3px;
margin:0 auto;
height:250px;
width:760px;
}

img
{
height:250px;
width:760px;
}
</style>
</head>

<body onload=”f(0)”>
<div id=”frame”>
<img src=”” alt=”image” name=”m”/>
</div>
</body>
</html>

App5: Change background image with mouseover effect

<!–

Whenever you took the cursor upon an image the image will be apply as the background image of the body. I have use 5 images with mouseover effect and those put into image folder.So if you don’t put your images on the image folder it will not found the currect path of the images, be carefull.

–>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){

$(‘div img’).mouseover(function(){

var img_source = $(this).attr(‘src’);
var height = $(window).height();
var width = $(window).width();

$(this).css({‘opacity’:1});
$(‘body’).css({‘background-image’:’url(‘+img_source+’)’});

}).mouseout(function(){

$(this).css({‘opacity’:0.4});
});

});

</script>
<style type=”text/css”>
#main_div
{
height:auto;
width:150px;
border:2px #0C3;
}
img
{
opacity:0.4;
border:2px inset #999;
height:100px;
width:120px;
padding:2px;
}
</style>
</head>

<body>
<div id=”main_div”>
<img src=”image/1.jpg” alt=”image 1″/>
<img src=”image/2.jpg” alt=”image 2″/>
<img src=”image/3.jpg” alt=”image 3″/>
<img src=”image/4.jpg” alt=”image 4″/>
<img src=”image/5.jpg” alt=”image 5″/>

</div>
</body>
</html>

App3: Agree and get register like gmail registration

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){

$(‘#checkbox’).change(function(){

var a = $(this).attr(‘flag’);

if(a == 1){
$(‘#button’).removeAttr(‘disabled’);
$(‘#checkbox’).attr(‘flag’,’0′);}
else
{
$(‘#button’).attr(‘disabled’,’disabled’);
$(‘#checkbox’).attr(‘flag’,’1′);
}

});
});

</script>
</head>

<body>
<form id=”form1″ name=”form1″ method=”post” action=””>
<p>
<input type=”checkbox” name=”checkbox” id=”checkbox” flag = “1”/>
Agree</p>
<p>
<input type=”submit” name=”button” id=”button” value=”register” disabled=”disabled” />
</p>
</form>

</p>
</body>
</html>

App2: A nice mousemove effect

<!–

When you move the mouse over a specific button or link or something else it will show a little description about it. We can do it with css/html but the problem is using css/html to do it , the position of the description will stay same position whether you move the cursor or not.
This code just change the position of the description according to the movement of the cursor.

–>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
#text
{
display:none;
height:30px;
width:200px;
padding-left:10px;
padding-top:5px;
position:absolute;
border:1px solid #000;
}

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

$(document).ready(function(){

$(‘input[type=”button”]’).mousemove(function(e){

$(‘#text’).text(‘This is button’).show();
$(‘#text’).css(‘top’,e.clientY+13).css(‘left’,e.clientX+13);

}).mouseout(function(){

$(‘#text’).hide();
});

});

</script>
</head>

<body>
<input type=”button” value=”Feel Good!”/>
<div id=”text”> </div>
</body>
</html>

App1: How many chracters left

<!–

This code make your site more dynamic. Suppose you created forum or a social network where each user can post something and you just restrict them that they do post something that is exceed from 100 character and during they write something you are dynamically show how many character are left in their post ..

 –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){

$(‘textarea’).keyup(function(){

var maxchar = 100;
var current_char = $(this).val().length;
var remain_char = maxchar – current_char;
if(remain_char >1)
val = “characters”;
else
val = “character”;
$(‘#d’).text(“You have “+remain_char+” “+ val +” left”);
});

});

</script>
</head>

<body>
<textarea cols=”20″ rows=”10″ maxlength=”100″></textarea><br />
<div id=”d”></div>
</body>
</html>