I have html <textarea></textarea> and css:
textarea {
width: 100%;
max-height: 80px;
resize: none;
}
If there is a lot of text, I want the textarea to increase it's height till 80px and then show a scrollbar. The problem is that textarea is 25px(I don't know why, may be my browser set this property) and when there is a lot of text, it shows a scrollbar after 25px. Is there anyway to show a scrollbar only after 80px?
You really need js to do this, see example below:
var textarea = document.getElementById("textarea");
var limit = 80; //height limit
textarea.oninput = function() {
textarea.style.height = "";
textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";
};
textarea {
width: 100%;
}
<textarea id="textarea"></textarea>
Related
Is possible to get "10vw" for the element width in browser or extension.Chrome "Copy Styles" just works fine.But I wanna do it in an extension.
Source code for chrome devtools
<style>
div { width: 10em }
body div { width: 10em }
#id { width: 10vw }
</style>
<div id="dom"></div>
// if viewport width is 375px
var dom = document.getElementById('app');
var style = window.getComputedStyle(dom);
var width = style.getPropertyValue('width');
console.log(width) // 37.5px, "10vw" would be great
var element = document.getElementById('dom')
var elementWidth = getComputedStyle(element ).width
this will always return width with pixels.
hope this will be helpfull
based on this thread
I am trying to use images in the HTML from the above link. Fiddle is here
body {
margin: 0;
padding: 0;
}
.main {
background: yellow;
overflow: hidden;
width: 100%;
}
.columns {
background: red;
-webkit-column-fill: auto;
-webkit-column-width: 300px;
-webkit-column-gap: 40px;
-moz-column-fill: auto;
-moz-column-width: 300px;
-moz-column-gap: 40px;
height: 120px;
padding: 0 20px;
width: auto;
overflow-x: auto;
}
.columns img{
height:none;
display: block;
}
.columns > p:last-of-type {
margin-right: 20px;
}
Horizontal scrolling works great, but the image gets divided into columns as well. I didn't know that this is even possible. I like it to stay in one part with the height of the column and auto width not with the column width. So that the columns coming after it gets shifted.
I think I find a possible way to realize what I wanted.
Now it uses a bit JS and Jquery. Here is the fiddle.
Main point is to check page.offsetHeight < page.scrollHeight to see if the textfield has overflow. When it has create a new div.
Here is the JS:
$( document ).ready(function() {
$( ".element2" ).each(function( i,obj ) {
if(this.tagName == "IMG"){
$("#paginatedText").append(obj);
}else{
paginateText(obj);
}
console.log(this.tagName);
});
function paginateText(element) {
//console.log(element);
var text = $(element).html(); // gets the text, which should be displayed later on
//console.log(text);
var textArray = text.split(" "); // makes the text to an array of words
createPage(); // creates the first page
for (var i = 0; i < textArray.length; i++) { // loops through all the words
//$( ".element" ).last().append(textArray[i]);
var success = appendToLastPage(textArray[i]); // tries to fill the word in the last page
if (!success) { // checks if word could not be filled in last page
createPage(); // create new empty page
appendToLastPage(textArray[i]); // fill the word in the new last element
}
}
}
function createPage() {
var page = document.createElement("div"); // creates new html element
page.setAttribute("class", "page"); // appends the class "page" to the element
document.getElementById("paginatedText").appendChild(page); // appends the element to the container for all the pages
}
function appendToLastPage(word) {
var page = document.getElementsByClassName("page")[document.getElementsByClassName("page").length - 1]; // gets the last page
var pageText = page.innerHTML; // gets the text from the last page
page.innerHTML += word + " "; // saves the text of the last page
if (page.offsetHeight < page.scrollHeight) { // checks if the page overflows (more words than space)
page.innerHTML = pageText; //resets the page-text
return false; // returns false because page is full
} else {
return true; // returns true because word was successfully filled in the page
}
}
});
This question already has answers here:
Adjust a div's height/width by dragging its left/top border without jQuery draggable?
(2 answers)
Closed 7 years ago.
Is it possible to make <select>'s height adjustable by the user? Simply by dragging the bottom of the expanded list.
Cross browser, you can't drag native drop-down boxes, but here is one suggestion how one can do.
Edit: But when the size property is set (size="2") you can, kind of. By elaborating with the option height and the amount of item, you might achieve something useful.
The select has a invisible area outside its bottom which make it resizeable. You can also click inside the select and resize, though the list drops down every second time.
Resources:
Adjust a div's height/width by dragging its left/top border without jQuery draggable?
jQuery draggable option elements
$(document).ready(function(){
$('#drag').on('mousedown', function(e){
var $dragable = $(this),
start = $dragable.height(),
pY = e.pageY;
$(document).on('mouseup', function(e){
$(document).off('mouseup').off('mousemove');
});
$(document).on('mousemove', function(me){
var my = (me.pageY - pY);
$dragable.css({
height: start + my,
});
});
});
$('#drag2').on('mousedown', function(e){
var $dragable = $(this),
start = $dragable.height(),
pY = e.pageY;
$(document).on('mouseup', function(e){
$(document).off('mouseup').off('mousemove');
});
$(document).on('mousemove', function(me){
var my = (me.pageY - pY);
$dragable.css({
height: start + my,
});
});
});
});
body {
margin: 30px;
}
div{
position: relative;
display: inline-block;
cursor: row-resize;
height: 30px;
padding-bottom: 10px;
}
select{
position: relative;
height: 100%;
vertical-align: top;
}
option {
padding: 5px 15px;
height: 25%; /* sizable when size property is set to more than 1 */
}
#drag2 {
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div id="drag">
<select>
<option>nr1</option>
<option>nr2</option>
<option>nr3</option>
<option>nr4</option>
</select>
</div>
<div id="drag2">
<select size="2">
<option>nr1</option>
<option>nr2</option>
<option>nr3</option>
<option>nr4</option>
</select>
</div>
</div>
Many textarea resizer js pluggins should work with select too...
Longshot... I don't think this is possible but I've been shocked before!
I anchor tags, all of which have background images, all 300px wide but their heights all vary. Is there anyway to set these without actually having to type out the height? Sort of setting it to the bg url's dimensions?
Thanks!
I don't think people understand - My fault for rushing the question.
Here's code as an example:
#ex-1 {width: 300px; height: 410px; background: url('/image-1.jpg');}
#ex-2 {width: 300px; height: 420px; background: url('/image-2.jpg');}
#ex-3 {width: 300px; height: 430px; background: url('/image-3.jpg');}
#ex-4 {width: 300px; height: 440px; background: url('/image-3.jpg');}
I'd like to NOT set the height, and it set automatically using CSS only. I don't want to use image tags.
I wasn't sure if this was possible, I assume not.
Thanks
A simple way of doing this is to add an image like this and then make it hidden i used visibility:hidden http://jsfiddle.net/gztpsfkw/1/
i just saw that you don't want to use <img> tags but as for here the image is being hidden and it takes up the space.
<img src="http://placekitten.com/300/301" />aa
And apply the css
a{
display:block;
background-image:url('http://placekitten.com/300/301');
width:100px;
height:auto;
}
img{
visibility:hidden;
}
We can use a visibility: hidden way:
<img src="http://lorempixel.com/100/200/" />
CSS
a {background: url("http://lorempixel.com/100/200/") center center no-repeat; width: 100px;}
a img {visibility: hidden;}
Fiddle: http://jsfiddle.net/praveenscience/vhjxfgtw/
JavaScript Solution
Procedure
To set the height, dynamically, you need to use JavaScript. So, you can get the computed value by adding a <img /> tag and computing the value by setting the src. The pseudo code would have been like this:
Get the computed value of background-image.
Attach it to a new <img /> element in the DOM.
Get the height of the new <img /> element.
Set the height of the fake background <div>.
JavaScript
$(document).ready(function () {
bg = $(".bg").css("background-image");
$("body").append('<img id="faux" src="' + bg.substring(4, bg.length-1) + '" />');
height = $("#faux").outerHeight();
$("#faux").remove();
$(".bg").height(height);
});
Fiddle: http://jsfiddle.net/praveenscience/rcL3xj0x/
If you don't want to use inline CSS, you can use this:
$("style").append('.bg {height: ' + height + 'px}');
If you're looking for a way to make the background images fill all the space available then use background-size: cover
I think you're looking for something like this:
function setBackgroundImage(element, src) {
var img = new Image();
img.onload = function() {
element.style.height = img.height+'px';
element.style.backgroundImage = 'url('+img.src+')';
}
img.src = src;
}
Or, if you need to scale the images for the width:
function setImage(element, src) {
var img = new Image();
img.onload = function() {
var sizeRatio = element.offsetWidth / img.width;
element.style.height = (sizeRatio * img.height)+'px';
element.style.backgroundImage = 'url('+img.src+')';
element.style.backgroundSize = 'cover';
}
img.src = src;
}
Side Note: The <a> tag is not a block level element. In order for the <a> to have a height and a width you need to make it a block level element to show the background image.
You would use: display: block
Now for your question... In order to get the background image, with out having to manual type it in you can use a little jQUery to make your life a lot easier. I have modified your CSS and HTML a little bit to accomodate the jQuery.
CodePen Example
#links { overflow: hidden; }
#links a { display: block; float: left; width: 300px; height: 200px;
/* generic height set in case there is no background image */ }
#ex-1 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-2 { background: url('http://www.bing.com/s/a/hpc12.png');}
#ex-3 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-4 { background: url('http://www.bing.com/s/a/hpc12.png');}
<div id="links">
</div>
Here is the jquery. It will loop through all your images and set the height according to your background image
$(document).ready(function(){
$('#links a').each(function(){
var temp = $(this).css('background-image');
temp = temp.replace('url("', '').replace('")', '');
var newImg = new Image();
newImg.src = temp;
imageHeight = newImg.height;
imageWidth = newImg.width;
$(this).css('height', imageHeight);
});
});
Is there any way to set a fixed/custom height for ligtbox2?
#lightbox img{ width: auto; height: 600px;}
This only resizes the img and not the outer container.
With that declaration you are styling the img within #lightbox
Try removing the img so that you are only styling #lightbox
does this work?
#lightbox { width: auto; height: 600px;}
If you go through the HTML it creates you can see that it's wrapped in a div with id="lightbox" and within that a div with id="outerImageContainer". The latter has a style attribute with the height of the image. Try targeting that. Either overwriting it in your CSS or changing the height after it's loaded.
<html>
<head>
<style type="text/css">
#lightbox { border : solid 2px #000000; position:absolute; }
#lightbox img { width:auto; height: 600px;}
</style>
</head>
<body>
<div id="lightbox">
<img src="Desert.jpg" alt="desert" />
</div>
</body>
</html>
None of these solutions worked, but thanks for your help guys. I had to get my hands dirty in the js... here's my hacked code:
lightbox.js
...
// once image is preloaded, resize image container
imgPreloader.onload = (function(){
var scale = 600 / imgPreloader.height; //modified
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer((imgPreloader.width * scale), //modified imgPreloader.height);
}).bind(this);
imgPreloader.src = this.imageArray[this.activeImage][0];
},
//
// resizeImageContainer()
//
resizeImageContainer: function(imgWidth, imgHeight) {
// get current width and height
var widthCurrent = this.outerImageContainer.getWidth();
var heightCurrent = this.outerImageContainer.getHeight();
// get new width and height
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
var heightNew = (600 + LightboxOptions.borderSize * 2); //modified
...