How does Twitter put labels inside textboxes?


Tags: javascript,jquery,html,css

Problem :

On the twitter login page, the label for input fields arrive inside input fields that uses a common trick with javascript/jquery. However, I went through a twitter source to figure out how they are doing that. I found onChange: it adds a class 'hasome' to a parent div and has a default text as a span, which never gets a property like display:none;.

I have tried to go through their HTML/CSS/JS but could not find their methods. Can someone please tell how twitter is doing that?

Edit Twitter code:

<div class="placeholding-input username hasome">
    <input type="text" class="text-input email-input" name="session[username_or_email]" title="Username or email" autocomplete="on" tabindex="1">
    <span class="placeholder">Username or email</span>
</div>

Added twitter HTML in question. When we add some code, it only add one class 'hasome' in parent div. in firebug, I could not see any property assigned to class 'hassome'. My question is where is there code which is doing that or CSS if it is achieved by CSS.



Solution :

While the hasome class is applied to the parent div, it's used in a selector that's setting CSS values on the child span. So in Firebug (or Chrome or IE's developer tools), you'll need to keep an eye on that child span, not the div, to see what's going on.

You should end up seeing the following rules applied, from the CSS file t1_core_logged_out.bundle.css:

.has-content .placeholder, .hasome .placeholder
{
    font-size:0!important;
    z-index:-1;
    -moz-opacity:0;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
}

The part of the rule that ends up taking effect is the ".hasome .placeholder" part: when an element with style .placeholder has an ancestor with class .hasome, then various techniques are used to hide that child element. It's basically using a class on a parent to control styles of a child or descendant, which is a fairly common CSS technique.


    CSS Howto..

    how to fit the background image to the containing anchor element?

    How To Include CSS and jQuery in my wordpress plugin?

    Nested CSS: How to get to the child?

    How can I make my web application look correct in IE 8 and 9? [closed]

    On a web page how do I display a label that changes to a drop down box on hover

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    How to use fallback values for `display` property in CSS?

    How to precisely center bootstrap grid in html page?

    How to create a single space in css between a sentence and a photo on my wordpress site?

    Is there any tutorial to teach me how to design the sidebar like this website? [closed]

    How to add a z-index to separate image from div border

    CSS/JS: How do I copy the edge pixels and repeat them

    HTML + CSS layout with bottom box showing all content, variable height top box with scroll

    How to make the 2nd column in a 2 column Bootstrap grid the same height as the 1st column

    How to display shopping cart at the right of page

    how to move canvas along with a centered canvas

    How to make permanent changes to a website's CSS from within the browser?

    How can I push the first row of images down?

    How to get content of a specific css column

    How can I get the name of a page via Laravel Blade

    How to change a div's position according to data from database

    how to change css styles of custom jquery widget?

    CSS select: how to count and select child of a specific class only?

    How to create a Horizintal menu using CSS, and showing a div for an item when the item clicked

    How do I enable SASS line numbers in CSS output?

    If the tabs use all images to show text + icon on each tab, then how to add text to to help search engine to find the keywords on the tabs?

    How can I tell if a particular CSS property is inherited with jQuery?

    How to calculate the multiplication factor for scroll speed on another element so that they both reach end at the same time (top of view)

    Li tag is not aligning correctly in Chrome. How to fix it?

    How to Make Button Tag Only Show Image Inside of it