I wanted to make div height change with input so it can represent floors.
I dont really understand how to make a script variable represent an actual value, beacuse if i set
document.getElementById("height_representation_floors").setAttribute("style","height: height_floor ");
to change to 500px or so it works just as intended.
What can i do?
function calculus_meters() {
height_floor = 0
height_input_code_meters = document.getElementById("height_input").value
height_floor = height_input_code_meters / 2.7
document.getElementById("height_representation_floors").setAttribute("style","height: height_floor ");
document.getElementById("output").textContent = height_input_code_meters + ' meters of height is approximately ' + height_floor.toFixed(0) + ' floors of a regular living building'
}
function calculus_feet() {
height_floor = 0
height_input_code_feet = document.getElementById("height_input").value
height_floor = height_input_code_feet / 8.86
document.getElementById("output").textContent = height_input_code_feet + ' feet of height is approximately ' + height_floor.toFixed(0) + ' floors of a regular living building'
}
body {
margin: 0;
background: #595959;
height: 100%;
overflow-x: hidden;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
background: white;
border: solid 2px black;
}
#button_1 {
position: absolute;
top: 3vh;
left: 62vw;
}
#button_2 {
position: absolute;
top: 3vh;
left: 69.7vw;
}
#height_representation_floors {
position: absolute;
top: 20vh;
height: 1100px;
width: 500px;
background-image: url(images/height_representation.png);
}
#height_representation_stickman {
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="house_2">
<div id="output" style="height: 5vh; width: 60vw; margin: 2vw; ">
</div>
<h1 style="position: absolute; left: 2vw; top: 8vh; text-align: left; font: small-caps bold 24px/1 sans-serif;"> Input wanted height: </h1>
<input type="number" step="any" id="height_input" style="position: absolute; margin: 2vw; top: 8vh; text-align: left; width: 60vw; height: 5vh; font-size: 2vw; border: solid 2px black;">
<div id="button_1">
<button type="button" onClick="calculus_meters()" style="width: 14.6vh; height: 14.6vh; border: solid 2px black; font-size: 1.5vw">Convert (in meters)</button>
</div>
<div id="button_2">
<button type="button" onClick="calculus_feet()" style="width: 14.6vh; height: 14.6vh; border: solid 2px black; font-size: 1.5vw">Convert (in feet)</button>
</div>
<div id="height_representation_floors">
</div>
</div>
</body>
</html>
You should use template literals to concatenate the variable into the string:
document.getElementById("height_representation_floors").setAttribute("style", height: `${height_floor}px`);
This will correctly insert the value of the variable height_floor into the string, so that the div's height will change based on the input value.
The issue with your code is that you are setting the "height" style attribute to the string "height_floor" instead of the value of the variable height_floor. To set the height of the div to the value of the height_floor variable, you should change the line of code to:
document.getElementById("height_representation_floors").setAttribute("style", "height: " + height_floor + "px;");
This will set the "style" attribute of the div to a string that includes the value of the height_floor variable followed by "px" to specify that the value is in pixels.
Related
i'm trying to create a content in div when scrolling but the problem is when i scroll down it creates unlimted content and it goes for ever
i just want to create only one content in the div
i tryed to search to get the answer but all i found is the same thing unlimted divs when scrolling
here is my code :
var messageGetter = $('#message1');
var firstChild = '<p class="message-content">I agree that your message is awesome!</p><div class="message-timestamp-right">SMS 13:37</div><div class="ball-right"></div>';
var secondChild = '<p class="message-content">I agree that your message is awesome!</p><div class="message-timestamp-right">SMS 13:37</div><div class="ball-left"></div>';
$(document).scroll(function(){
var clientH = document.documentElement.clientHeight;
var memoY = messageGetter[0].getBoundingClientRect().y;
var messageHight = messageGetter[0].getBoundingClientRect().height;
if(clientH >= memoY){
$('#message1').append(firstChild);
}
});
.message-right {
position: relative;
display: inline-block;
margin-top: 80px;
margin-bottom: 20px;
margin-left: calc(100% - 45%);
padding: 10px;
background-color: #2E456D;
width: 380px;
height: 150px;
text-align: left;
color: white;
font: 400 .9em 'Open Sans', sans-serif;
border: 1px solid #2E456D;
border-radius: 10px;
}
.lower-container{
height: 1400px;
background-color: #00B4D8;
}
.virt-line{
height: 1300px;
width: 7px;
background-color: #CAF0F8;
position: absolute;
margin: 50px 50% 50px 50%;
}
<div class="lower-container">
<div id="message1" class="message-right">
<!-- <p class="message-content">I agree that your message is awesome!</p>
<div class="message-timestamp-right">SMS 13:37</div>
<div class="ball-right"></div> -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
You need to unset your event handler after job was done. Mark the handler:
$(document).on('scroll.ADD_CONTENT',function(){
....
And remove it after your div was added:
if(clientH >= memoY){
$('#message1').append(firstChild);
$(document).off('scroll.ADD_CONTENT');
....
I'm trying to center a div on my screen by making its position absolute, setting its top value to 50%, and then subtracting the top margin by half of the div's height. I am using offsetHeight, but it seems that the height returned by the offsetHeight property is less than the actual height of the div element. (See screenshot below)
Is there a fix for this? Is there an alternative that I can do instead of this?
Thanks in advance.
The height returned by offsetHeight is 69 px instead of the actual height, which is 328.375px.
// Custom title
let customTitle = document.getElementById("title");
chrome.storage.sync.get("title", (result) => {
customTitle.textContent = result.title;
});
// Centering container
let container = document.getElementById("container");
container.style.marginTop = -container.offsetHeight / 2 + "px";
window.onresize = container.style.marginTop = -container.offsetHeight / 2 + "px";
pre {
color: white;
display: block;
font-family: 'Mulish', sans-serif;
font-weight: 800;
font-size: 96px;
margin-block-start: 0.2em;
margin-block-end: 0.2em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.container {
position: absolute;
top: 50%;
left: 10%;
}
button {
width: 150px;
height: 50px;
border: none;
border: solid 2.7px white;
border-radius: 8px;
background: rgba(168, 166, 166, 0);
font-family: 'Mulish', sans-serif;
font-weight: 600;
font-size: 18px;
color: white;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght#600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="blocked.css">
</head>
<body>
<div id="container" class="container">
<pre id="title"></pre>
<button id="unblockButton">
Unblock
</button>
</div>
<script src="blocked.js"></script>
</body>
</html>
It can be done using styling like this, you don't need to use javascript at all.
.container {
position: absolute;
top: 50%;
transform: translateY(-50%); /* This moves container upword by its half height */
left: 10%;
}
I do this :
I need to separate the circle , I want to draw something like dart game, and I need to calculate the time that mouse still inside the circle.
If you can help me to do this ?
And how to make this responsive with mobile ?
And can any one build like this with android or react ?
html :
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()">
<div id="inner-circle1" onmouseover="htext()" onmouseout="stext()">
</div>
</div>
</div>
</body>
css :
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 500px;
width: 500px;
position: relative;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
#inner-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 300px;
width: 300px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -150px 0px 0px -150px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
js:
function stext() {
var x = document.getElementById("outer-circle");
x.style.background = 'blue';
}
function rest1() {
var x = document.getElementById("outer-circle");
x.style.background = '#385a94';
}
function htext() {
var x = document.getElementById("outer-circle");
var y = document.getElementById("inner-circle");
y.style.background = 'red';
x.style.background = 'blue';
}
You can use Date.now() at two times (mouseover & mouseout) and calculate difference.
Get time difference between two dates in seconds
Edit:
Here's the code. It's responsive and it haves perfectly centered circles.
css transform
css units (length)
Enjoy your code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>asd</title>
<style>
body {
margin: 0px;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 100vmin;
width: 100vmin;
position: relative;
margin: auto;
}
#middle-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 60vmin; /*responsive */
width: 60vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*center the circle*/
}
#inner-circle {
position: absolute;
background: #f99;
border-radius: 50%;
height: 20vmin;
width: 20vmin;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="outer-circle" onmouseover="stext()" onmouseout="rest1()">
<div id="middle-circle" onmouseover="htext()" onmouseout="stext()"></div>
<div id="inner-circle" onmouseover="htext()" onmouseout="stext()"></div>
</div>
</body>
</html>
I'd like to create a range slider that has a div element follow the range thumb. This div element would contain the current value of the range input. How would I go about doing something like this? I've looked into styling the slider but don't know how I could add an actual element onto the thumb. It would look something like this, excuse my terrible drawing abilities:
Edit: The following div should update while slider is being dragged.
UPDATE: I got a pretty good prototype going but cant seem to get it to follow the slider perfectly. It gets off center by a few pixels depending on where it is along the track. Heres my codepen
UPDATED CODE
HTML
<div id="slider-cntnr">
<input type="range" id="frame-slider" oninput="updateFollowerValue(this.value)"/>
<div id="slider-follow">
<div id="slider-val-cntnr">
<span id="slider-val"></span>
</div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
#slider-cntnr {
width: 50%;
margin: 40px;
position: relative;
}
#frame-slider {
width: 100%;
margin: 0;
}
#slider-follow {
margin-left: -14px;
background-color: black;
width: 30px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
#slider-val-cntnr {
background-color: white;
width: 25px;
height: 20px;
}
JS
var follower = document.getElementById('slider-follow');
var follower_val = document.getElementById('slider-val');
var slider = document.getElementById('frame-slider');
var updateFollowerValue = function(val) {
follower_val.innerHTML = val;
follower.style.left = val + '%';
};
updateFollowerValue(slider.value);
If you're not supporting old browsers, you can take advantage of the
<input type="range">
and some JavaScript to follow it along. See my Codepen: http://codepen.io/abhisharma2/pen/wMOpqz
An example with custom output
It's updating while you drag the input.
var el, newPoint, newPlace, offset;
$('input[type=range]').on('input', function () {
$(this).trigger('change');
});
// Select all range inputs, watch for change
$("input[type='range']").change(function() {
// Cache this for efficiency
el = $(this);
// Measure width of range input
width = el.width();
// Figure out placement percentage between left and right of input
newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
offset = -1;
// Prevent bubble from going beyond left or right (unsupported browsers)
if (newPoint < 0) { newPlace = 0; }
else if (newPoint > 1) { newPlace = width; }
else { newPlace = width * newPoint + offset; offset -= newPoint; }
// Move bubble
el
.next("output")
.css({
left: newPlace,
marginLeft: offset + "%"
})
.text(el.val());
})
// Fake a change to position bubble at page load
.trigger('change');
output {
position: absolute;
background-image: linear-gradient(#444444, #999999);
width: 40px;
height: 30px;
text-align: center;
color: white;
border-radius: 10px;
display: inline-block;
font: bold 15px/30px Georgia;
bottom: 175%;
left: 0;
margin-left: -1%;
}
output:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 10px solid #999999;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -1px;
}
form {
position: relative;
margin: 50px;
}
body {
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<input type="range" name="foo" min="0" max="100">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>
<form>
<input type="range" name="foo" min="0" max="100" style="width: 300px;">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>
<form>
<input type="range" name="foo" min="0" max="100">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>
reference https://css-tricks.com/value-bubbles-for-range-inputs/
Basically ypu can go with something like this:
Important points are;
Don't forget to position your wrapper as relative.
Give your following badge absolute position, and for centering, negative margin-left value as your badge's width / 2. (If your badge is 50px, give margin-left -25px);
Range slider must has 100% width.
HTML:
<div class="range-slider">
<input type="range" min="0" max="100" step="1" />
<div class="range-badge"></div>
</div>
CSS:
.range-slider{
position: relative;
width: 200px;
}
.range-slider > input.range{
width: 100%;
}
.range-slider > .range-badge{
position: absolute;
left: 0%;
top: 20px;
background: #000;
color: #fff;
width: 20px;
text-align: center;
margin-left: -10px;
padding: 5px 0;
}
JS:
$(document).ready(function(){
var badge = $('.range-badge');
$('.range').on('change', function(){
var current = $(this).val();
badge.text(current).animate({
'left': current+'%'
});
});
});
Test here:
https://jsfiddle.net/dmnzugh8/6/
As mentioned above in the title I cannot get the onchange to call myfunction() everytime users type in the textarea, it supposed to change the image everytime it type
Anyone can please help on that, I am a newbie to html and javascript. I just need the image to change to what people have typed in the text area.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough" lang="us">
<head>
<meta charset="utf-8">
<title>〈Magnetic〉writesomething</title>
<link href="jquery-ui.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
display: table-cell;
padding: .8em 2em .8em 20px;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: relative;
top: 80px;
left: 360px;
width: 200px;
height: 90px;
color:#FFFFFF;
font-size:36px;
margin: 0 auto;
}
h4 {
width: 600px;
}
img {
width: 100%;
height: auto;
z-index:-1;
}
div.relative {
position: relative;
left: 20px;
border: 3px solid #8AC007;
}
#container {
width:600px;
height:350px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
width:100%;
height: auto;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 22px;
font-weight: bold;
left: 250px;
top: 80px;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div class="container">
<h1 class="container">〈Magnetic〉writesomething</h1>
<div style="display: block;">
<div id="imgDiv" class="image">
<img src="http://game.magnetic.hk/image.php?text=writesomething
" />
<p id="display"></p>
</div>
</div>
<p>Write something：</p>
<form action="image.php" method="post" name="myform">
<textarea style="width:600px;" name="text" id="inputtext" onChange="myFunction()" placeholder="上限為16個字">中秋祝你乜乜乜</textarea></br> </br>
</form>
</div>
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("inputtext").value;
document.getElementById("display").innerHTML = x;
document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'>'
}
</script>
</body>
</html>
When you use document.getElementById('imgDiv').innerHTML you remove the <p id="display"></p>.
If you replace
document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'>'
by:
document.getElementById('imgDiv').innerHTML='<img src=\'http://game.magnetic.hk/image.php?text='+ document.getElementById("display").innerHTML +'\'><p id="display"></p>'
It should work.
You can try it here.
Replace your code line with this one. And check the last element after closing image tag. The same paragraph should be there.
document.getElementById('imgDiv').innerHTML = '<img src=\'http://game.magnetic.hk/image.php?text=' + document.getElementById("display").innerHTML + '\'><p id="display"></p>'
#Elie Gnrd's answer explains why your code is broken.
Since you are using jQuery put its selectors and binding to use.
Modify your script to this,
$('#inputtext').on('input', function () {
var x = $("#inputtext").val();
$("#display").html(x);
$('#imgDiv').html('<img src=\'http://game.magnetic.hk/image.php?text=' + x + '\'>');
});
And, remove the onChange attribute from textarea
Checkout the working fiddle here.. https://jsfiddle.net/sachin_puthran/h2c06fjx/
Since you mentioned every time a user types and I see that you are using jQuery.
Try like this.
--Update--
Didn't realize the text not appearing.
$("#inputtext").on("keydown", myFunction);
function myFunction() {
var x = $(this).val();
console.log(x);
$("#display").text(x);
$('#imgDiv > img').attr('src', 'http://game.magnetic.hk/image.php?text=' + x);
}
JSFiddle
--EDIT--