Especially at low screen resolution, the screen can have an horizontal scrollbar. I want to expand div length to end of the scrollbar. So, width of div may bigger than 100%.
#content{border:2px solid red}
<body>
<div id="content">Test</div>
<div id="wrap">
NoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapText
</div>
</body>
I want to expand the content width to screen width.
How can I do this?
Thanks
#content{border:2px solid red}
body {
display:table;
}
<body>
<div id="content">Test</div>
<div id="wrap">
NoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapTextNoWrapText
</div>
</body>
Check it out the answer : do u want this?
https://jsfiddle.net/sesn/mh9juu1w/
I have added the function to calculate the text width
Here
$(function(){
$.fn.textWidth = function () {
$body = $('body');
$this = $(this);
$text = $this.text();
if($text=='') $text = $this.val();
var calc = '<div style="clear:both;display:block;visibility:hidden;"><span style="width;inherit;margin:0;font-family:' + $this.css('font-family') + ';font-size:' + $this.css('font-size') + ';font-weight:' + $this.css('font-weight') + '">' + $text + '</span></div>';
$body.append(calc);
var width = $('body').find('span:last').width();
$body.find('span:last').parent().remove();
return width;
};
wrapWidth = $('#wrap').textWidth();
$('#content').width(wrapWidth);
});
write the css for the #wrap div and set width 100%;
example
div#wrap {
width: 100%;
display: inline-block;
word-break: break-all;
}
Related
We have this picture
What I want to try to do is on refresh or on load, the picture highlights a 200x200 square, and removes the rest of the picture like this:
What is the simplest way to do this without javascript if possible?
Here is an example of how you can do this using CSS and javascript. This will work for any height or width window as it gathers the values from the element.
I've commented the javascript but let me know if you wanted something else.
Demo
// Load image element
image = document.getElementById("random-window-image");
// Get the height and width of the window
window_width = document.getElementById("random-window-wrapper").offsetWidth;
window_height = document.getElementById("random-window-wrapper").offsetHeight;
// Calculate a random left value
temp_left = (image.width - window_width) * Math.random();
// Calculate a random top value
temp_top = (image.height - window_height) * Math.random();
// Apply values to the img
image.style.left = "-" + temp_left + "px";
image.style.top = "-" + temp_top + "px";
#random-window-wrapper {
width: 200px;
height: 200px;
overflow: hidden;
position: absolute;
}
#random-window-image {
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="random-window-wrapper">
<img id="random-window-image" src="https://placeimg.com/640/480/any">
</div>
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
clip: rect(10px,90px,100px,0px);
}
</style>
</head>
<body>
<img src="https://i.stack.imgur.com/kt5HP.jpg" width="200" height="200">
</body>
</html>
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);
});
});
Consider the following markup and styles:
<div>
Some text Some text Some text
</div>
div{
width: 100px;
}
How can I do that the text-content of div have a font-size's property value such that there is maximum font-size value in which text-content of div lie on one line entirely? jsFiddle
Try this:
HTML:
<div id="container">
<span id="text_container">whatever text you want</span>
</div>
CSS:
#container {
background:cyan;
width:200px;
}
#text_container {
white-space:nowrap;
}
JS:
var container = $("#container"),
text_container = $("#text_container"),
start_size = 100,
container_width = container.width();
text_container.css('font-size', start_size + 'px');
while (text_container.width() > container_width) {
text_container.css('font-size', start_size--+'px');
}
DEMO
Do this instead:
div{
min-width: 200px;
}
By setting a minimum width you ensure that the div never gets small enough to collapse the text to multiple lines.
Demo: http://jsfiddle.net/96daR/4/
Give a id to the div, say id="myDiv"
Get height using one of this
javascript:
var myDiv = document.getElementById("myDiv");
h=myDiv.clientHeight;
h=myDiv.scrollHeight;
h=myDiv.offsetHeight;
or in jquery:
h=$("#myDiv").height();
h=$("#myDiv").innerHeight();
h=$("#myDiv").outerHeight();
Next set the font-size using this:
document.getElementById("myDiv").style.font-size=h+"px";
I'm trying to repeat-y an image that's in a div and no background image but haven't figured how. Could you please point me to a solution?
My code looks like this:
<div id="rightflower">
<img src="/image/layout/lotus-dreapta.png" style="repeat-y; width: 200px;"/>
</div>
You have use repeat-y as style="background-repeat:repeat-y;width: 200px;" instead of style="repeat-y".
Try this inside the image tag or you can use the below css for the div
.div_backgrndimg
{
background-repeat: repeat-y;
background-image: url("/image/layout/lotus-dreapta.png");
width:200px;
}
Not with CSS you can't. You need to use JS. A quick example copying the img to the background:
var $el = document.getElementById( 'rightflower' )
, $img = $el.getElementsByTagName( 'img' )[0]
, src = $img.src
$el.innerHTML = "";
$el.style.background = "url( " + src + " ) repeat-y;"
Or you can actually repeat the image, but how many times?
var $el = document.getElementById( 'rightflower' )
, str = ""
, imgHTML = $el.innerHTML
, i, i2;
for( i=0,i2=10; i<i2; i++ ){
str += imgHTML;
}
$el.innerHTML = str;
(DEMO)
Codes:
.backimage {
width:99%;
height:98%;
position:absolute;
background:transparent url("http://upload.wikimedia.org/wikipedia/commons/4/41/Brickwall_texture.jpg")
repeat scroll 0% 0%;
}
and
<div>
<div class="backimage"></div>
YOUR OTHER CONTENTTT
</div>
It would probably be easier to just fake it by using a div. Just make sure you set the height if its empty so that it can actually appear. Say for instance you want it to be 50px tall set the div height to 50px.
<div id="rightflower">
<div id="divImg"></div>
</div>
And in your style sheet just add the background and its properties, height and width, and what ever positioning you had in mind.
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
...