I use Twitter Bootstrap's input-prepend class with <textarea>. When I set <textarea>'s number of rows = 1, all looks fine. But when I set it to any bigger value, element becomes larger than input-prepend span.
This is the demonstration: http://jsfiddle.net/2smRF/
How to set the span's height to <textarea>'s height? Can it be achieved using only CSS or I need to use JavaScript?
I don't think this would be easily achieved only with CSS, so I threw together a script for you. Please note that it will not work if the user resizes the textarea.
var onRes = function(){
$('.input-prepend').each(function(){
var $textarea = $(this).find('textarea');
var $span = $(this).find('span.add-on:eq(0)');
console.log($span);
$span.height($textarea.outerHeight()-(parseInt($span.css('padding-top'))+parseInt($span.css('padding-bottom'))+parseInt($span.css('margin-top'))+parseInt($span.css('margin-bottom'))+(parseInt($span.css('border-width'))*2)));
});
};
$(window).resize(onRes);
onRes();
JSFIDDLE
Related
I am testing out the documentation here. The only difference is my searchBox is responsive and has 100% width.
<div id='searchBoxContainer'>
<input type='text' id='searchBox' style="width:100%"/>
</div>
On mobile the searchBoxContainer does not honor the width of the searchBox. The red overhang below expands my mobile app and doesn't feel good.
I have determined I can fix this by setting the as_container max-width equal to the width of the searchBox as it changes.
#as_container {
max-width: width of search box;
}
Is there a way to set the #as_container max-width dynamically as the searchBox width changes? I've fixed this with $(window).resize and a little javascript but I feel like there is CSS to handle this?
Here is what I came up with. It's really simple I would just prefer a CSS solution. In my case the searchBox is responsive to it's container, style="width:100%". On resize I match bings drop down container's max-width to the searchBox. The container's width can be set with #as_container.
// Our responsive fix for the autosuggest is to limit it's max width to the dropdown container. (Assuming our searchBox is responsive, we'll match widths)
function FixAutoSuggest() {
try {
var css = document.getElementById("autoSuggestFix");
// Create a CSS element for our fix if it hasn't been created already.
if (!css) {
css = document.createElement("style");
css.setAttribute("id", "autoSuggestFix");
css.type = "text/css";
document.body.appendChild(css);
}
// Set the appropriate width for our auto suggest container.
var searchBox = document.getElementById('searchBox')
if (searchBox != null) {
var bb = searchBox.getBoundingClientRect(), columnWidth = bb.right - bb.left;
// We set column width minimum to 150.
columnWidth = ((columnWidth > 150) ? columnWidth : 150);
css.innerHTML = "#as_container { max-width: " + columnWidth + "px }";
}
}
catch (err) {
alert('FixAutoSuggest' + err);
}
}
$(window).resize(function () {
FixAutoSuggest();
});
In my case the search box is not shown initially and I call FixAutoSuggest() when showing it. If you show it on load you could always fix then as well.
$(document).ready(function () {
FixAutoSuggest();
});
You'll notice in FixAutoSuggest() I put a minimum width of 150px on the bing drop down. That's just personal preference and you can remove that line if you want it to shrink to nothing. Hope this helps someone!
I'm noot good in english, so the title may seem a bit odd.
I want to use css function attr() like this:
I mean i have a container <div> and an inner <div> that i want to have width depending on data-width attribute. For example this would be great, but this doesnt work:
<div class="container">
<div data-width="70%">
</div
</div>
.container {
width: 600px;
height: 200px;
}
.container div {
width: attr(data-width);
height: 100%;
}
Is there any noJS way to use attributes like that?
UPDATE: Guys convinced me that the JS is the only way to do this :)
That's not a big problem (but that's bad. CSS, why youre so illogical? Is the difference between content:attr(data-width) and width: attr(data-width) so big ?).
One of the guys had an idea to go through the all elements with jQuery.
That's ok, but it is very... local? Don't know how to say it in english.
Anyway, i remaked his code a little bit and here it is:
allowed = ['width','color','float'];
$(document).ready(function () {
$('div').each(function (i, el) {
var data = $(el).data(),style = '';
if (!$.isEmptyObject(data)) {
$.each(data, function (attr, value) {
if (allowed.indexOf(attr) != - 1) {
style += attr + ': ' + value + '; ';
}
})
if (style.length != 0) {
$(el).attr('style', style);
}
}
})
})
Idea is simple:
1. We suppose that style we want to add to an element is the only one. I mean there are no scripts that will try to add some other styles,
2. We create an array of allowed attribute names, we need to avoid using wrong names at the style attribute, for example style="answerid: 30671428;",
3. We go through each element, save its data attributes in an object, check if object is empty, and if not - check every attribute if it is allowed, create a string that contains all styles that we need, and - finally - add our style string to the element as the content of style attribute.
That's all, thanks everybody
I would not advise to use CSS alone since it will not allow you to do what you're looking for... instead use a scripting language (in my case jQuery) to accomplish this functionality for you like so: jsFiddle
jQuery
jQuery(document).ready(function(){
var dataElem; // to store each data attribute we come accross
jQuery('div').each(function(){ //loop through each div (can be changed to a class preferably)
dataElem = jQuery(this); //get the current div
if(dataElem.data('width')){ //make sure it exists before anything further
dataElem.width(dataElem.data('width')); //set the element's width to the data attribute's value
dataElem.css("background-color", "yellow");
}
});
});
HTML
<p>The links with a data-width attribute gets a yellow background:</p>
<div>
w3schools.com
</div>
<div class="me" data-width="50"> <!-- change value to see the difference -->
disney.com
</div>
<div>
wikipedia.org
</div>
Notes on the above:
each, data, width.
Instead of doing data-width, use a class attribute. An html tag can have mutliple classes separated by spaces, so if you wanted to be very precise, you could set up as many classes as you need. For instance:
<div class="w70 h100">
</div>
Then in your css:
.w70{
width: 70%;
}
.h100{
height: 100%;
}
And so on.
Is there any noJS way to use attributes like that?
No, you cannot use CSS to set the width of the element to it's data-width attribute. CSS does not allow for this as attr() is only currently available for the CSS content property which is only available on css pseudo elements (::before and ::after).
How can you achieve this with as little javascript as possible?
This is extremely easy to do using the native host provided DOM API.
Select the elements using Document.querySelectorAll().
Iterate the elements and apply the styles using Element.style which can be retrieved from the data-width attribute using Element.dataset
(Demo)
var items = document.querySelectorAll('#container div'), item, i;
for(i = 0; (item = items[i]); i++) item.style.width = item.dataset.width;
I can't seem to figure out why my search button jumps to the second line. As far as I can tell, I only have it set to be one line (45px) thick and it is ignoring that. Help please?
http://www.bootply.com/EwP07rHc52
Forgot to add the script i'm using to actively change the button appearance.
$(document).ready(function(){
// select element styling
$('select.select').each(function(){
var title = $(this).attr('title');
if( $('option:selected', this).val() != '' ) title = $('option:selected',this).text();
$(this)
.css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
.after('<span class="select">' + title + '</span>')
.change(function(){
val = $('option:selected',this).val();
$(this).next().text(val);
})
});
});
You have whitespace in your code and your input element is set to display as inline-block and not floated properly. That's what's causing that extra space that doesn't show up in Dev Tools.
If you change float: center to float: left on that .summonerSearch element, it will be fine.
See it here: http://www.bootply.com/ZIsn1phtco
I have a select menu that acts as a navigation to different absolutely positioned divs. whichever option is shown, that div fades into view via the added class having opacity equal to 1. I can get the divs to add the class based on the menu, but I can't seem to remove that 'active' class if the option is not selected- my JS is as follows:
$("#hine").change(function() {
var who=$('#hine option:not(:selected)').val();
var whon=$('#hine option:selected').val();
$(who).removeClass('active');
$(whon).addClass('active');
});
I have a jsfiddle setup here: http://jsfiddle.net/nwT9c/4/
Try this:
var whon = $('#hine option:selected').val();
$('.active').removeClass('active').addClass('inactive');
$(whon).removeClass('inactive').addClass('active');
jsFiddle
You are assigning the value of the not selected elements to the who variable.
Change to :
var who=$('#hine option:not(:selected)');
var whon=$('#hine option:selected');
and you should be good
I copied a div col2 from index.html to my current div colabout2 first. Then, I want to change the height of the div colabout2 according to the div colabout1 in the same page. However, the following code doesn't work:
'<div id="colabout2">
<script type="text/javascript">
$('#colabout2').load('index.html #col2');
</script>
</div>
<script>
var h = $('#colabout1').height();
$('#colabout2').height(h);
</script>'
Please help. Thx.
Try this:
$('#colabout2').css("height", $('#colabout1').height());
Explanation:
Use the .css() function to configure and objects CSS then get colabout1's height and set it as the second parameter of the .css() function and set "height" as the first.
Use .css for changing style of the element. For example $('#colabout').css('height',h);