New Twitter Like Application with JQuery and PHP

Author: Zeeshan Rasool | Last updated on January 11th, 2013

JQuery, PHP, Tutorials, Twitter, Web Design

Are you looking for New twitter design clone. Then you are at right place here at 99points.info I have created new twitter style header with fancy menu using jquery and CSS. I have also add new twitter style animated popup window which shows each tweets detail individually. I used some animation using jQuery and z-index property of CSS to handle the div. I hope it will work with all screen resolutions. Please if you like it then dont forget to share it. thanks !

[ad#ad-3]

No Spams or Newsletters for Subscribers.

[ad#ad-4]

Popular Tutorials on 99Points

I used no database for this. You can use db and fetch your all records but make them separate with their ids.
I used my own techniques to get this effects I hope it will work for all browsers.

JQuery Code

$(document).ready(function(){

	//when clicked show another div
	$('.separate').click( function() {

		var getID   =  $(this).attr('id').replace('id-','');

		/// check if div is already open
		var flag = $('#flag').val();

		if(flag == 1) // hide it
		{
			$('#content2').css("z-index","-1");
			$('#content2').animate( {
			  left: '250px',
			},250);

			// set flag to 0
			$('#flag').val(0);
		}
		else // show it
		{
			$('#content2').show();
			$('#content2').animate( {
			  left: '650px',
			},250, function() {

			$('#content2').css("z-index","1");

		  });

			var divData = $('#id-'+getID).html();
			$('#placer').html('');
			$('#placer').html(divData);

			// set flag to 1
			$('#flag').val(1);
		}
	});

	// hide div
	$('.header-div span').click( function() {

		$('#content2').css("z-index","-1");
		$('#content2').animate( {
		  left: '250px',
		},250);

		// set flag to 1
		$('#flag').val(0);
	});

	/// top right menus
	$("ul.subnav").parent().append("<span> </span>");

	$("ul.topnav li span").click(function() {

		$(this).parent().find("ul.subnav").slideDown('fast').show();

		$(this).parent().hover(function() {
		}, function(){
			$(this).parent().find("ul.subnav").slideUp('slow');
		});

		}).hover(function() {
			$(this).addClass("subhover");
		}, function(){	//On Hover Out
			$(this).removeClass("subhover");
	});

});
// call this in body onload to set value again to 0
function clear(){$('#flag').val(0);}

$(document).ready(function(){

//when clicked show another div

$('.separate').click( function() {

var getID = $(this).attr('id').replace('id-','');

/// check if div is already open

var flag = $('#flag').val();

if(flag == 1) // hide it

{

$('#content2').css("z-index","-1");

$('#content2').animate( {

left: '250px',

},250);

// set flag to 0

$('#flag').val(0);

}

else // show it

{

$('#content2').show();

$('#content2').animate( {

left: '650px',

},250, function() {

$('#content2').css("z-index","1");

});

var divData = $('#id-'+getID).html();

$('#placer').html('');

$('#placer').html(divData);

// set flag to 1

$('#flag').val(1);

}

});

// hide div

$('.header-div span').click( function() {

$('#content2').css("z-index","-1");

$('#content2').animate( {

left: '250px',

},250);

// set flag to 1

$('#flag').val(0);

});

/// top right menus

$("ul.subnav").parent().append("<span> </span>");

$("ul.topnav li span").click(function() {

$(this).parent().find("ul.subnav").slideDown('fast').show();

$(this).parent().hover(function() {

}, function(){

$(this).parent().find("ul.subnav").slideUp('slow');

});

}).hover(function() {

$(this).addClass("subhover");

}, function(){ //On Hover Out

$(this).removeClass("subhover");

});

// call this in body onload to set value again to 0

function clear(){$('#flag').val(0);}

CSS

body {
	margin: 0;
	padding: 0;
	border: none;background: #d48903;
	text-align: left;
	font: normal 13px Verdana, sans-serif;
}

#main{ width:100%;  text-align:left}

.separate{border-bottom:solid #CCCCCC 1px; height:50px; width:497px; padding:8px; cursor:pointer}

.separate:hover{ background:#FEEBFB}
.separate img{ float:left;}
.separate p{ float:left; width:420px; padding-left:10px}

.separate p a{ color:#990000}

#placer{ padding:15px}
#placer a{ color:#990000}
#navigations {
	-webkit-box-shadow: rgba(0, 0, 0, 0.496094) 0px 1px 2px;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#111));
	left: 0px;
	position: fixed;
	top: 0px;
	width: 100%;
	-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
	background:-moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
	border-radius: 5px;
	line-height: 40px;
	text-align: center;
	margin: 0px;
}
#search:focus{
	-moz-box-shadow:0 0 3px #000000;
	background:none repeat scroll 0 0 #EEEEEE;
	border:1px solid #EEEEEE;
	color:#333333;
	text-shadow:0 1px 0 #FFFFFF
}
#search {
	-webkit-box-shadow: #444 0px 1px 0px;
	background: #666;
	border: 1px solid black;
	border-bottom-left-radius: 4px 4px;
	border-bottom-right-radius: 4px 4px;
	border-top-left-radius: 4px 4px;
	border-top-right-radius: 4px 4px;
	color: #CCC;
	font: normal normal normal 13px/normal Arial, sans-serif;
	padding: 6px 6px 4px;
	width: 240px;
	-moz-border-radius:4px 4px 4px 4px;
	-moz-box-shadow:0 1px 0 #444444;

	font:13px Arial,sans-serif;
}
#content {
	-moz-border-radius:5px 5px 5px 5px;
	-moz-box-shadow:0 3px 4px #999999;
	background:none repeat scroll 0 0 #FFFFFF;
	display:inline-block;
	float:left;
	padding:15px;
	margin-left:100px;
	-webkit-box-shadow: #444 0px 1px 0px;
	border: 1px solid  #999999;
	border-bottom-left-radius: 4px 4px;
	border-bottom-right-radius: 4px 4px;
	border-top-left-radius: 4px 4px;
	border-top-right-radius: 4px 4px;
	height:100%;
	min-height:700px;
	width:520px;
}
#content2 {
	-moz-border-radius:5px 5px 5px 5px;
	-moz-box-shadow:0 3px 4px #999999;
	background:none repeat scroll 0 0 #FFFFFF;
	display:inline-block;
	float:left;
	left:400px;
	-webkit-box-shadow: #444 0px 1px 0px;
	border: 1px solid  #999999;
	border-bottom-left-radius: 4px 4px;
	border-bottom-right-radius: 4px 4px;
	border-top-left-radius: 4px 4px;
	border-top-right-radius: 4px 4px;
	min-height:400px;
	display:none;
	width:380px;
	position:fixed;
	z-index:-1;
}

.header-div{background:none repeat scroll 0 0 #F4F4F4; height:20px;-moz-border-radius-topright:5px;
background:none repeat scroll 0 0 #F4F4F4;
padding:6px 10px;}

.header-div span { cursor:pointer}

#content h2 {
	color:#999999;
	font:bold 18px Helvetica Neue,Helvetica,sans-serif;
	margin:0 0 6px;
	text-shadow:0 1px 0 #FFFFFF;
}
#content textarea
{
	-moz-border-radius:4px 4px 4px 4px;
	-moz-box-shadow:0 1px #FFFFFF;
	border:1px solid #CCCCCC;
	color:#222222;
	font:14px/18px Helvetica Neue,Arial,sans-serif;
	height:56px;
	max-width:482px;
	outline:medium none;
	overflow:hidden;
	padding:8px;
	width:490px;}
ul {
	padding: 0;margin: 0px;
}

ul li {
	list-style-type: none;
	display:inline;
}

ul li a {
	color: #BABABA;
	text-decoration: none;
	text-shadow: 1px 1px 1px #000;
	padding: 10px 7px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-transition-property: color, background;
}

ul li a:hover {
	color: #fff;
}

.default {
	width: 100%;
	left:0;
	top:0;
}
#screen-name:hover {
	color: #fff;

}
#screen-name{ font-size:12px;
	cursor:pointer;color: #BABABA;
}

