Twitter-like tweet box using bootstrap - html

Question

Hello I really need your help. I have been googling around for how to make a tweet box like twitter's "What's happening" box for user to post new content using bootstrap 3 but so far I cannot find anything close.
Anyone have any idea or keyword that could help? Thank you very much!

Answer 1

You may find a lot of plugins to do the same . But If you want do it your own follow the below steps (this contain only basic functionality)
Define a span or div like below
<div class="container">
<div id="mockTextBox">
What's Happening ?
</div></br>
<textarea id="originalTextBox" class="form-control">
</textarea>
</div>
Hide the textarea at first and show the span/div as textbox.
Then define the events
$(document).ready(function(){
$('#originalTextBox').hide()
$('#mockTextBox').click(function(){
$('#mockTextBox').hide()
$('#originalTextBox').show()
})
})
Apply CSS accordingly and you got what you want.
#mockTextBox
{
width:300px;
height:50px;
border:1px solid;
}
#originalTextBox
{
width:300px;
height:50px;
resize:none;
}
Check this sample http://codepen.io/Midhun052/pen/mVByzK
I have add the bootstrap class to text area in the codepen above for that nice look.
Just updated
A few more CSS and Images
$(document).ready(function() {
$('#originalTextBox').hide()
$('#mockTextBox').click(function() {
$('#mockTextBox').hide()
$('#originalTextBox').show()
})
})
#mockTextBox
{
width:300px;
height:50px;
border:1px solid;
display:inline-block;
margin-top:10px;
border: 1px solid #337ab7;
}
#txt
{
border:1px solid;
display:inline;
height:20px;
}
#originalTextBox
{
width: 310px;
height: 100px;
resize: none;
border: 1px solid #337ab7;
background-color: #337ab7;
margin: 10px;
}
#originalTextBox textarea
{
resize:none;
margin:5px;
width:300px;
}
.class2
{
float: right;
margin-top: 12px;
margin-right: 2px;
}
.imgF1
{
width:20px;
height:20px;
margin:5px
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
<div id="mockTextBox">
<img src="http://lorempixel.com/46/46"/>
<div id="txt">What's Happening ?</div>
<img class="class2" src="http://lorempixel.com/16/16"/>
</div>
<div id="originalTextBox">
<textarea class="form-control">
</textarea>
<img class="imgF1" src="http://lorempixel.com/46/46">Post your photo</img>
</div>
</div>

Answer 2

It's simple jQuery application.
Check this out.
Here's a JSFiddle.
Then all you gotta do is initiate the jQuery.
Such as:
$('textarea').autogrow({onInitialize: true});
Check fiddle for more info.
Cheers!
UPDATED ANSWER:
Use CSS to style your textarea, no need for javascrcipt styling here. Prepare your style in CSS under a specific class and when you need to, you can add your element this class and its propeties. This is much cleaner solution. Use focus and blur events to get textarea element. Here is example.
HTML
<textarea rows="4" cols="50" id="txtArea">
<textarea>
JS
$(document).ready(function() {
$('#txtArea').on("focus", function(event) {
if(!$('#txtArea').hasClass('customTextAreaClass')){
$('#txtArea').addClass('customTextAreaClass');
}
});
$('#txtArea').on("blur", function(event) {
if($('#txtArea').hasClass('customTextAreaClass')){
$('#txtArea').removeClass('customTextAreaClass');
}
});
});
CSS
.customTextAreaClass{
background-color: #fff;
width: 565px;
color: #000;
height: 120px;
padding-left: 1px;
padding-top: 1px;
font-family: "Tahoma", Geneva, sans-serif;
font-size: 10pt;
border: groove 1px #e5eaf1;
position: inherit;
text-decoration: none;
}