How to get the text field with auto extend based on the browser width (with pure css). For example if I scale the browser to minimum width also the text field should not jump to the second line.
I need exactly like how it is shown in this image
Not 100% sure it's the desired effect but for some browsers this might be what you're looking for:
html:
<p>
<label>Test</label>
<span><input></span>
</p>
And css:
label{width:200px;float:left;}
span{display:block;width:100%;box-sizing:border-box;padding-left:200px;}
input{width:100%;box-sizing:border-box;}
Example: http://jsfiddle.net/48fNt/ (works in at least chrome)
Maybe you also still need to play around with white-space:nowrap and a min-width.
You can't do it alone with CSS. Use
jQuery AutoResize Plugin
$('#myTextBox').autoResize({
onResize : function() {
//Do something on resize
},
animateCallback : function() {
//Do something after resize
},
animateDuration : 300,//Duration
extraSpace : 40//Extra Space
});
As far as I can know, you cannot do it with only CSS for inputs, but you can emulate this behaviour using a div with contenteditable attribute - demo http://dabblet.com/gist/3150040
HTML
<div contenteditable></div>
CSS
div {
min-width: 150px;
width: auto;
border: solid 1px #ccc;
display: inline-block;
}
there are more than one ways you can achieve this position
http://jsfiddle.net/rHqE7/4/
<div id="wrap">
<div id="name">Name</div>
<input type="text" name="fname" id="text" />
</div>
#wrap{width:500px;overflow:auto;}
#name{float:left;width:100px;font-size:16pt;padding:10px 5px;}
#text{float:left;min-width:300px;max-height:20px;border:1px solid black;padding:3px;}
Related
I create the image button. The button should change on hover. I set the image with CSS, so there is no need to use src attribute in my code. Chrome, Safari works well, but Firefox 48 completely ignores sizes of the input. I tried both CSS and HTML way. Is it a bug? What is the correct way?
Fiddle:
https://jsfiddle.net/nyppzpqx/5/
Here is the view in firefox 48:
If you add display: block to the .btn-pay element, it works just fine. It may be something with custom browser styles.
Altough as Turnip said, it is better to avoid using img element without src attribute.
You can always restructure the way the html is written. This way you do not need the src attribute. The size is given to the outer div, and then the button is positioned on top of it with an image that spans the entire div:
<div class="btn-pay">
<input type="button" name="kind" value="test" class="btn-pay-input" >
</div>
and then update the styling:
.btn-pay {
width:135px;
height: 60px;
}
.btn-pay-input {
background: url(http://placehold.it/135x60);
color: transparent;
transition: all 0.3s;
width:100%;
height:100%;
text-align:center;
}
.btn-pay-input:hover {
background: url(http://placehold.it/135x60/fff000);
}
Here is the fiddle
A <span> knows what horizontal size to be without being told. It's horizontal size is no greater than its content.
I'm trying to figure out the CSS to make an <input type='text'> automatically size itself horizontally according to the length of its value, like a <span> would with its innerText.
In other words, without specifying a CSS width: or size attribute on the <input>.
I can't figure out how to do this. Any ideas?
If you want to expand or increase the width of input field as you type you could do something like this
<div>
<span contenteditable="true">sdfsd</span>
</div>
CSS
span{
border: solid 1px black;
}
div{
max-width: 200px;
}
JSFiddle Demo
Or You could accomplish this using some jQuery
<input size="1" />
jQuery
$('input').on('keydown', function(evt) {
var $this = $(this),
size = parseInt($this.attr('size'));
if ( evt.which === 8 ) {
// backspace
$this.attr('size', size - 1);
} else {
// all other keystrokes
$this.attr('size', size + 1);
}
});
JSFiddle Demo
If I understand your question correctly, you want the span and input to be the same width no matter what, correct?
If this is the case then this is the way I would go about it:
Wrap both the span and input with a div
then,
span, input {
display: inline-block;
width: 100%;
}
And set your wrapping div to whatever width you want and the two elements should be aligned (automatically, no matter what) and the same width.
Is it possible with CSS/HTML to resize some box to match exactly it's background image size? Without using javascript.
For instance let's say I have a simplest div:
<div class="image">TEST</div>
.image {
background-image: url(http://placehold.it/350x150);
width: 350px;
height: 150px;
}
And I would like to resize it to those 350x150 dimensions without hardcoding those values. Also I cannot put any content inside this div.
http://jsfiddle.net/5Dane/
EDIT: I see a lot of answers I already was aware of, thank you for them, but that's not the solution here unfortunately. Below I'm explaining why I need such functionality.
What I'm trying to do is a form with steps (buttons previous and next). In session I hold all the values the user has input but there are some buttons which will add more functionality for the user (like multiple dynamically added rows for data). I'm doing it with jQuery of course, but I want the form to be able to work when there is no java script enabled.
Now to the point - I was trying to find out how to tell the difference which button the user has clicked. The case is all my submit buttons need to be images and the simplest solution <input type="image"/> doesn't send info about the button clicked with POST data. That's why I came to this solution:
<input class="submit_img" type="submit" style="background-image:url(http://placehold.it/108x23); width:108px; height: 23px;" value=" " name="some" />
/* Submit button with image */
input.submit_img {
font-size: 1em;
border-radius: 0px;
box-shadow: rgba(0, 0, 0, 0.15) 0 1px 1px;
border: solid 0px #000000;
cursor: pointer;
}
http://jsfiddle.net/XRvqV/
This way my form will submit all the data AND I will know which button the user clicked. Also the button looks fine, like it should look. I was wondering though if it was possible to make it a little more portable - my buttons all have different widths for different functions. Can someone suggest another approach here?
No, you can't. CSS is not aware of the the image size. You can do it easily with JQuery.
JQuery exmaple
$(function(){
var bg = $("div.image").css('background-image');
bg = bg.replace('url(','').replace(')','');
var newImg = new Image();
newImg.src = bg;
$("div.image").css("width",newImg.width);
$("div.image").css("height",newImg.height);
});
This is a hack and doesn't use background-image (uses an img tag instead), but is the only way I can think of without using JS.
HTML
<div class="container">
<div class="image">
<img src="http://www.pandafix.com/pandafix/images/untitled_1.jpg"/>
</div>
<div class="content">
some text
<br/>
some more text
<br/><br/><br/><br/>
text text text
</div>
</div>
CSS
.container {
position: relative;
}
.content {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: red;
}
Basically, you allow an img tag to determine the height and width of a container. Then, overlay whatever content you want on top of the image (I'm assuming you want to put something on top).
jsFiddle
i would suggest you a alternative way to solve your problem. if you use bootstrap you can involve a div to make resizable image.
<div class="img-responsive">
<img src="test.jpg" width='xxx' height='yyy' alt='test'>
</div>
You can't do that using just HTML. But you can do this using HTML!
You should try this:
background-size: values;
This way, you will resize the background-image to the size of the container!
You can't do it directly.
The only solution it would be fetching the BG of the DIV element and attach new DOM img element to the DOM node, afterwards you could use the info of the image to add the proper with and height..
if you are willing to use jquery you can do this.
$(function(){
$('.image').each(function(index,element){
var _t = $(this);
_t.data("LinkedImg","LinkedImage"+index);
$('body').append(
$('<img />',{
id:"LinkedImage"+index,
src:_t.css('background-image')
}).hide());
});
$('document').on('load',function(){
$('.image').each(function(index,element){
var _t = $(this);
var _tmp_img = $('#'+ _t.data("LinkedImg"));
_t.css({
width:_tmp_img.width(),
height: _tmp_img.height()
});
});
});
})
I have some links, and each of these have a unique href.
lets say link one have href="#first".
and link two have href="#second".
What would then be the CSS to do something with a div? (with the ID box)
I have tried lots of things like:
#first:target #box{
something..
}
#second:target #box{
something else..
}
#linkOne:hover #box{ width:200px; }
This changes the size of #box by hovering #linkOne I want the same to happen with :target, like change the size of #box by clicking the link
If you want to select the currently targeted element, you can simply do :target
html
first link
second link
<div id="first">first div</div>
<div id="second">second div</div>
css
:target {
border: 1px solid red;
}
The div with the corresponding id of the link clicked will have a red border.
http://jsfiddle.net/wk3rR/2/
UPDATE
Judging by your comment, it appears you want to manipulate the same box with different current targets, which won't be straight-forward, but can be done if you nest the <div>s with the IDs and then your original css should work:
first link
second link
<div id="first">
<div id="second">
<div class="box">box</div>
</div>
</div>
css
#first:target .box {
border: 1px solid red;
}
#second:target .box {
border: 1px solid yellow;
}
http://jsfiddle.net/wk3rR/3/
If I am not wrong, you are looking for something like the below. This will set the height of the currently targeted element to 20px. Transition effect will also be applied.
HTML:
<a href='#first'>First</a>
<a href='#second'>Second</a>
<div id='first'>This is first div</div>
<div id='second'>This is second div</div>
CSS:
#first, #second {
height: 0px;
overflow: hidden;
transition: height 1s ease-in;
}
#first:target {
height: 20px;
}
#second:target {
height: 20px;
}
Demo Fiddle
EDIT: I know you haven't tagged jQuery/JavaScript and was looking for a CSS solution. But if you have many such links and are ok to have a JS based solution, you can try the below.
This script has a mapping between the id of the link that is clicked and the height that the box is supposed to have when the link is clicked. Based on it, the #box element's height is modified. Transitions will also work as can be seen in this fiddle.
window.onload = function () {
document.getElementsByTagName('body')[0].onclick = function(e){
var box = document.getElementById('box');
var heights = { first: '20px', second: '40px', third: '30px' };
if(e.target.id)
box.style.height = heights[e.target.id];
};
}
I think you need the use of javascript if you want manipulate DOM. You have to remember CSS is only for style the page, not for making actions with the elements.
I'm relatively new to Web dev. The question is generic, but I'll pose specific user-cases.
Use-case 1:
I have a div element on a web page. When the page loads the first time, this div runs a small 5 sec animation. What I wish to do is, when this animation ends, I want the same div to contain some other element - it could be an image, a link, another animation etc.
That is, one container - the div - hosting multiple elements on a time-scale. First 5 secs animation , followed by an image or a link.
What Javascript methods will allow me to do so?
Use-case 2:
Again, I have a div element in a page. Now this div element is like a tabbed browser - you click on a different tab to view a different web page. Similarly, I wish to make this a "tabbed" div. As in, when the user hovers the mouse on tab 1, the div would show a video, when hovered over tab 2, it would show another video in the same div - that is, replacing the old video. The tabs can be considered as a fancy looking link.
Or, in the first place, is there an alternative to 'div' to do the things mentioned above?
Thanks,
SMK.
Solution for use case 2 -
This is a slightly lengthy solution but its extremely flexible and can be scaled up to any number of tabs very easily
We will divide the solution into 3 parts - The CSS, HTML and JQuery.
Lets take a look at the CSS part first
<style>
#tab_holder {
width: 350px; !important
}
#tab_holder .tabs {
float: left;
height: 20px;
padding: 5px;
border: 1px solid #eee;
border-bottom: none;
width: 50px;
cursor: pointer;
border-radius: 5px 5px 0 0;
}
#tab_holder .tabs:hover {
background-color: #eee;
}
#tab_holder #content_holder {
width: 400px; !important
margin: 0 0 0 0;
border: 1px solid #000;
padding: 10px;
float: left;
border-radius: 0 5px 5px 5px;
}
.content {
visibility: hidden;
}
</style>
Let us now take a look at the HTML part of this solution
<div id="tab_holder">
<div id="tab1" class="tabs">Video1</div>
<div id="tab2" class="tabs">Video2</div>
<div id="tab3" class="tabs">Video3</div>
<div id="content_holder">
<div id="main_content">Select a tab to see the video..</div>
</div>
</div>
<!-- These are divs in which you put your actual content.
They are always hidden -->
<div id="content1" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/4Z6YUGGlwtA?rel=0" frameborder="0" allowfullscreen></iframe>
< /div>
<div id="content2" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/s13dLaTIHSg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="content3" class="content">
<iframe width="200" height="200" src="http://www.youtube.com/embed/I1qHVVbYG8Y?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
You can see that each tab is represented by a div which is using the "tabs" class from the CSS section. If you need to add a new tab, all you have to do is add a new div and give is a new id. For example to add a forth tab, you can say -
<div id="tab4" class="tabs">Video4</div>
It is as simple as that.
Now the thing I like about this approach is that you can place the content to be displayed also in div's, rather that nesting it under jquery. In this case we use the div's with the id content1 content2 content3
This gives you the flexibility to expand as you enter content into the div and use normal markup without getting confused and at ease.
These div's are not visible as we have set their visibility to hidden is CSS.
If you add a new tab div you must also add a new content div.
Now we move onto the JQuery part -
$(document).ready(function (){
/* Add the listeners. */
$("#tab1").mouseover(function (){
switch_content('content1')
});
$("#tab2").mouseover(function (){
switch_content('content2')
});
$("#tab3").mouseover(function (){
switch_content('content3')
});
});
function switch_content(name){
$("#main_content").fadeOut('fast',function (){
$("#main_content").html($("#"+name).html());
$("#main_content").fadeIn('fast');
});
}
The above JQuery function is extremely straight forward. Each tab is attached a action listener which is fired by a mousover event. So if you add another tab with the id=tab4 and its respective content div with the id=content4 then all you have to add in the jQuery is:
$("#tab4").mouseover(function (){
switch_content('content4')
});
So it becomes very easy to expand the code.
You can find a working demo of this on my website demo section
Tips -
Avoid using hover because it creates an annoying user experience due to accidental hovers and it is hard for mobile platforms to emulate this event. Most of them fall back to click. So I suggest use the click event instead.
If you must use, make use of the HTML video tag and pause the video using JS if the user hovers on another tab. This will render a better user experience.
Here is an example for use-case 1.
In your html you need to include the 5 second animation, i persume this is a gif? Although it can be any content. For the sake of this example i will show it as a div.
The html i have used:
<div id="example">
<div id="somecontent"> </div>
<div id="morecontent"> </div>
</div>
The CSS:
#example
{
width:500px;
height:500px;
background-color:#f00;
padding:10px;
}
#somecontent
{
width:200px;
height:200px;
background-color:#fff;
}
#morecontent
{
width:200px;
display:none;
height:200px;
background-color:#000;
}
and the javascript(using jQuery):
setTimeout(function() {
$("#somecontent").fadeOut("slow", function() {
$("#morecontent").fadeIn("slow");
});
}, 5000);
Have a look at this jsfiddle for it in action - http://jsfiddle.net/fntWZ/
For use case 2 it will be more complicated. Try having a look for some different plugins that could help with this
answer for use-case:1
css :
<style>
#myDiv {
height:0;
width:0;
position:absolute;
border:1px solid red;
}
</style>
script :
$(document).ready(function(){
$("#myDiv").animate({width:"100px", height:"100px"},5000, function(){
var image = new Image();
image.src = "dropdownContainerBottomMiddle.png"; //your image src goes here
$("#myDiv").append(image);
//you can append more content by using setTimeout function
setTimeout(function(){
var anc = "stackoverflow";
$("#myDiv").append(anc);
}, 1000);
});
});
html:
<div id="myDiv"></div>