ul.profile-dropdown li a, ul.profile-dropdown li{
	background-image:none;
}

ul.profile-dropdown{ position:relative}

ul.profile-dropdown li:last-child a {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
}
ul.profile-dropdown li a:hover {
	color:#FFFFFF;
}
ul.profile-dropdown li {
	width:130px;
}

ul.topnav {
	list-style: none;
	margin: 2px 0 0 0;
	font-size: 1.0em;
}
ul.topnav li:hover {
	background:none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
}
ul.topnav li {
	float: left;
	height:35px;
	padding: 0px;
}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 150px;
	border: 1px solid #111;text-align:left
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0 0 0 10px;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 140px;
	text-align:left
}
html ul.topnav li ul.subnav li a {
	width: 145px;
	padding: 0px ;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

body {

margin: 0;

padding: 0;

border: none;background: #d48903;

text-align: left;

font: normal 13px Verdana, sans-serif;

}

#main{ width:100%; text-align:left}

.separate{border-bottom:solid #CCCCCC 1px; height:50px; width:497px; padding:8px; cursor:pointer}

.separate:hover{ background:#FEEBFB}

.separate img{ float:left;}

.separate p{ float:left; width:420px; padding-left:10px}

.separate p a{ color:#990000}

#placer{ padding:15px}

#placer a{ color:#990000}

#navigations {

-webkit-box-shadow: rgba(0, 0, 0, 0.496094) 0px 1px 2px;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#111));

left: 0px;

position: fixed;

top: 0px;

width: 100%;

-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);

background:-moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;

border-radius: 5px;

line-height: 40px;

text-align: center;

margin: 0px;

}

#search:focus{

-moz-box-shadow:0 0 3px #000000;

background:none repeat scroll 0 0 #EEEEEE;

border:1px solid #EEEEEE;

color:#333333;

text-shadow:0 1px 0 #FFFFFF

}

#search {

-webkit-box-shadow: #444 0px 1px 0px;

background: #666;

border: 1px solid black;

border-bottom-left-radius: 4px 4px;

border-bottom-right-radius: 4px 4px;

border-top-left-radius: 4px 4px;

border-top-right-radius: 4px 4px;

color: #CCC;

font: normal normal normal 13px/normal Arial, sans-serif;

padding: 6px 6px 4px;

width: 240px;

-moz-border-radius:4px 4px 4px 4px;

-moz-box-shadow:0 1px 0 #444444;

font:13px Arial,sans-serif;

}

