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
Related
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.
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/
Relative newbie here. I have two different mouseover/hover functions I can get to work just fine: one, an inline mouseover that 'darkens' an image/box by making it lose opacity; and the second, text that appears over this image/box on hover (jumping up from a hidden position).
The problem is, I want to get them working together without this text losing opacity, which it does when part of the same div class as the image/box. But when I try two separate div classes and position them on top of each other (using z-index), whichever one I put on top seems to block the other one. Is there any way to have it so the image/box loses opacity, but the text that appears doesn't, all in the same mouseover/hover action?
These are the relevant bits in my stylesheet, mostly covering the text part:
.rightbox {
background: rgb(140, 183, 98);
width: 290px;
height: 160px;
margin-bottom: 18px;
padding: 2px;}
.rightboxtext {
display: table-cell;
height: 160px;
width: 290px;
vertical-align: bottom;
text-align: center;
font-weight: bold;
font-size: 20px;
color: #8CB762;
}
.rightboxtext span {
display: block;
height: 0px;
overflow: hidden;
}
.rightboxtext:hover span {
height: 80px;
}
This is the inline stuff that I used where everything, including text, gets the opacity treatment. (In this case the image is attached to the rightboxtext div class, but I also tried it attached to the rightbox div class.)
<div class="rightbox"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60">
<div class="rightboxtext"
style="background-image: url(image.jpg); height: 160px; width: 290px;">
<span>Hello text.</span></div>
</div>
Otherwise I achieved this mangled bit of code, where one seems to block the other:
<div class="rightboxcontainer">
<div class="rightboxtext"
style="position: absolute; z-index: 100; height: 160px; width: 290px;">
<span>Hello text.</span></div>
<div class="rightbox"
style="position: absolute; z-index: 50; height: 160px; width: 290px;"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60"><img
src="image.jpg">
</div>
</div>
With this extra bit in the stylesheet:
.rightboxcontainer { width: 290px; height: 160px; margin-bottom: 18px;}
Thanks in advance!
As a commenter pointed out above, you can do this entirely with CSS:
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 250px;
height: 250px;
overflow: hidden;
}
.box img {
width: 250px;
height: 250px;
}
.box .message {
background: rgba(0, 0, 0, 0.5);
opacity: 0;
width: 250px;
height: 250px;
position: relative;
top: -256px;
color: #fff;
font-size: 32px;
line-height: 250px;
text-align: center;
font-weight: bold;
font-family: arial;
}
.box .message:hover {
opacity: 1;
}
</style>
<div class="box">
<img src="http://www2.le.ac.uk/departments/geology/people/clark-n/personal/copy_of_images/Satellite-map-of-Antarctica/image">
<div class="message">Antarctica</div>
</div>
.message is positioned on top of the container, .box. When you hover over .message, it fades in from 0 opacity. Its background is semi-opaque (using RGBA, where the fourth value is the opacity), so it dims the image. You could make the image the background-image of the .box if you wanted to.
http://jsfiddle.net/dgGG3/4/
Fist of all, try to avoid inline event handling as you can achieve the desired result with css :hover.
The problem as you can see here http://jsfiddle.net/UjY5Q/ is with opacity on a parent element all child elements also get that opacity.
.rightbox:hover {
opacity:0.5;
}
You can cheat on that one by setting positions to the elements and overlap one to the other one. That's kind a tricky and may also need browser support.
so the easyest way to get what you want is on :hover show a transparent background image example here: http://jsfiddle.net/UjY5Q/1/
I would say that's the way to go
I have am using an image button instead of text for a submit button here and I have used text-indent -9999px to "hide" the text value. However, in IE7 that text is still showing over the button.
I tried making the text transparent but that didn't help.
Is there something I am missing here?
HTML:
<form action="news.php" method="post">
<fieldset>
<input type="text" id="your-email" name="your-email" value="YOUR EMAIL ADDRESS" onfocus="if (this.value=='YOUR EMAIL ADDRESS') this.value='';" />
<input type="submit" value="::Submit Query::" id="red-submit" />
</fieldset>
</form>
Here is the CSS:
input#red-submit {
width: 90px;
height: 30px;
border-style: none;
text-indent: -9999px;
position: relative;
top: 5px;
left: 10px;
cursor: pointer;
background-color: transparent;
background-image: url(../_images/btn_submit-red.png);
}
I would appreciate some help getting that text to move out of the way.
Thanks.
Since IE is stupid and whatnot, it wouldn't surprise me if text-indent only affects actual text nodes, and the button's value would seem not to be a text node.
You could try using the <button> tag instead, to see if that got you better results, but no promises.
EDIT: Here's an article that deals with the same issue, and offers a solution.
input.button{
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
/* The fix:*/
font-size: 0;
display:block;
line-height: 0;
}
I want to replace input="file" button to only text like that http://valums.com/wp-content/uploads/ajax-upload/demo-jquery.htm but i don't want to use whole library. How can i do this ?
It is actually input type="file" control. They have used a wrapper div to show it. You can style a div as the Upload button text using an image. Then place an input type="file" control on top of it and make its opacity to 0. Thats all
Eg:
<style>
.invis
{
margin: -5px 0pt 0pt -175px; padding: 0pt; position: absolute; width: 30px; height: 30px; font-size: 14px; cursor:
pointer;opacity: 0; display: block; z-index: 2147483583; top: 2px; left: 180px;filter:alpha(opacity=0);
}
</style>
<div>test</div>
<input type="file" name="myfile" class="invis" />
I haven't used any image. You can use an image to style the wrapper div.