Is there a way to place a div inside body, centered, with given left-right margins equal to x and top-bottom margins, equal to y? Nothing except of the div (and its children) is presented in the document.
UPDATE. I want the following:
Also, I'd be glad to have a more common solution for the case, when x1 != x2, y1 != y2 (though a solution for my particular case x1==x2, y1==y2 is appreciated).
Better solution(?):
Set margin-left and margin-right for the div to "auto"
You can use fixed positioning. It won’t work in IE6, though.
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' lang='de'>
<head>
<meta charset='utf-8' />
<title>Test</title>
<style>
#bla {
position: fixed;
top: 30px;
left: 60px;
right: 60px;
bottom: 30px;
background: yellow;
}
</style>
</head>
<body>
<div id='blah'>
</div>
</body>
</html>
See it in action: http://obda.net/stackoverflow/position-fixed.html
The best I can do without CSS3 is to use two divs.
html {
width: 100%;
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div.parent {
display: inline-block;
position: relative;
left: 50%;
top: 50%;
}
div.child {
width: 100px;
margin-left: -50%;
margin-top: -50%;
border: 1px solid #000;
}
You can see it here: http://jsfiddle.net/CatChen/VGpdv/4/
Update: If CSS3 implementation is acceptable, it's a lot easier:
http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
You will have to use javascript if you want the margins to be the same in all browzers.
<body>
<div id="the_div" style="margin: 20 auto;margin-bottom:0;width:300px;">
</div>
<script type="text/javascript">
var dim = (function () {
var _pW, _pH;
if (document.body && document.body.offsetWidth) {
_pW = document.body.offsetWidth;
_pH = document.body.offsetHeight;
}
if (document.compatMode == 'CSS1Compat' &&
document.documentElement && document.documentElement.offsetWidth) {
_pW = document.documentElement.offsetWidth;
_pH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
_pW = window.innerWidth;
_pH = window.innerHeight;
}
return { width : _pW, height : _pH };
})();
var div = document.getElementById( "the_div" );
div.style.height = dim.height - 20 + "px";
</script>
<body>
Related
Here I have a header with position: fixed. As it does not go with the normal flow of the window, a margin for the body is set to the height of the header (here 100px). Now, the body starts right after the bottom of the header.
The main div in the body has a margin-top of 50px. But, the header grasps that margin, and it's not shown. If I set a border on the body, then the margin is shown. I don't know what is the relation of that top margin with the border of the body.
This can be solved if I add 50px more to the margin-top of the main div. But I want to know what's happening here.
body {
background-color: white;
margin-top: 100px;
/* border: 1px solid black; */
}
header {
background-color: black;
height: 100px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
}
main {
background-color: gray;
margin-top: 50px;
width: 100%;
height: 100vh;
}
<header></header>
<main></main>
Adding a border adjusts the display of the layout because the <body> and the <main> margins overlap without the border (since it's just whitespace), but with the border rendered, the two margins must be separate. Thus, without the border, the total margin is 100px, and with the border, the total margin is 150px.
See demo below. (I've also added a button to hide the <header> since it's position is fixed, so it isn't relevant to the situation.
const body = document.querySelector("body");
const header = document.querySelector("header");
const a = document.createElement("div");
const b1 = document.createElement("button");
b1.textContent = "Toggle body border";
b1.addEventListener("click", () => {
if (body.style.border !== "1px solid red") {
body.style.border = "1px solid red";
} else {
body.style.border = "none";
}
});
const b2 = document.createElement("button");
b2.textContent = "Toggle body margin";
b2.addEventListener("click", () => {
if (body.style.marginTop !== "0px") {
body.style.marginTop = "0px";
} else {
body.style.marginTop = "100px";
}
});
const b3 = document.createElement("button");
b3.textContent = "Toggle header visibility";
b3.addEventListener("click", () => {
if (header.style.display !== "none") {
header.style.display = "none";
} else {
header.style.display = "block";
}
});
a.appendChild(b1);
a.appendChild(b2);
a.appendChild(b3);
a.style.position = "fixed";
a.style.top = "0";
a.style.zIndex = "2";
document.body.appendChild(a);
body {
background-color: white;
margin-top: 100px;
}
header {
background-color: black;
height: 100px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
}
main {
background-color: gray;
margin-top: 50px;
width: 100%;
height: 100vh;
}
<header></header>
<main></main>
I want to display a dot at specific pixel on image click. I'm displaying it by giving top and left values in %. What happening is the dot isn't moving when clicked another pixel present inside the dot.
When click outside then it is moving. I don't understand why this is happening.
May be it is because there is very small change in top and left values for each pixel.
I've updated CSS for displaying dot within the circle
.hObiiS{
border: solid 1px #303030 !important;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
box-sizing: border-box;
box-shadow: none !important;
height: 9px !important;
position: absolute;
transform: translate3d(-50%, -50%, 0);
width: 9px !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hObiiS::before{
position: absolute;
content: '';
width: 1px;
height: 1px;
background-color: rgb(224, 1, 1);
border-radius: 50%;
}
<div class="hObiiS" style="top: 25.4601%; left: 58.6382%;"></div>
Can someone please provide solution to move dot per pixel ?
Here is your problem solution.
let container = document.querySelector('img');
let dot = document.getElementById('dot');
document. addEventListener('click', function( e ) {
if (container === event.target && container.contains(e. target)) {
var parentPosition = getPosition(container);
var xPosition = e.clientX - parentPosition.x - (dot.clientWidth / 2);
var yPosition = e.clientY - parentPosition.y - (dot.clientHeight / 2);
dot.style.left = xPosition + "px";
dot.style.top = yPosition + "px";
}
});
// Helper function to get an element's exact position
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
.container {
position: relative;
cursor: "crosshair";
}
#dot {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
display: inline-block;
background-color: red;
transform: translate(100, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<img width="200px" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/upwk62143495-wikimedia-image.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=218f80fbd029cd0fa69b8597ef4928c0" />
<span id="dot" />
</div>
</body>
</html>
Codepen
Your mouse click position (e.clientX and e.clientY) is relative to your browser's top-left corner that's why your click position is not accurate. You can study the details explanation in this article.
Move Element to Click Position
You need to stop the dot from stopping the click going through to the image.
You can use pointer-events for that.
Here's a simple example:
.container {
position relative;
display: inline-block;
width: 30vmin;
height: 30vmin;
}
img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.dot {
background: red;
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
pointer-events: none;
}
<div class="container"><img onclick="alert('I saw the click');" src="https://picsum.photos/id/1015/300/300">
<div class="dot"></div>
</div>
I have a report page, where I have my menus, my headers, footers, etc. However I would like to have an option that the report content can be enlarged to full window size (not full screen) with a transition. I'm experimenting with this example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zoom_hover
My main problem is I can't make it transition the movement too, not just the enlargement. It instantly jumps to the top left corner without any transition, while the 100% width and 100% height transition works.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
</body>
</html>
I've been searching for a solution, however most of the results are regarding full screen, and not full window.
By default the position property of .zoom is static, transition is not able to handle change of display type.
So you may need to set position: absolute; for .zoom and preset the position.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
position: absolute;
top: 120px;
left: 120px;
background-color: green;
width: 200px;
height: 200px;
}
.zoom:hover {
transition: all 1s;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
</body>
</html>
The issue is that you are changing the position to fixed and your top/left values are immediately considering thus the jump. Also I don't think there is a CSS solution to have a transition from the static position to the fixed position by specifying top/left only on hover. The rule of transtion is to have an initial value and a final value.
An idea here is to rely on some JS in order to set a the intial value of top/left values and allow the transition to work fine:
function getPosition(element) {
var xPosition = 0,
yPosition = 0;
while (element) {
xPosition += (element.offsetLeft + element.clientLeft);
yPosition += (element.offsetTop + element.clientTop);
element = element.offsetParent;
}
return {
x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
};
}
var e=document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left=pos.x+ 'px';
e.style.top=pos.y + 'px';
* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0!important;
left: 0!important;
position: fixed;
width: 100%;
height: 100%;
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
To be more accurate you need to adjust the values on the window scroll and window resize:
function getPosition(element) {
var xPosition = 0,
yPosition = 0;
while (element) {
xPosition += (element.offsetLeft + element.clientLeft);
yPosition += (element.offsetTop + element.clientTop);
element = element.offsetParent;
}
return {
x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
};
}
var e = document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
window.addEventListener('scroll', function() {
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
});
window.addEventListener('resize', function() {
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
});
* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0!important;
left: 0!important;
position: fixed;
width: 100%;
height: 100%;
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
So I have a chat UI that is a box where messages go, and at the bottom of the box of messages is a text input element. It works fine at the beginning, but once enough messages appear then the text input element scrolls up, along with the messages, and will not stay positioned at the bottom. How can I do this? Any useful thoughts would be appreciated.
<html>
<body>
<div id="chatui">
<div id="chatmsgs"></div>
<input type="text" id="chatbox">
</div>
</body>
</html>
Here is my CSS:
#chatui {
z-index:3;
position:absolute;
bottom:5px;
width: 380px;
height: 150px;
border: 3px solid #8AC007;
margin-left:5px;
overflow:auto;
}
#chatbox {bottom:3px;position:absolute;width:378px;}
#chatmsgs {position:absolute;}
Here is my Javascript:
This just says when you press "Enter" on your keyboard to display the text you typed into the "chatmsgs" div.
$(window).keydown(function(e){
if (e.keyCode == 13) {
if (document.activeElement.id == 'chatbox') {
var msg = document.getElementById('chatbox').value;
document.getElementById('chatbox').value = '';
var ms = '<p>'+msg+'</p>';
$('#chatmsgs').append(ms);
}
}
});
Check out this fiddle to see what I am talking about:
https://jsfiddle.net/ev3uymw6/
You have to add overflow:auto and appropriate height to the chatmsgs div, so that it doesn't grow beyond the size of chatui and make it scroll alltogether.
$(window).keydown(function(e) {
if (e.keyCode == 13) {
if (document.activeElement.id == 'chatbox') {
var msg = document.getElementById('chatbox').value;
document.getElementById('chatbox').value = '';
var ms = '<p>' + msg + '</p>';
$('#chatmsgs').append(ms);
}
}
});
#chatui {
z-index: 3;
position: absolute;
bottom: 5px;
width: 380px;
height: 150px;
border: 3px solid #8AC007;
margin-left: 5px;
}
#chatbox {
bottom: 3px;
position: absolute;
width: 378px;
}
#chatmsgs {
position: absolute;
height: 130px;
overflow: auto;
width: 378px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="chatui">
<div id="chatmsgs">
</div>
<input type="text" id="chatbox">
</div>
</body>
I'm new and learning to code a website!
I'm trying to do this hover header that when the user scroll down, it will remain on the screen and when the user reaches Sub-Header 1, it will hover it too and changes if the user reaches Sub-Header 2(Sub-Header 1 will then disappear)
This is what I'm working on http://goo.gl/KqAM2R
Thanks in advance!
http://i.imgur.com/flT3oJ1.jpg
You need to use JavaScript to achieve this effect. SSCCE:
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="NewFile.js"></script>
<link rel="stylesheet" type="text/css" href="NewFile.css"></head>
<body>
<header class="fixed-top">Europe</header>
<div class="much-text">doge</div>
<header class="whatever1 doge">Heatwave</header>
<div class="much-text">doge</div>
<header class="whatever2 doge">2k15</header>
<div class="much-text">doge</div>
</body>
</html>
NewFile.js:
function isElementInViewport (el, topOrBottom) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
if(topOrBottom == "top"){
return rect.top >= 0;
}else{
return rect.bottom <= $(window).height();
}
}
function onVisibilityChange () {
var headers = document.getElementsByClassName("doge");
var headerAbove = null;
for(i = 0; i<headers.length; i++){
$( headers[i]).css("position","");
$( headers[i]).css("top","");
if(!isElementInViewport(headers[i], "top")){
headerAbove = headers[i];
}
}
if(headerAbove != null){
$( headerAbove).css("position","fixed");
$( headerAbove).css("top","30px");
}
}
$(window).on('DOMContentLoaded load resize scroll', onVisibilityChange);
And NewFile.css
#CHARSET "UTF-8";
.fixed-top{
width:100%;
position:fixed;
top:0px;
background-color: red;
}
.whatever1{
width:100%;
background-color: green;
}
.whatever2{
width:100%;
background-color: blue;
}
.much-text{
height: 2000px;
}
.doge {
}
Thanks to authors of answers in How to tell if a DOM element is visible in the current viewport? for an inspiration. Also, I am aware that this code doesn't meet all good practices writing in js & css but OP clearly can find the idea from this one. Notice that you may need to sort headers (from the top header to the bottom header) in your own way before iterating on them in function onVisibilityChange
Try this...
HTML
<div id="page" class="page">
<div class="container">
<div class="contentheadercontainer">
<div class="fsh"><div class="firstheader">Sub header 1</div></div>
<div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 0px; margin: 0px;
}
.container{
height: 1000px;
}
.fsh{
position: absolute; width: 100%;
}
.firstheader{
height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}
Javascript
document.addEventListener("scroll", function(){
scrollDetect();
});
function scrollDetect(){
var html = document.documentElement;
var top = (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
if(top > 235){
document.getElementById('secondheader').style.position = 'fixed';
document.getElementById('secondheader').style.marginTop = '60px';
document.getElementById('secondheader').style.width='100%';
}else{
document.getElementById('secondheader').style.position = 'inherit';
document.getElementById('secondheader').style.marginTop = '300px';
}
}
Check out this JSFiddle