Facebook Style Highlight Status Update Box using jQuery & CSS

My readers continuously asked me to write about facebook style textarea highlighter while clicking on status update box. So today I’m very glad to fulfill my readers request.

Facebook keep updating their User Interface every month & this feature is really used to stay focus only on status update.

We can implement this feature by using few lines of CSS and jQuery code. Lets see now

Step 1 :  CSS Code

Place this CSS code in the top of the page ie before </head> tag

I have used z-index here. It is used to stack the order of an element. An element with greater stack order is always in front of an element with a lower stack order.Also z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

#status-overlay {

height: 100%;

width: 100%;

background: rgba(0, 0, 0, 0.50);

position: fixed;

top: 0;

left: 0;

z-index: 99999;

overflow: hidden;

}

Step 2: HTML Code

Place the below html code anywhere in the document. The element status-overlay is used to provide dark overlay in the screen

<div id="status-overlay" style="display: none"></div>

HTML form

The function highlight() will be called after clicking in the textarea.

<form id="highlight-textarea" class="form">

<textarea onclick="highlight();" name="postText" cols="10" rows="3" placeholder="What's going on?"></textarea>

<input type="button" value="Post">

</form>

Javascript Code

After clicking the textarea, highlight() function will be called and it activates the status-overlay element, also the z-index of the html form will be set to more than status-overlay element. Html form position also set to relative in order to make z-index work

function highlight()

{

$("#status-overlay").show();

$("#highlight-textarea").css('z-index','9999999');

$("#highlight-textarea").css('position', 'relative');

}

Below jQuery code is used to hide the dark overlay once we click outside the textarea/status update box.

$(document).ready(function(){

$('textarea').on('click', function(e) {

e.stopPropagation();

});

$(document).on('click', function (e) {

$("#status-overlay").hide();

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

$("#highlight-textarea").css('position', '');

});

});

That’s It. I hope you like the article very much.

Please dont forgot the check the live demo

Please subscribe to my blog to get the latest updates