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>  <a href='#' id='button'>Comment</a>
</div>
<hr size='1' color:'#1e1e1e' />
</div>
0 comments:
Post a Comment