0

I'm having trouble while creating FaceBook style Wall. I'm not getting how to create database and post status or images or link to database

Please help me to create FaceBook style Wall
Following is my wall page code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FaceBook style status update</title>
<style type="text/css" media="all" >

body{  
font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
font-size:12px;  
margin-top:100px;
margin-left:100px;
}
  
.text{
padding:0;
margin:0;
clear:both;
overflow:hidden;
}
 
.clear{
clear:both;
}
 
.container{
width:495px;
border-top:solid #aaaaaa 1px;
}
 
.img_top{
padding:0;
margin:0;
position:relative;
left:52px;
width:11px;
height:7px;
background-image:url('top_arrow.png');
background-repeat:no-repeat;
display:block;
clear:both;
z-index:2;
overflow:hidden;
}
 
.input_box{
font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
color:#808080;
width:495px;
height:25px;
padding:5px 0 0 5px;
margin:0;
border:solid #b4bbcd 1px;
outline:none;
resize:none;
}
 
.share{
color:#808080;
padding:0 12px 2px 0;
font-weight:bold;
float:left;
position:relative;
}
 
.status{
width:60px;
height:14px;
background-image:url('top_status.png');
background-repeat: no-repeat;
color:#000000; 
text-align:right;
font-weight:bold;
float:left;
}
 
.pd{
padding:8px 0 4px 0;
}
 
.text_status{
padding:0;
margin:0;
position:relative;
top:-2px;
z-index:1;
}/* button */
 
.button_outside_border_blue{
width:50px;
margin-top:5px;
border:solid #29447e 1px;
border-bottom:solid #1a356e 1px;
cursor:pointer;
float:right;
}
 
.button_inside_border_blue{
padding:4px 0 4px 0;
background-color:#5c75a9;
border-top:solid #8a9cc2 1px;
text-align:center;
font-weight:bold;
color:#ffffff;
}
 
div.button_inside_border_blue:active{
background-color:#4f6aa3;
}
</style>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type='text/javascript' src="http://jquery-elastic.googlecode.com/svn/trunk/jquery.elastic.source.js"></script>

<script>
$(document).ready(function(){ 
	var textarea = document.getElementById('contentbox'),
	message = "So what's on your mind?";
		 
	textarea.value = message; // set default value
	textarea.onfocus = textarea.onblur = function () {  
	  if (this.value == '') {
		this.value = message;
	  } else if (this.value == message) {
		this.value = '';
	  }
	};
});
</script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#contentbox').elastic();
});//]]>  
</script>
</head>

<body>
<h1>FaceBook style status update</h1>
<div class="container">
		<div class="pd">
			<div class="share">Share:</div>
			<div class="status">Status</div>
			<div class="status">Photo</div>
			<div class="status">Link</div>
			<div class="loading"></div>
		</div>	
			
		<div class="img_top"></div>
		
		<div class="text_status">
			<textarea class="input_box" name="status" id="contentbox" />So what's on your mind?</textarea>
			<div id="linkbox"></div>
		</div>
				
		<div class="button_outside_border_blue" id="share">
			<div class="button_inside_border_blue">Share</div>
		</div>		
		

</div>
</body>
</html>
2
Contributors
1
Reply
4
Views
6 Years
Discussion Span
Last Post by Stefano Mtangoo
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.