#content {

-moz-border-radius:5px 5px 5px 5px;

-moz-box-shadow:0 3px 4px #999999;

background:none repeat scroll 0 0 #FFFFFF;

display:inline-block;

float:left;

padding:15px;

margin-left:100px;

-webkit-box-shadow: #444 0px 1px 0px;

border: 1px solid #999999;

border-bottom-left-radius: 4px 4px;

border-bottom-right-radius: 4px 4px;

border-top-left-radius: 4px 4px;

border-top-right-radius: 4px 4px;

height:100%;

min-height:700px;

width:520px;

}

#content2 {

-moz-border-radius:5px 5px 5px 5px;

-moz-box-shadow:0 3px 4px #999999;

background:none repeat scroll 0 0 #FFFFFF;

display:inline-block;

float:left;

left:400px;

-webkit-box-shadow: #444 0px 1px 0px;

border: 1px solid #999999;

border-bottom-left-radius: 4px 4px;

border-bottom-right-radius: 4px 4px;

border-top-left-radius: 4px 4px;

border-top-right-radius: 4px 4px;

min-height:400px;

display:none;

width:380px;

position:fixed;

z-index:-1;

}

.header-div{background:none repeat scroll 0 0 #F4F4F4; height:20px;-moz-border-radius-topright:5px;

background:none repeat scroll 0 0 #F4F4F4;

padding:6px 10px;}

