New Twitter Design with CSS and JQuery.
Wall Script
Wall Script
Monday, October 11, 2010

New Twitter Design with CSS and JQuery.

The Twitter new web interface design is live for many more today. The makeover of the new Twitter was really fantastic, In this post I decided to explain how to implement new Twitter user interface design with CSS and JQuery. Use it and enrich your web applications. Take a look at this awesome demo.

New Twitter Design

Download Script     Live Demo

Step 1
First create a DIV element with attribute ID value container. The layar contains of two DIV elements attribute class values right and left.
New Twitter Design
<div id='container'>
<div class='right'></div>
<div class='left'></div>
</div>

Step 2
Now create a panel-frame DIV element inside the container DIV. This layer contain a DIV element attribute class value panel (sliding or rolling).
New Twitter Design
<div id='container'>
<div class='right'></div>
<div id="panel-frame">
<div class="panel"></div>
</div>
<div class='left'></div>
</div>

Step 3
Here the final HTML code ready. Now using jQuery to sliding or rolling the <div class='panel'>...</div>
HTML Code
<div id='container'>
// Right part
<div class='right'>
</div>

<div id="panel-frame">
<div class="panel">
<div class="head"> <a href="#" class="close">Close</a></div>
<div class="data">
// jquery id
</div>
</div>
</div>

//Left Part
<div class="left">
// Message display here
<div class="block" id="1">1</div>
<div class="block" id="2">2</div>
...............................
...............................
</div>

</div>
New Twitter Design
Javascript
$(".block").click(function(){})- block is the class name of DIV tag. Using $(this).attr('id') - calling DIV tag ID value.
<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()
{

$('.block').click(function()
{
var id= $(this).attr('id'); // .block ID
var data_id= $(".data").html(); // .data DIV value
var panel= $('.panel');
var panel_width=$('.panel').css('left'); // rolling panel width


if(data_id==id)
{
// Rolling Animation
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
}
else
{
// panel width CSS width:340px + border:1px = 341px
if(panel_width=='341px')
{
// No rolling animation
}
else
{
// Rolling Animation
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
}
}
// passing id value to <div class='data'$gt; </div>
$('.data').html(id);
return false;
});

// panel close link
$('.close').click(function()
{
var panel= $('.panel');
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
return false;
});

});
</script>

CSS
#container
{
width:700px;
margin:0 auto;
background-color:#ffffff;
min-height:500px;
overflow:auto;
-moz-border-radius:5px;
-webkit-border-radius:6px;
border:solid 1px #999999;
}
.left
{
float:left;
background-color:#fff;
width:350px; min-height:300px;
position:relative;
}
.right
{
float:right; width:350px;
}
#panel-frame
{
position:relative;
max-width:700px;
position:fixed;
}
.panel
{
background-color:#f2f2f2;
width:340px;
height:550px;
margin-top:20px;
position:relative;
position:absolute;
border:solid 1px #999999;
border-left:0px;
left:0;
}
.head
{
background-color:#ffc72e;
padding:10px;
text-align:right;
}

web notification

