Develop Reference

Decode this Example of Dynamically Increasing Input Width

I've been doing a huge amount of reading here and on other websites about how to dynamically increase an input field's width based on its content. All the solutions so far have only worked in part, but I have found a website where it works perfectly:
https://paper.fiftythree.com/search
They've even given some vague instruction as to how they did it:
http://making.fiftythree.com/fluid-text-inputs/
But I can't for the life of me work out how to implement this on my own website.
This is my form structure at the moment:
<form action="/" class="search-form">
<input type="text" name="s" class="_input" placeholder="What are you looking for?">
<button type="submit" class="_button">Search</button>
</form>
My reason for trying to do this is that the form as a whole has a border underneath it. I would then like text that is typed in to have its own border-bottom 'grow' with the text in a different colour. The input field being a smaller width with its own border works, but I am stuck on a smooth dynamic experience for its width.
Could anyone help? Thanks.

On this example we can do this:
Input positioned absolute with fixed width this never changes, and will get the data
An element that will change the width based on the value from the input and the text transparent so that way we only see the input text.
Centered elements creating the ilusion of increase of the width
$('input').on('keypress', function() {
$('span').text($(this).val())
})
.container {
text-align: center;
position: relative;
font-size:25px;
}
.container img, .container span {
display: inline-block;
line-height: 50px;
margin-right: -4px;
vertical-align: middle;
}
.container span {
padding: 0 10px;
font-family: sans-serif;
color: transparent;
overflow: hidden;
white-space: nowrap;
max-width: 250px;
}
.container input {
width: 250px;
border: none;
text-align: center;
font-size:inherit;
padding: 0 50px;
position: absolute;
left: 50%;
top: 50%;
z-index: 5;
background: transparent;
transform: translate(-50%, -50%)
}
input:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="http://placekitten.com/50" alt="">
<span>Type here</span>
<input type="text" placeholder="Type here">
<img src="http://placekitten.com/50" alt="">
</div>
Note: Still have some issues when deleting text, but you get the idea

How can I make tabs with only CSS? [duplicate]

This question already has answers here:
HTML tab interface using only CSS
(3 answers)
Closed 7 years ago.
I'm looking to make a tab system like jQuery tabs, where users can between toggle different panels to view different content:
However, I need to accomplish this without the use of javascript, so that users without javascript enabled can easily use the site. Furthermore, I'd like to avoid navigating to different static html pages, each with a different style corresponding to the "tab." What's a good way to approach this?

An easy way to implement CSS-only tabs is to use radio buttons!
The key is to style labels that are attached to a respective button. The radio buttons themselves are hidden, with a little absolute positioning, off the side of the screen.
The basic html structure is:
div#holder
input[type="radio"]
div.content-holder
label
div.tab-content (all your tab content goes here)
input[type="radio"]
... keep repeating
The key is in the selectors. We are going to style the input[type="radio"] buttons with
input[type="radio"] {
position: absolute;
left: -100%;
top: -100%;
height: 0;
display: none;
}
This hoists them off the side of the screen, as mentioned above. But how do we click them then? Fortunately, if you target a label, it can click the input for you!
<label for="radioInputId1">tab title</label>
Then we style the actual labels (I'm going to leave out the aesthetic styling for brevity):
input[type="radio"] + div.content-holder > label {
display: inline-block;
float: left;
height: 35px;
width: 33%; /* or whatever width you want */
}
Now our labels should look like "tabs" at the top of the div#holder. But what about all that content? Well, we want it to all be hidden by default, so we can target it with the following selector:
input[type="radio"] + div.content-holder > div.tab-content {
display: none;
position: absolute;
top: 65px; /* this depends on your label height */
width: 100%;
}
The above CSS is the minimal CSS required to get it working. Everything other than display: none; is what you will see when the div is actually displayed. But this shows nothing in the tabs, so… now what?
input[type="radio"]:checked + div.content-holder > div.tab-content {
display: block;
}
The reason the above works is because of the :checked pseudo-class. Since the labels are attached to a specific radio button, they trigger :checked on click. This automatically turns all the other radio buttons off. Because we have have wrapped everything within a div.content-holder, we can use the next sibling CSS selector, +, to make sure we only target a specific tab. (Try using ~ and see what happens!)
Here's a fiddle, for those of you who don't like stack snippets, and here's a stack snippet, for those of you who do:
#holder {
border: solid 1px black;
display: block;
height: 500px;
position: relative;
width: 600px;
}
p {
margin: 5px 0 0 5px;
}
input[type="radio"] {
display: none;
height: 0;
left: -100%;
position: absolute;
top: -100%;
}
input[type="radio"] + div.content-holder > label {
background-color: #7BE;
border-radius: 2px;
color: #333;
display: inline-block;
float: left;
height: 35px;
margin: 5px 0 0 2px;
padding: 15px 0 0 0;
text-align: center;
width: 33%;
}
input[type="radio"] + div.content-holder > div {
display: none;
position: absolute;
text-align: center;
top: 65px;
width: 100%;
}
input[type="radio"]:checked + div.content-holder > div {
display: block;
}
input[type="radio"]:checked + div.content-holder > label {
background-color: #B1CF6F;
}
img {
left: 0;
margin: 15px auto auto auto;
position: absolute;
right: 0;
}
<div id="holder">
<input type="radio" name="tabs" value="1" id="check1" checked>
<div class="content-holder">
<label for="check1">one</label>
<div class="tab-content">
<p>All my content for the first tab goes here.</p>
</div>
</div>
<input type="radio" name="tabs" value="2" id="check2">
<div class="content-holder">
<label for="check2">two</label>
<div class="tab-content">
<h2>You can put whatever you want in your tabs!</h2>
<p>Any content, anywhere!</p>
<p>
Remember, though, they're absolutely positioned.
This means they position themselves relative to
their parent, div#holder, which is relatively positioned
</p>
</div>
</div>
<input type="radio" name="tabs" value="3" id="check3">
<div class="content-holder">
<label for="check3">three</label>
<div class="tab-content">
<p>
And maybe I want a picture of a nice cat in my third tab!
</p>
<img src="http://i.stack.imgur.com/Bgaea.jpg">
</div>
</div>
</div>
The tabs I styled are really rather basic. If you want them to "wrap" into the content, you can do that with a little extra CSS legwork.