.header-div span { cursor:pointer}

#content h2 {

color:#999999;

font:bold 18px Helvetica Neue,Helvetica,sans-serif;

margin:0 0 6px;

text-shadow:0 1px 0 #FFFFFF;

}

#content textarea

{

-moz-border-radius:4px 4px 4px 4px;

-moz-box-shadow:0 1px #FFFFFF;

border:1px solid #CCCCCC;

color:#222222;

font:14px/18px Helvetica Neue,Arial,sans-serif;

height:56px;

max-width:482px;

outline:medium none;

overflow:hidden;

padding:8px;

width:490px;}

ul {

padding: 0;margin: 0px;

}

ul li {

list-style-type: none;

display:inline;

}

ul li a {

color: #BABABA;

text-decoration: none;

text-shadow: 1px 1px 1px #000;

padding: 10px 7px;

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-webkit-transition-property: color, background;

}

ul li a:hover {

color: #fff;

}

.default {

width: 100%;

left:0;

top:0;

}

#screen-name:hover {

color: #fff;

}

#screen-name{ font-size:12px;

cursor:pointer;color: #BABABA;

}

ul.profile-dropdown li a, ul.profile-dropdown li{

background-image:none;

}

ul.profile-dropdown{ position:relative}

ul.profile-dropdown li:last-child a {

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

}

ul.profile-dropdown li a:hover {

color:#FFFFFF;

}

ul.profile-dropdown li {

width:130px;

}

ul.topnav {

list-style: none;

margin: 2px 0 0 0;

font-size: 1.0em;

}

ul.topnav li:hover {

background:none repeat scroll 0 0 rgba(255, 255, 255, 0.1);

}

ul.topnav li {

float: left;

height:35px;

padding: 0px;

}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/

ul.topnav li ul.subnav {

list-style: none;

position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/

left: 0; top: 35px;

background: #333;

margin: 0; padding: 0;

display: none;

float: left;

width: 150px;

border: 1px solid #111;text-align:left

}

ul.topnav li ul.subnav li{

margin: 0; padding: 0 0 0 10px;

border-top: 1px solid #252525; /*--Create bevel effect--*/

border-bottom: 1px solid #444; /*--Create bevel effect--*/

clear: both;

width: 140px;

text-align:left

}

html ul.topnav li ul.subnav li a {

width: 145px;

padding: 0px ;

}

I used hidden field to save a flag value 1-0. To make new popup div open and close on one click and other.

HTML

<input id="flag" name="flag" type="hidden" value="0" />

<div id="navigations" class="default">

<ul>

	<li style="padding-top: 4px;"><img style="margin-right: 25px; margin-top: 5px;" src="logo.png" alt="" /></li>


	<li>
			<input id="search" name="search" type="text" /></li>


	<li><a href="#">Home</a></li>


	<li><a href="#">Profile</a></li>


	<li><a href="#">Messages</a></li>


<div style="float: right; width: 150px;">
				 
</div>


<div style="float: right; margin: 2px 0 0 0;">

<ul class="topnav profile-dropdown">

	<li>
							<span id="screen-name">
							 <img src="zee.jpg" alt="" height="20" /> 99_Points
							 </span>

<ul class="subnav">

	<li><a href="#">Settings</a></li>


	<li><a href="#">Help</a></li>


	<li><a href="#">Leave preview</a></li>


	<li>
									<a class="signout-button" href="#">Sign out</a></li>

</ul>
</li>

</ul>
</div>

</ul>
</div>

<ul>

<li>

<li><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</div>

<li>

<img src="zee.jpg" alt="" height="20" /> 99_Points

</span>

<li><a href="#">Settings</a></li>

<li><a href="#">Leave preview</a></li>

<li>

</ul>

</li>

</ul>

</div>

</ul>

</div>

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com