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
...
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";
Needing a solution to autoresize text in a fixed sized container. A single word should appear really large filling the container. The longer the string the smaller the font becomes as it resizes to fit on one line.
The code I've found (see below) is almost there but for some reason wraps the text onto a second line. Any suggestions on how I could fix it so no matter how long the string of text it will resize and always be just a single line of text?
Thanks
<html>
<head>
<style type="text/css">
#dynamicDiv
{
background: #CCCCCC;
width: 240px;
height: 64px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textSpan = document.getElementById("dynamicSpan");
var textDiv = document.getElementById("dynamicDiv");
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
</script>
</head>
<body onload="shrink()">
<div align='center' id="dynamicDiv"><span id="dynamicSpan">Here is a string of text I want on just one line</span></div>
</body>
</html>
This code works, but I am using a little jQuery, I hope this helps in some way...
<style type="text/css">
#container {
height:100px;
background-color:#eeeeee;
text-align:center;
font-family:Myriad Pro;
}
<style>
<div id="container">01234567890123456789</div>
<script type="text/javascript">
$(document).ready(function()
{
var w = parseInt($("#container").width());
var l = parseInt($("#container").html().length);
var fontSize = ( (w / l) * 2 ) - 2;
fontSize = fontSize+'px';
$("#container").css('font-size', fontSize);
});
</script>
It looks like I'm missing something basic.
I want a certain DIV to have the height of the window. The effect should be that there's never any need to scroll down.
Do I have to use JavaScript? I was told that it's possible with css, but I can't find the relevant property - or I'm doing something wrong.
Here is the trick:
body {
margin:0;
padding:0;
height:100%; /* this is the key! */
}
.yourDivStyle {
...
height: 100%;
}
If you want to turn scrolling off, use this CSS:
html, body
{
overflow: hidden;
}
But remember now the content will not scroll - you can put overflow:auto or overflow:scroll on individual divs if you need some scrolling.
If you use Javascript make sure to register for the onresize event so that you can change numbers if the window is resized.
Make all parents have height: 100%; or use position: absolute /* or fixed */; left: 0; top: 0; width: 100%; height: 100%;.
Do I have to use JavaScript? I was
told that it's possible with css, but
I can't find the relevant property -
or I'm doing something wrong.
Javascript is the way to go, you can not determine winodow size with css and and re-calculate based on window resizing.
Ok, so in Javascript (not jQuery or anything):
<html>
<head>
<script type="text/javascript">
<!--
var sWidth;
var sHeight;
if (typeof window.innerWidth != 'undefined')
{
sWidth = window.innerWidth,
sHeight = window.innerHeight
} else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
sWidth = document.documentElement.clientWidth,
sHeight = document.documentElement.clientHeight
} else
{
sWidth = document.getElementsByTagName('body')[0].clientWidth,
sHeight = document.getElementsByTagName('body')[0].clientHeight
}
//VARIABLES STORED IN sWidth AND sHeight
document.write('<div style="height: '+sHeight+'; width: '+sWidth+';">CONTENT</div>');
//-->
</script>
</head>
<body>
</body>
</html>
Obviously you could write the div out seperately ^_^