List number alignment using CSS3

I'm trying to create the following effect using CSS3 (targeting Chrome only). Essentially I want a numbered <ol> element which contains one radio button and one label. The aim is to get the list number, the radio & the label to all align in the center:
This is my markup:
<ol>
<li>
<div class="wrapper">
<div class="left">
<input type="radio" />
</div>
<div class="right">
<label>Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines</label>
</div>
</div>
</li>
</ol>
And the CSS I have so far:
.wrapper {
display: flex
}
.left {
width: 50px;
position: relative;
}
.right {
flex: 1;
}
input {
width: 16px;
height: 16px;
position: absolute;
top: 50%;
margin-top: -8px;
}
And a jsFiddle of the above.
I've tried using floats (which breaks the <ol> numbering), I've tried using wrapping divs and different display types (table/table-cell) and I've landed at my closest effort yet by using flex.
The problem is I still can't get the list number to line up with the radio buttons. It always aligns to the top of the <li> (along with some random whitespace which I can't figure out).
I'm open to using anything to create the desired effect shown in the image. Even Javascript/jQuery. But only if a pure CSS option is not possible.

Do you really need all those div's inside your li? if not, it's all a matter of vertical-align and setting the width of the elements inside.
You could rewrite your html to:
<ol>
<li>
<input type="radio" />
<label>Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines. Some really long text here that overlaps a few lines</label>
</li>
</ol>
and css to:
li input {
vertical-align: text-bottom;
display:inline-block;
width:5%;
}
li label {
vertical-align: middle;
display:inline-block;
width:90%;
}
Here is a demo fiddle

You can recreate the numbers as stylable elements and then align them wherever you want
ol {
counter-reset:li;
margin-left:0;
padding-left:0;
}
ol > li {
position:relative;
margin:0 0 6px 2em;
padding:4px 8px;
list-style:none;
}
ol > li:before {
content:counter(li);
counter-increment:li;
position: absolute;
top: 50%;
left : -2em;
width:2em;
height: 4em;
margin: -14px 8px 0 0; /* same as font-size */
padding: 4px;
text-align:center;
}
FIDDLE
This would work regardless of the content inside the LI's

Menu, under search bar on nav-bar in Bootstrap...not compatible