75 comments:

  1. Good Job Srinivas
    I Like it....

    Request Tutorial:
    Auto Suggestion when type @ in TextArea like in NewTwitter
    It's Cool//

    Thanks

    ReplyDelete
  2. @Anton Junaidi

    @Tag Friends with Jquery, Ajax and PHP

    http://www.9lessons.info/2010/08/tag-friends-with-jquery-ajax-and-php.html

    ReplyDelete
  3. Good Post.. Nice use of jquery and css.

    ReplyDelete
  4. Cool post like usually :D

    thanks a lot srivinas :)

    ReplyDelete
  5. Gud Wrk Srinivas Keep It up

    ReplyDelete
  6. i wanna ask how can i add data :) ,,, I'm new in web design

    ReplyDelete
  7. Srinivas, great tutorial as always. Think it would be possible to add a unique URL identifier per container? I'd love to have #3 open, for example, and be able to send a link that would directly open #3.

    I've attached this example to help explain what I mean:
    http://screencast.com/t/1xi0oci92X

    ReplyDelete
  8. I apologize. I didn't read the whole tutorial before posting. Looks like you're one step ahead of me :)

    ReplyDelete
  9. Sorry to say but the animation is clunky at best. The new layout is quite good but I don't like the default color theme. The left and right panels are handy, though.

    ReplyDelete
  10. @srinivas

    Thanks.. Cool
    but... not work in mozilla ...
    Why you use ContentEditable ..???
    you should use TextArea like newTwitter...

    0y....
    Request Tutorial: Creating a Chat Application on Mobile Phone (Symbian)......
    Thanks...

    ReplyDelete
  11. Thanks @Srinivas

    i well waiting the post part 2

    ReplyDelete
  12. Thanks a lot srivinas, it was exaclty what I'm looking for. You save my night.

    ReplyDelete
  13. Wow, great srinivas.....

    thanks..

    ReplyDelete
  14. very interestin, i am gonna use it.
    thanks

    ReplyDelete
  15. I don't understand how we add separate content to each opening panel??

    ReplyDelete
  16. Great post, I was actually looking at doing something like this in my next project.

    Any idea when part 2 will be up?

    Thanks!

    ReplyDelete
  17. This would be awesome if the content on the right got loaded using ajax. Maybe a part 3 idea?

    Either way, great post.

    ReplyDelete
  18. This is a very nice concept. love it!

    ReplyDelete
  19. Not Work in IE6,7. How to fix?

    ReplyDelete
  20. oooh i want the next lesson sooo much. How i fill it with content. Idea, anyone? I can´t work with just the #id's.

    ReplyDelete
  21. In the CSS, what the purpose of declaring position twice in .panel?

    ReplyDelete
  22. Help Me Please!!!!


    This script is greats, but i need invert direction of slide panel and show panel from right to left!

    Please, helpme is urgent!!!

    Thanks to all!!!

    My email is [email protected]

    ReplyDelete
  23. wew...like a door can open and close...hohohoho
    its a cool

    ReplyDelete
  24. Hi srini,

    I have made a same ui using your idea.

    Please take a look at this.

    http://hostingcouponz.com/twitter-like-ui-expand-url-using-php-and-jquery/


    and comment me please

    ReplyDelete
  25. Thanks for u r information

    its very useful

    ReplyDelete
  26. @Darren: I think having position twice in the CSS is a typo. The example will still work because postion: absolute will overwrite the position: relative declaration.

    Only reason I can see position being in this example twice to to show how position:relative will contain position: absolute.

    ReplyDelete
  27. Hi There,
    quick question...what software are you using to create the images?

    ReplyDelete
  28. Hello Srinivas,
    First of all thanks for sharing your knowledges, it is very appreciated.

    I have a question regarding the right column, how is it possible to hide the content when the door is sliding (like Twitter actually do it)?

    Have a good day,
    Ben

    ReplyDelete
  29. @Ben

    <div class='right'>

    <div class='rightdata'>
    //right side data here
    </div>

    // javascript

    (".rightdata").hide()
    and
    (".rightdata").show()

    </div>

    ReplyDelete
  30. @Srinivas

    Thanks :), keep up the good work

    ReplyDelete
  31. I am getting a 404 for the Demo page. Any idea why?

    ReplyDelete
  32. trust me, i hate ie, but I want to use this in a promotion on our site, @Srinivas or anyone else, do you know what's causing the issue is IE?

    ReplyDelete
  33. hehehe can't believe this, I instantly found this solution, thanx to Srinivas

    ReplyDelete
  34. Anna super.. chala bagundi.. keep going

    ReplyDelete
  35. anna.. can you plz explain this code..i am unable to understand...
    panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});

    ReplyDelete
  36. @Mihir: that's a shortcut of using" if else " in programming. I think it'd be clearer if you see it like this:
    if( parseInt(panel.css('left'),0) == 0 )
    left += +panel.outerWidth();
    else
    left = 0;

    hope this help

    ReplyDelete
  37. Hi, nice tutorial, I have a question:
    Why do you add two positions (relative, and fixed) for "div#panel-frame" and (relative, and absolute) for "div.panel" I know that the browser reads only the last added one.

    ..I also have a suggestion:
    How about adding a resizer based on window size, like twitter, when you resize the window, the box become smaller or bigger based on the browser's window size. That would be a great addition.

    ReplyDelete
  38. nice tutorial.
    You can use my jquery plugin for twitter like restriction in text box.
    http://learneveryday.net/jquery/plugins/twitter-like-textboxs-text-restriction-and-disable-submit-button-with-jquery/

    ReplyDelete
  39. what is the meaning two position in one class?? does not only the last one would effect??

    ReplyDelete
  40. How would you make it so you can replace #1 with thumbnail image and slide out to bigger image on the right side?

    Displaying thumbnail is easy but getting the bigger image to show in id=1 is tough. Probably simple to tough for me

    ReplyDelete
  41. Do you have PHP and CSS will help you guys? message recording system? Thanks :)

    ReplyDelete
  42. does anyone know how to make it so the right slide out, slides down instead of to the right?

    ReplyDelete
  43. How do you hide behind a smaller panel? Like if the right panel is bigger (in width size) than the left panel? I can only think of .hide() and .show() but in my head, it will come out of hiding from the width set which won't look like its coming out from behind the smaller panel.

    How do you make the panel come out of hiding if the left panel is smaller?

    Thanks

    ReplyDelete
  44. nice script man two thumbs up

    ReplyDelete
  45. How about adding a resizer based on window size, like twitter, when you resize the window, the box become smaller or bigger based on the browser's window size. That would be a great addition.

    +

    will wait second titorial based on this script, do not understand how to add information to right side

    ReplyDelete
  46. Hi,

    Great work - quick question:
    How do we make the panel moving to the right to be aligned with the element, as currently for me when i click on an element it opens but all the way at the top of the page.

    Any help would be appreciated.
    Thanks

    ReplyDelete
  47. great...

    how to integrate this with a bootstrap template?

    so when screen is mobile this will also work?

    thanks

    ReplyDelete
  48. I'm going to publish a tut about application design using bootstrap

    ReplyDelete
  49. first of al tel thank 4 this code....you people did the good job.i need som information about this code.Actualy i convert php 2 jsp and the code a working only in chrome not in other browser can u help me:)

    ReplyDelete
  50. Many Thanks for the code. Very Useful, Saved my countless number of hours :)

    ReplyDelete
  51. how about new twitter timeline sir....
    when the status clicked, they expand below

    ReplyDelete
  52. How would this work using responsive css like bootstrap? Would this function still work. Also, how to do animate your images. That is awesome. Was this a psd that you animated?

    ReplyDelete
  53. HOw to load the fields in panel from my sql database at runtime

    ReplyDelete
  54. Thats pretty cool but i have one question how do i post other data and content in the right hand box through php . And not just common data for all, respective data for each different right panel with different id's.

    ReplyDelete
  55. @shrini how to make the right side scrollable ?
    pls do that when the content is more ...pls paste a small code for that pls

    ReplyDelete

mailxengine Youtueb channel
Make in India
X