I have a piece of html like this:
<!doctype html>
<html>
<head>
<style type="text/css">
body {
margin: 0px;
width: 250px;
border: 1px dashed gray;
}
.mypara {
font-family: "Segeo UI";
margin: 0px;
font-size: 24px;
line-height: 120px; /* same as line-height:5 */
}
.myspan {
border: 6px solid #8f8;
}
.alignmark {
position: fixed;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
left: 0px;
width: 250px;
top: 48px;
height: 24px;
}
</style>
</head>
<body>
<p class="mypara"><span class="myspan">My paragraph .</span></p>
<div class="alignmark"></div>
</body>
</html>
How do I know the exact height(pixel count) of a textbox of a text line, either with JavaScript or by Chrome/Firefox DevTools(F12)?
The textbox height is the height of the area surrounded by a <span> element's border (the "border" in HTML box model).
From my experiments, the difference between textbox height and font-size value varies according to font-family I choose, some may be 5~6 pixels, some maybe 7~8 pixels.
I would use the .getBoundingClientRect().height and take away the top and bottom border size (as it's hard coded at 6 each just take away 12 - or you can use getComputedStyle and get the computed values if you wish, as below)
let e = document.querySelector('.myspan');
let css = window.getComputedStyle(e);
console.log(
e.getBoundingClientRect().height
- parseFloat(css.borderTopWidth)
- parseFloat(css.borderBottomWidth)
);
<!doctype html>
<html>
<head>
<style type="text/css">
body {
margin: 0px;
width: 250px;
border: 1px dashed gray;
}
.mypara {
font-family: "Segeo UI";
margin: 0px;
font-size: 24px;
line-height: 120px; /* same as line-height:5 */
}
.myspan {
border: 6px solid #8f8;
}
.alignmark {
position: fixed;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
left: 0px;
width: 250px;
top: 48px;
height: 24px;
}
</style>
</head>
<body>
<p class="mypara"><span class="myspan">My paragraph .</span></p>
<div class="alignmark"></div>
</body>
</html>
Use Window.getComputedStyle() and access fontSize property of that.
let p = document.querySelector('.mypara')
let height = window.getComputedStyle(p).fontSize
console.log(height)
<!doctype html>
<html>
<head>
<style type="text/css">
body {
margin: 0px;
width: 250px;
border: 1px dashed gray;
}
.mypara {
font-family: "Segeo UI";
margin: 0px;
font-size: 24px;
line-height: 120px; /* same as line-height:5 */
}
.myspan {
border: 6px solid #8f8;
}
.alignmark {
position: fixed;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
left: 0px;
width: 250px;
top: 48px;
height: 24px;
}
</style>
</head>
<body>
<p class="mypara"><span class="myspan">My paragraph .</span></p>
<div class="alignmark"></div>
</body>
</html>
you can also use clientHeight
let alignmark = document.getElementsByClassName('alignmark')[0];
console.log(alignmark.clientHeight);
or open Chrome Developer Tools, Select your Element via 'Elements' tab, and click the 'Properties'. You can check various DOM properties as well.
This works if i have understand correctly what do you want to do.
<script>
window.onload = function(){
console.log("Element Height:"+document.getElementById('myspan').offsetHeight);
}
</script>
Related
Code is very basic as I'm only a beginner. Can't understand what I'm to do within my function to preform this.Not sure if I need to use a loop to preform this or can I can do this with just the onclick and a function to pass the parameter to? Not sure if the array is needed or not? Thought I'd have to have some sort of an index to refer to for the function to know which shape the circle is to change to
<html lang="en">
<head>
<script>
function changeShape(){
array for the shapes
var shapes = new Array;
shapes["circle"] = "circle";
shapes["square"] = "square";
shapes["triangle"] = "triangle";
shapes["parall"] = "parall";
shapes["trap"] = "trap";
document.getElementById("shape1").className=="circle";
}
}
</script>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="shape1" class = "circle" onclick="changeShape('shape1')"></div>
<br>
<div id="shape2" class="square" onclick="changeShape('shape2')"></div>
<br>
<div id="shape3" class="oval" onclick="changeShape('shape3')"></div>
<br>
<div id="shape4" class="rectangle" onclick="changeShape('shape4')"></div>
<br>
<div id="shape5" class="triangle" onclick="changeShape('shape5')"></div>
<br>
<div id="shape6" class="parall" onclick="changeShape('shape6')"></div>
<br>
<div id="shape7" class="trap" onclick="changeShape('shape7')"></div>
<br>
</body>
<style>
*{
padding:0;
margin: 0;
box-sizing: border-box;
}
.circle{
width:200px;
height: 200px;
border-radius: 50%;
background: red;
}
.square{
width:200px;
height: 200px;
background: orange;
}
.oval{
padding: 5%;
width:300px;
height: 100px;
border-radius: 45%;
background: yellow;
}
.rectangle{
width:350px;
height: 150px;
background: green;
}
.triangle{
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
.parall {
width: 100px;
height: 50px;
transform: skew(20deg);
background: #555;
}
.trap {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
</style>
</html>```
Use this changeShape function instead:
function changeShape(shape){
var shapes={"shape1":"circle","shape2":"sqare","shape3":"oval","shape4":"rectangle","shape5":"triangle","shape6":"parall","shape7":"trap"};
var element=document.getElementById(shape);
if (element.className=="circle"){
element.className=shapes[shape];
}
else{
element.className="circle";
}
}
The header covers my websites and half of my opening welcome is covered, what css properties can I use or changed can I make to fix this?
I was experimenting my stuff and now it looks weird. You can see it at http://algninja.000webhostapp.com/
body {
background: purple;
}
div.a {
margin:25px 10px 25px 10px;
text-align: center;
background: gold;
color: purple;
border-radius: 10px;
padding: 5px 25px;
}
#header {
position:fixed;
left:0;
top:0;
width:100%;
background-color:#13AFF2;
z-index:2;
}
button.projectsbutton {
color: purple;
border:none;
background: gold;
padding:15px 32px;
font-size: 20px;
}
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id = "header">
<button onclick = "window.location.href = 'https://google.com';"class = "projectsbutton"><b>projects</b></button>
</div>
<div class = "a">
<h1>Welcome to my website</h1>
<h3>Look around, and see what u can find</h3>
</div>
</body>
</html>
You can add the following to div.a
position: relative;
top: 100px; /* or whatever value you like */
or you can increase to top margin value from div.a if you change the margin line from
margin: 25px 10px 25px 10px;
to
margin: 100px 10px 25px 10px;
I designed my site so that a navigation bar spans down the whole site. It is handled in a div. The rest of the site is inside divs as well, and will be placed beside the navigation div.
After placing the first div beside the navigation div, everything worked out. When I tried to add a second div beside the navigation div and under the first div, it goes outside of the body. I can I fix this?
THE ORANGE BORDER DIV IS THE ONE I AM TRYING TO FIX
Here is my site
: JSFiddle would be to large and hard to understand, so please use the console in your browser to help me out.
firstBox is the div that isn't working how I want it to. #navigationPane and #topBox are in the right position
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
function dBug(data) {
console.log(data);
}
dBug("document ready");
$.stellar();
});
</script>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 1000px;
min-height: 800px;
max-height: 1200px;
margin-left: auto;
margin-right: auto;
font-family: Verdana,Helvetica,Arial,sans-serif;
border: solid green 1px;
}
h1 {
text-align: center;
margin-top: 10px;
color: white;
margin-top: 20px;
}
p {
color: white;
text-align: center;
}
#small {
font-style: italic;
font-size: 10px;
margin-top: -12px;
}
#topBox {
height: 400px;
width: 929px;
border: solid blue 1px;
float: right;
margin-top: -1px;
margin-right: -1px;
background-image: url(image.jpg);
background-size: 1400px 600px;
background-position: -0% 60%;
cursor: default;
}
#firstBox {
height: 400px;
width: 928px;
border: solid orange 1px;
float: right;
cursor: default;
}
#navigationPane {
width: 70px;
margin-left: -1px;
border: solid red 1px;
min-height: 1200px;
max-height: 2000px;
margin-bottom: -1px;
margin-top: -1px;
background-color: purple;
}
#box {
width: 500px;
height: 150px;
border: dotted white 2px;
clear: none;
background-color: rgba(0, 0, 0, 0.85);
margin-left: 200px;
margin-top: 120px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#navigationPane img {
margin-left: 5px;
margin-top: 10px;
}
a:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="topBox" data-stellar-background-ratio="0.2">
<div id="box" >
<h1>WH Programming</h1>
<p>Will Houle Programming - Student Developer</p>
<p id="small">A site created to host tutorials, past lab assignments, and future endeavors.</p>
</div>
</div>
<div id="navigationPane">
<img src="twitter.png" />
<img src="humber.png" />
</div>
<div id="firstBox">
</div>
</body>
</html>
I know the coding is very unorganized, but for now this is what im working with
Have you tried to add some css property which is useful for you?
however, let me tell you. you should use position and top property for the box which is going out of thr body.
here is that code:
<div id="firstBox" style="
position: relative;
top: -800;"></div>
or
in your #firstdiv of css stylesheet add these two:
position: relative;
top: -800;
Hey guys i have maded an outerbox which contains an innerbox .The code is
<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
<div id="boxed">
<div id="anotherbox"> </div>
</div>
</body>
</html>
the css file
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
This works fine..
But what i need is that i want to display a simple button inside the inner box.I have tried some javascript code but it dint worked out.
Hope you guys can help me ..P:S ..i dont need a jquery solution..Thanks
Is this what you are looking for?
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
<div id="boxed">
<div id="anotherbox">
<input type="button" value="inside" />
</div>
</div>
You can achieve this using a button, as follows:
The HTML:
#boxed {
width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;
visibility: visible;
}
#boxed:hover #anotherbox > button {
width: 16px;
padding: 30px;
border: 5px solid gray;
margin: 0;
visibility: visible;
cursor:pointer;
}
<div id="boxed">
<div id="anotherbox">
<button>Button</button>
</div>
</div>
I am trying to open a popup window in the center of the monitor. As I know screen size of each desktop or laptop will vary. So that is the reason I am looking for some way so that whenever my code tries to open a popup window it should get opened in the center of the browser.
Below is my code-
<html>
<head>
<style>
* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC; }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover { cursor: pointer; background: #E5E5E5 }
#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover { cursor: pointer; background: #E5E5E5 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function open(url) {
$('#blockdiv').fadeIn();
$('#iframe').attr('src', url);
$('#containerdiv').fadeIn();
}
function close() {
$('#blockdiv').fadeOut();
$('#containerdiv').fadeOut();
}
$(document).ready(function() {
$('ul').css({width: $('#containerdiv').width()-20,height: $('#containerdiv').height()-90})
$('#close').click( function() { close() })
$('#apply').click( function() { open('http://www.google.com/') })
});
</script>
</head>
<body>
<span id="apply">ApplyOnline</span>
<div id="blockdiv"></div>
<div id="containerdiv">
<iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
<span id="close">Close</span>
</div>
</body>
</html>
But somehow the above code, doesn't gets opened in the center of the monitor. Can anybody help me on this? What changes I need to make in the above code so that it always open the popup window in the center of the circle.
you can center you popup in css like
this is only css method to make it center so no js will be required to center it
#containerdiv {
width:90%;
height: 90%;
display: none;
position: fixed;
left:50%;
top:50%;
margin:-45% 0 0 -45%;
background:#FFF;
border: 1px solid #666;
border: 1px solid #555;
box-shadow: 2px 2px 40px #222;
z-index: 999999;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
It appears centered within the browser window to me.
If you want to center it based on screen resolution of the client's monitor you can use:
var centerDiv=function(){
var popUpHeight=$('#containerdiv').height();
var popUpWidth=$('#containerdiv').width();
var yPos=(window.screen.availHeight/2)-(popUpHeight/2)-window.screenY-(window.outerHeight-window.innerHeight);
var xPos=(window.screen.availWidth/2)-(popUpWidth/2)-window.screenX-(window.outerWidth-window.innerWidth);
$('#containerdiv').css({position:"absolute",top: yPos+"px",left: xPos+"px"});
}
window.onload=centerDiv();
var lastX = window.screenX;
var lastY = window.screenY;
var lastHeight = window.innerHeight;
var lastWidth = window.innerWidth;
setInterval(function(){
if(lastX != window.screenX || lastY != window.screenY || lastHeight != window.outerHeight || lastWidth != window.outerWidth){
centerDiv();
}
oldX = window.screenX;
oldY = window.screenY;
}, 33);