I am trying to create a search bar with results that appear right under the bar, but I am faced with a number of problems while trying to implement this. I am new in web programming, which is why I prefer to use bootstrap because of its compatibility on different screen sizes. In this case, I don't know which method to use and I simply created "div" under the bar, but I am not sure if it is the correct way. Would be happy if you gave me suggestion.
Below I included the code with css that I used.
I gave hard-coded value for the width as 174px, while I need something that automatically
identifies the width of search bar and sets that value as maximum.
ID="searchResults" is the string that I get in real time using jQuery and Ajax.
Would be happy if you give me advice about the way how to implement this.
<div class="navbar-form navbar-left">
<input class="form-control" placeholder="Search..." type="text"
autocomplete = off id = "autocomplete_search">
<div id="searchResults"
style="position: absolute;
width: 174px;
background: white;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-height: 200px;
overflow-y: auto;
margin-top: -3px;"> </div>
</div>

your attemp is ok. .navbar-form navbar-left needs to be position: relative;.
If you do that, you can use this element to position and size the absolute container of #searchResults.
Your HTML is not valid, here is a more clean version:
<div class="navbar-form navbar-left">
<input class="form-control" placeholder="Search..." type="text" autocomplete="off" id="autocomplete_search" />
<div id="searchResults">So much results...</div>
</div>
Here is some CSS to put the html in shape:
.navbar-form
{
position: relative;
/* just a little demo */
margin-left:200px;
}
.form-control
{
width: 100%;
}
#searchResults
{
position: absolute;
width: auto;
background: white;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-height: 200px;
overflow-y: auto;
border: 1px solid gray;
/*This is relative to the navbar now*/
left: 0;
right: 0;
top: 20px;
}
And here is a little demo: http://jsfiddle.net/NicoO/ZAyN9/

Upside down tab like tabzilla from the Mozilla.com website

Mozilla.com has this tab on the top of their site that you can click and a menu drops down. I have a client who wants me to do the same thing but upside down, from the bottom half of the page. Apparently this is a really hard request. How do I make something like tabzilla that goes up and either overlaps or pushes the content away? Thanks!
Update: I love you guys.
Edit: http://hemakessites.com/mayukh/4/ Why does the top "Sign In/Register" pop down and the "Toggle" on the bottom pops up? I'm not seeing the difference besides 'top' and 'bottom' in the css. How does that change the direction of the popup?
Also, clicking the '337-9147' will expand the menu. I only want the button region to be clickable. How can I accomplish this?
You guys are awesome and I'm going to return the favor by answering some questions on here when I get time.

I took a similar approach as others, in that you set a div to have a fixed, or absolute position at the bottom of the screen (depending on whether the tab should always be visible, or only at the very bottom). Then, you can write some very simple javascript to vary the height of the element, and as the bottom is fixed, it will cause the tab to rise into the screen.
Essentially all you need is
.container{
position: absolute;
bottom: -1px;
}
And
$('.container').toggle(function(){
$(this).animate({height:'205px'}, 500)
},function(){
$(this).animate({height:'20px'}, 200)
});
Here's a jsfiddle demo.

Here's a jQuery solution, which is smoother than css3:
So, you'll want to do something like this jsfiddle (NOTE: This requires jQuery):
http://jsfiddle.net/cFkn2/
$(document).ready(function() {
$('#tab').click(function() {
if ($('#tab').css('height') == '20px') {
$('#tab').animate({
height: '100px'
}, 1000);
}
else {
$('#tab').animate({
height: '20px'
}, 1000);
};
});
});
and
#tab{
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
height:20px;
}
and
<div id="tab">CONTENT</div>
Style, edit, and add easing to taste.

I was lazy to make here click handler, so it is css3 only hover sample
I used fixed position with {top: 100%}, transition for animation, margin <0 to show;
HTML
<div id="menu">
<div id="handler">handler</div>
<div id="menucontent">
menu menu<br>
menu menu<br>
</div>
</div>
<div id="content">
<div> text text text</div>
<div> text text text</div>
<!-- many of them -->
<div> text text text</div>
<div> text text text</div>
<div> text text text</div>
</div>
CSS:
#content > div {
font-size: 2em;
height: 2.1em;
border: 1px solid black;
margin-top: 10px;
}
#menu {
left: 30px;
position: fixed;
font-size: 20px;
width: 300px;
height: 300px;
top: 100%;
border: 1px solid red;
background: white;
-webkit-transition: all 1s;
-mozilla-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu #handler {
position: absolute;
top: -40px;
background: green;
font-size: 30px;
height: 40px;
padding-left: 5px;
padding-right: 5px;
left: 10px;
}
#menu:hover {
margin-top: -300px;
}
with click, or
JS:
$(function() {
$('#menu #handler').click(function() {
$('#menu').toggleClass('shown');
});
});
in css change hover to class shown
#menu.shown {
margin-top: -300px;
}