I need to size a vertical range control based on the available height in the browser. I just about have it, except I think there is some type of a padding/border/margin issue that I can't get around. Although it sizes itself according to the height of the browser, my range control always goes off the bottom of the page by a few pixels.
This is how I'm getting the height:
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
then using it to set the slider height:
document.getElementById("slider").setAttribute('style', "height :" + height + "px");
I know that clientHeight returns the height INCLUDING padding, so I've been thinking that I just need to get the top padding and subtract it.
Problem is that when I get the padding as shown here, it is zero (alert writes out 0px):
alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top'));
Meanwhile, the CSS for the slider looks like this, so I don't think its own padding/border/margins are responsible:
.sliderStyle {
height: 860px;
width: 2%;
-webkit-appearance: slider-vertical;
padding-top: 0px;
margin: 0px;
border: 0px;
}
The only thing in the body of the HTML is the range control:
<input id="slider" class="sliderStyle" oninput='' onchange='' type="range" min="0" max="1000" step="1" value="0">
Here is the file in its entirety:
<!DOCTYPE html>
<html>
<head>
<title>Size Control to Browser</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css" media="screen">
.sliderStyle {
height: 860px;
width: 2%;
-webkit-appearance: slider-vertical;
padding-top: 0px;
margin: 0px;
border: 0px;
}
</style>
<script type="text/javascript">
function start() {
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
alert('clientHeight: ' + height);
alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top'));
alert("top margin: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('margin-top'));
document.getElementById("slider").setAttribute('style', "height :" + height + "px");
}
</script>
</head>
<body onload='start()'>
<input id="slider" class="sliderStyle" type="range" min="0" max="1000" step="1" value="0">
</body>
</html>
clientHeight alert confirms that height is changing for different browser sizes
top pad and top margin alerts both return 0px
To answer your question: use the below JavaScript as your height variable, instead of using clientHeight or innerHeight (and set the body to be 100vh). (See the jsfiddle):
JS:
var style = window.getComputedStyle(document.body, null),
height = style.getPropertyValue("height");
console.log(height);
CSS:
body {
padding: 20px;
height: 100vh;
}
div {
height: 30px;
}
HTML:
<div></div>
What the code does is gets the height of contents of the body, which in essence is the height of the body without any padding.
The only reason I put a random div element in there with a set height of 30px is to show that console.log(height) will output exactly 30px, which is the height of all the contents in the body (in this case, the div is the only thing in the body), not including the padding of the body (which, according to the example CSS I used above, is 20px). You can obviously just remove this div, as it is just here for example purposes.
The JavaScript is taken from this answer to "Get the height of an element minus padding, margin, border widths", which also shows a legacy cross-browser implementation.
Related
I have a textarea,where user will input some text,and also have a input range,where user can increase the font size of text,I want that the width of textarea still same,but height increase depend font size to show all text,and also I want textarea don't have a scroll and resize
I did that using div,and I want the same result using textarea
I did that using div https://jsfiddle.net/Meline222/fgpedL0z/1/
I want the same result but using textarea https://jsfiddle.net/Meline222/fgpedL0z/3/ bt when i use textarea all text can't see
I tried did but all text don't show textarea
this work for div
#inputText {
width: 150px;
height: auto;
border: 1px solid;
word-wrap: break-word;
overflow:hidden;
resize: none;
}
If you want only the height to be adjusted along font size, use em unit measure.
width: 150px;
height: 2em;
Documentation about the em unit says
em: 1em is the same as the font-size of the current element.
JSFiddle Demo: https://jsfiddle.net/craigiswayne/qkn8rdxp/20/
function adjustSize(i){
var o = document.getElementById('inputText');
o.setAttribute("style","height: auto;");
var val = i.value;
o.style.fontSize = val + 'px';
var fontSize = o.style.fontSize;
o.setAttribute("style","font-size: " + fontSize + "; height: " + o.scrollHeight + "px;");
}
#inputText {
width: 150px;
height: auto;
border: 1px solid;
word-wrap: break-word;
}
<textarea name="" id="inputText">kyb u uuhhhkjh kj</textarea>
<input id="input" type="range" min="12" max="72" oninput="adjustSize(this);">
So the solution I chose to set the height of the textarea to it's scrollHeight
scrollHeight is defined by MDN docs as
The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
see also this post for an explanation of scrollHeight, clientHeight and offsetHeight
What is offsetHeight, clientHeight, scrollHeight?
I'm trying to create an online image cropper where the user uploads a photo and it is displayed with a box (frame) that is changeable via buttons. Crops the photo and sends it back to the user.
I have a basic template of form uploader in php (working). It then displays the image in a div with another transparent div above it with a border marking the cropping area.
The initial values for the divs are set in the css section via php as the page is sent to the user. I'm trying to adjust the size of the frame div, as the width given is the image width +2 px for the frame (same for height) and it should just be the images width (-2 px).
This code should be working, but when the alerts pop up, they show that the frame width/height has not changed the original values, and it appears as though the frame does not change.
<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
width: 500px;
height: 334px;
background-color: black;
}
.top {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
width: 500px;
height: 334px;
position: absolute;
background-color: transparent;
border-width: 1px;
border-style: solid;
border-color: white;
z-index: 999;
}
.bottom {
top: 0px;
left: 0px;
position absolute;
width: 500px;
height: 334px;
background-color: green;
// background-image: url(uploads/1505002267.jpg);
z-index: 998;
}
</style>
<script type="text/javascript">
function myOnLoad() {
var w = 500;
var h = 334;
var frame = document.getElementsByClassName('top')[0];
w = w - 2;
h = h - 2;
//frame.setAttribute("style", "width: " + w + "px;");
//frame.setAttribute("style", "height: " + h + "px;");
frame.style.width = w + "px;";
frame.style.height = h + "px;";
alert(frame.offsetWidth);
alert(frame.offsetHeight);
}
</script>
<title>Test Website</title>
</head>
<body onload="myOnLoad()">
<div class="wrapper">
<div class="bottom" id="image">
<div class="top" id="frame">
</div>
</div>
</div>
</body>
</html>
I am aware that I can change the value php gives to the css section, but I'm going to need to change the crop ratio in the next step anyway, so I need this way to work. Please help, I've been looking at this code for way too long.
Remove the semicolon in the quotes.
frame.style.width = w + "px";
frame.style.height = h + "px";
Also, offsetHeight and offsetWidth takes border into consideration. Since your border width is 1px, it adds 2px to both height and width of the image canceling out the subtraction with 2.
Read more about offset width and height on MDN.
I have a div, an image(arrow.gif), another image(Untitled-1.jpg), two textboxes and a button.
I want to move the arrow.gif within a scrollable div with an image inside.
But i'm having a trouble creating the div into a scrollable one (making the Untitled-1.jpg fill the div) and moving the arrow.gif based on the Untitled-1.jpg's coordinates. Can anyone help me with this? Any help/assistance will be greatly appreciated .
<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 30px;
margin-top: 10px;
}
#contentContainer {
border: 5px black solid;
background-color: #F2F2F2;
cursor: pointer;
background-image:url('Untitled-1.jpg');
background-repeat: no-repeat;
background-size: fixed;
width:1030px;
height:912px
}
#thing {
position: relative;
left: 50px;
top: 50px;
height: 68px;
width: 41px;
transition: left .5s ease-in, top .5s ease-in;
z-index: 10000;
}
</style>
</head>
<body>
<div id="contentContainer">
<img id="thing" src="arrow.gif" >
</div>
<form method="post" action="">
<input type="button" value="submit" name="submit" onclick="getClickPosition()">
<input type="text" id="valuex" name="valuex">
<input type="text" id="valuey" name="valuey">
</form>
<script src="prefixes.min.js"></script>
<script>
function getClickPosition() {
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var x1 = document.getElementById('valuex').value;
var y1 = document.getElementById('valuey').value;
var parentPosition = getPosition(x1.currentTarget);
var parentPosition = getPosition(y1.currentTarget);
var xPosition = x1 - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = y1- parentPosition.y - (theThing.clientHeight / 2);
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
</script>
</body>
</html>
First things I'm noticing is that you have:
background-size: fixed;
Fixed isn't an option for the background-size property.
You also have:
height:912px
Which is missing a semicolon, and will break your stylesheet further on.
1) Full-size background
If you want your 'Untitled-1.jpg' image to fill the frame you could set background-size to either cover or contain.
2) Scrollable div
In order to change your div into a scrollable one you can do so as follows:
#div{
width:1030px;
height:912px;
overflow: auto;
}
Overflow auto will add horizontal and vertical scrollbars to the div in the event that it extends outside its bounds. Or can use scroll if you want scrollbars to always be visible on the div.
You could also use overflow-x and overflow-y to specify which orientation you want scrollbars to appear.
3) Moving the thing
You're on the right track setting the position of the thing, there's a bit of fiddly stuff involved though to get it all functioning. See my Fiddle.
Demo
I've modified your code a fair bit, but in this fiddle you can change the position of the thing within the scrollable div, using the coordinate boxes.
https://jsfiddle.net/8y0qhdwx/
I'm not sure where you are heading with this, but it would be worth looking into the HTML5 canvas element, as it's built to handle the positioning of objects within it.
Hope this helps.
I have a markup like this
<div>
<div>hello</div>
<div>World</div>
</div>
I am using first div as float right and second one as float left.
The problem is to get the position of the end corner of "World" div
I used the JS like this
var left = $('.inner-page-right-content').offset().left;
left = -(900- left);
$('#inner-page-container').css('background-position',left);
The code works in Chrome and Safari but not in Firefox
where it is showing the real distance from window (without float).
Any help or insight will be really appreciated
This throws the same result in Chrome and Firefox
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style type="text/css">
#hello {
float: right;
width: 100px;
background: grey;
color: white;
text-align:center;
}
#world {
float: left;
width: 100px;
background: grey;
color: white;
text-align:center;
}
#result {
clear: both;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var oWorld = $("#world").get(0);
var rect = oWorld.getBoundingClientRect();
$("#result").html("top: "+rect.top+", Right: "+rect.right);
});
</script>
</head>
<body>
<div>
<div id="hello">hello</div>
<div id="world">World</div>
</div>
<div id="result"></div>
</body>
</html>
You could try getBoundingClientRect()
// Assuming your 'world' div has an id="world"
var rect = document.getElementBydId('world').getBoundingClientRect();
rect.left // x position of #world relative to viewport
rect.top // y position of #world relative to viewport
rect.width // width of #world, including padding and borders
rect.height // height of #world, including padding and borders
rect.offsetWidth // width of #world - IE8 and below
rect.offsetHeight // height of #world - IE8 and below
Important notes
left and top positions are relative to viewport, meaning that
scrolling is NOT taken into account. Add scroll x and y values to get
real absolute position.
CSS transforms are taken into account.
See the doc on MDN
Try
dom.getBoundingClientRect()
You can use this method get a dom's rectangle. It containes left top bottom right position
relative to the browser.
I am quite new to HTML and am not very fluent in HMTL terminology (English as well :). I am trying to create presentation slide (something like Powerpoint in MS Office). The functionality should be:
Everything (text, pictures, etc.) inside the slide must stay in position, size and ratio relative to the slide while the slide resizes.
The slide has 4:3 resolution.
The slide should be realized by <div> element.
The slide stays in the middle of the screen.
No inline styles should have to be used inside the slide.
Plain Javascript, css and HTML must be used.
So far I have managed to devise this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>
Image Resize Test
</title>
<style type="text/css">
*
{
margin: 0;
}
body
{
background-color: black;
width: 100%;
height: 100%;
}
#wrapper
{
font-size:100%;
background-color: white;
display: block;
position: absolute;
left: 50%;
}
#content
{
font-family:"Times New Roman";
font-size:80%;
}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
<script>
window.onload = function()
{
window.onresize();
}
window.onresize = function()
{
var width = window.innerWidth;
var height = window.innerHeight;
if (width / 4 > height / 3)
{
width = height / 3 * 4;
}
else
{
height = width / 4 * 3;
}
var wrapper = document.getElementById("wrapper");
wrapper.style.height = height + "px";
wrapper.style.width = width + "px";
wrapper.style.marginLeft = (-width/2) + "px";
wrapper.style.fontSize = (height) + "%";
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<H1>
aaaa
</H1>
<H2>
bbbb
</H2>
<p>cccc</p>
text
</div>
</body>
</html>
Is this a good solution to my problem or are there simpler/more efficient/more robust or more "pro" ways to do this?
Could it be solved without the Javascript? Atleast partially.
Is there a way to easily specify x/y offset relative to the side for any element within the slide (perhaps as attribute)?
How to apply styles for elements that would be variably deep within the slide element tree?
Help on any of the things I ask would be appreciated.
this is basically same as yours but without explicitly setting margin in javascript. so remove that part and make margin: 0 auto; at wrapper.
http://jsfiddle.net/btevfik/VuqJX/
it seems like you can keep the aspect ratio with only css and html but as far as i can tell this only works when you resize width of the window. when you change height it wont work.
Maintain the aspect ratio of a div with CSS