Hello,
I have a question regarding the Facebook Wall Post Text Area, this has probably nothing to do with PHP but I need to get the similar effect. So the look of it. When you click on it it expands and shows that footer (the thing I am asking about most). On the footer, there are two images/links, where you can type in your location and the people that are with you.
Anyone know how to get similar effect? what do I need? any plugins?
Thanks.
its all client side, you can just view the source of the page.
dagon;10989528 wrote:you can just view the source of the page.
Following that logic, one could also suggest someone learn how to use jQuery by simply viewing the source of the minified version of the .js file. Good luck trying to do that, though.
@: One way might be to use jQuery, which has a variety of animation effects (such as expanding a container's/element's size and fading in/out a container/element, etc.).
For example, this page in the jQuery API docs showcases some of the built-in animation function, but note there are also jQuery plugins that let you do some pretty nifty things. Just try playing around with some Google search phrases like "jquery animation <behavior>" where <behavior> is whatever you want the animation to look like, e.g. "jquery animation expand text box" which, incidentally enough, landed me on a page entitled Facebook like Expanding Textbox with Jquery.
@, yeah man! good luck with that. I already tried this on facebook and they have coded the crap out of it (sorry for bad language).
@ that link what you have me about 'Facebook like Expanding Textbox with jQuery' is a really nice thing. Thanks for that. Is there a plugin for jQuery of some CSS code that will allow me to do this: 
. Can you see where it says 'Friends of Friends', 'Post' and where you share you location etc... On that gray bar (footer). That is the thing I am looking for. I tried typing in google like 'Textarea customization' and stuff like that but nothing came up. Any ideas?
Just create a container div (to get the border around everything), and inside that container div add a textbox (borderless) and a div underneath that (this would be the grey bar at the bottom).
Thanks for your reply! So it would look like this:
#container {
border: 1px solid #000
}
#container box {
----something----? but what?
}
#container footer {
background: #F6F6F6
}
I am not good with CSS. More of a HTML and PHP coder.
The html code and css style selectors must match.
id="container-footer"
is not the same as
#container footer
This style selector matches an element with tagname "footer" which is a descendant of the element with id="container".
All style rules must end with ;
What you want is something along the lines of
<style type="text/css">
#container
{
border: 1px solid black;
width: 400px;
height: 71px;
}
#container-box
{
margin: 0;
padding: 0;
width: 100%;
height: 40px;
}
#container-footer
{
background-color: #F6F6F6;
height: 30px;
margin: 0;
padding: 0;
border-top: 1px solid black;
}
#container-box > textarea
{
width: 100%;
height: 100%;
border: 0;
resize: none;
margin: 0;
}
#container-footer > .button
{
margin: 0;
padding: 0;
float: left;
width: 30px;
height: 30px;
}
#container-footer > .button + .button
{
border-left: 1px solid black;
}
#container-footer > .bar
{
margin: 0;
padding: 5px 0px;
float: left;
width: 338px;
height: 20px;
border-left: 1px solid black;
}
#container-footer > .bar > *
{
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="container-box">
<textarea></textarea>
</div>
<div id="container-footer">
<div class="button"></div>
<div class="button"></div>
<div class="bar">
<input type="button" value="Submit" />
<a href="">Friend of Friends</a>
</div>
</div>
</div>
But do note that <textarea> must contain the "rows" and "cols" attributes, at least in HTML 4.01 / XHTML 1. I don't know if this requirement has been removed in HTML 5, but I do hope so since it makes little sense to require attributes which affects the layout when layout should be handled by CSS.
You may also want to take a look at http://css-tricks.com/6841-textarea-tricks/
What does your code look like? What browsers does it apply to?
It's working now. I have changed few things around and it is working fine.
<style type="text/css">
#container
{
width: 400px;
height: 71px;
}
#container-box
{
margin: 0;
padding: 0;
width: 100%;
height: 40px;
}
#container-box2
{
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
position: relative;
}
#container-footer
{
background-color: #F6F6F6;
height: 30px;
}
#container-box > textarea
{
width: 100%;
height: 100%;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
resize: none;
margin: 0;
}
#container-footer > .bar
{
padding: 5px 0px;
float: left;
width: 100%;
height: 20px;
}
#container-footer > .bar > .button1
{
float: left;
width: 30px;
height: 100%;
border-right: 1px solid #000;
}
#container-footer > .bar > .button2
{
float: left;
width: 30px;
height: 100%;
border-right: 1px solid #000;
}
#container-footer > .bar > .button3
{
float: left;
width: 30px;
height: 100%;
border-right: 1px solid #000;
}
</style>
Another question. Maybe you would know how I can do something like facebook has aswell. I mean, I want my wall/feed to be displayed to people that someone is friends with?
xNeOx;10989598 wrote:I mean, I want my wall/feed to be displayed to people that someone is friends with?
if ($thisUser->friendCount() > 0)
$query = 'SELECT stuff FROM feed WHERE user_id = ' . $your_personal_id;
But perhaps you mean
I want my wall/feed to be displayed to people that I am friends with?
Or possibly
I want my wall/feed to be displayed to people that are friends of my friends?
You have to be careful how you express yourself, since the exact meaning of what you want has to be reflected in the code. Computers may dream of electric sheep, but they do not guess. And what you asked above is entirely different from my guesses of what you want.
If using a relational database, just check for the an existing entry in the user <-> user link table. Let's assume two tables: user(id, name, etc) and friend(user_id, friend_id) which both reference user(id).
For a particular $user, display his friends feeds.
$query = sprintf(
"SELECT some, stuff
FROM friend
INNER JOIN feed ON friend_id = feed.user_id
WHERE friend.user_id = %d",
$user->getId()
);
Should feeds of this user's friends' friends be included, you'd have to do something like
$query = sprintf(
"SELECT some, stuff
FROM friend f
INNER JOIN friend ff ON f.friend_id = ff.user_id
INNER JOIN feed ON ff.freind_id = feed.user_id
WHERE friend.user_id = %d",
$user->getId()
);