Is there any way how to add a child div into parent divs. The child div is still same (without changes) but content of parent div is variable. Parent div contains child div automatically like CSS div::before but with whole div in it not just text.
Basically for each parent automatically generate same child.
See figure
sample of parent and child divs
How can I make it via CSS ? (or JS)
CSS cannot generate content (as such) it can only style it.
If the element is not present in the HTML nothing will happen.
It is possible to add "pseudo content" with a pseudo element but the primary purpose of these pseudo-elements is enhancement not addition of "content". Also they cannot contain HTML.
It would be possible to use a pseudo element with a bg image in this instance as this is essentially styling.
JSfiddle Demo
div {
height:250px;
width:250px;
display: inline-block;
margin: 25px;
position: relative; /* required */
}
div:after {
content:"";
/* required */
position: absolute;
bottom:25px;
right:25px;
background-image: url(http://www.webdevelopersnotes.com/how-do-i/thumbs/shortcut-arrow.jpg);
height:75px;
width:75px;
background-size:cover;
}
.one {
background: red;
width:300px;
}
.two {
background: lightblue;
height:300px;
}
<div class="one"></div>
<div class="two"></div>
Not sure I understood your question so I will just give you a solution and then you comment your requirements.
You can have a div that contains another child div which is positioned inside the parent but does not change when you add more content to the parent.
Here is a fiddle:
http://jsfiddle.net/1fohx3qf/
.parent {
border:2px solid black;
padding:5px;
position:relative;
width:124px;
height:120px;
}
.child {
border:2px solid red;
padding:30px;
position:absolute;
bottom:5px;
right:10px;
}
It's not completely clear to me what the problem/issue is, but it sounds like you are looking for JS code like this:
var child = document.createElement('div');
child.innerHTML = '<p>Child!</p>';
var parent = document.createElement('div');
parent.innerHTML = '<p>Parent 1</p>';
parent.appendChild(child);
Related
I am loading html page inside a div with jquery. It does work fine.
var loginBtn = $("#loginBtn");
var loginPage = $("#login");
var submitBtn = $("#submitBtn");
var submitPage = $("#submit");
var checkBtn = $("#checkBtn");
var checkPage = $("#check");
loginPage.load( "login.html" );
submitPage.load( "submitPoints.html" );
checkPage.load( "checkPoints.html" );
body {
margin: 0 !important;
padding: 0 !important;
background-color: white;
}
#mainFrame {
width: 100%;
height: 300px;
background-color:cadetblue;
padding-top: 0;
margin-top: 0px;
position: relative;
}
<div id="mainFrame">
<div id="login"></div>
<div id="check"></div>
<div id="submit"></div>
</div>
My issue is that if the loaded html has no content, the margin between the parent document body (white) and the top of the loaded html (green) is none (that's what I want, it's ok).
However as soon as I add content to the loaded html, a gap is generated at the top of the page :\
I thought it was all about setting some line-height prop in the css but it seems helpless.
Any ideas what I am doing wrong ?
What you are seeing is the top margin of the first piece of content overflowing its container (also known more commonly as margin collapsing):
body {
background:yellow;
}
#container {
background:green;
height:300px;
}
<div id="container">
<h1>I have a top margin of 1em by default that is overflowing into the body.</h1>
</div>
If you give your container element a padding of that same amount, the margin space of the body won't be used and the element will be pushed down in the green area.
body {
background:yellow;
}
#container {
background:green;
height:300px;
padding:1em;
}
<div id="container">
<h1>I have a top margin of 1em by default that is now contained within my parent.</h1>
</div>
Or, you could set the top margin of the first piece of content to zero:
body {
background:yellow;
}
#container {
background:green;
height:300px;
}
#container > h1:first-child { margin-top:0; }
<div id="container">
<h1>My top margin has been set to zero.</h1>
</div>
Finally, you could set the overflow of the content area to auto but (although this seems to be the popular answer), I don't prefer this approach as you run the risk of unintended fitting of the content as the content changes and/or the container size changes. You give up a bit of sizing control:
body {
background:yellow;
}
#container {
background:green;
height:300px;
overflow:auto;
}
<div id="container">
<h1>The content area has had its overflow set to auto.</h1>
</div>
When you load new content it gets rendered in the document and those new elements might have properties. In this case, most probably the Login has a margin value. Another option is that it has a class or some selector that is being picked up by a CSS file which appends the margin to it.
Easiet way would be to right-click on the Login element, choose inspect, and analyze the style of the element with web-dev / style.
If you want to keep the margin on the inner content, you should set an overflow. Look what happens when we remove the overflow: auto line from .content > div (try clicking the box after running the code sample below).
This is because of margin collapsing. The margin on the inner content is combined with the margin on the outer element and applied on the outer element, i.e. two margins of the two elements are collapsed into a single margin.
document.querySelector('.content').addEventListener('click', (e) => {
e.target.classList.toggle('overflow');
});
html,
body {
margin: 0;
padding: 0;
}
.outer {
width: 200px;
background: red;
}
.content > div {
width: 100%;
height: 300px;
background: cadetblue;
cursor: pointer;
}
.content > div.overflow {
overflow: auto;
}
.test {
margin: 10px;
display: block;
}
<div class="outer">
<div class="content">
<div><span class="test">Test</span></div>
</div>
</div>
Here is my goal:
When the user hovers a div of class "item" another div of class "menu" should appear overlaying the "item" div.
The position of the "menu" div should be relative to the "item" div.
When the user unhovers the item "div" the menu div should disappear.
When the user mouses over the "menu" div the "menu" div the "menu" div should not disappear so that user can click a button in it.
I am looking for a JavaScript and CSS solution. If you can help but you can only post a JQuery solution I will still appreciate it but I will have to translate it to straight JavaScript.
So far I have tried:
To make the "hover" div an absolutely positioned child of the document.body. This works for positioning, but hovering the "hover" div unhovers the "item" div and I don't know how to figure out that the new hovered div is the "hover" div.
To make the "hover" div a absolutely or fixed positioned child of the "item" div. This places the "hover" div underneath the "item" div and style.top seems to have no effect on the "hover" div".
To make the "hover" div a relatively positioned child of the "item" div. This places the "hover" div within the "item" div and increases the size of the "hover" div, which I don't want.
Thank you for your help with this!
Here is a JSFiddle that is a starting point for a solution https://jsfiddle.net/ypn5f1ng/
HTML
<div id=content>
content
<div class=item>item 1</div>
<div class=item>item 2</div>
more content
</div>
CSS
body { background:green; }
#content { z-index:100; width:500px; position:absolute; left:0px; right:0px; margin-left:auto; margin-right:auto; background:white; margin-top:10px; background:lightblue; padding:5px; }
div.item { background:pink; margin:5px}
div.hover { background:yellow; height:15px; width:100px; z-index:101; position:fixed }
JavaScript
function getElem(event) {
if (!event) {
event = window.event;
}
var elem = null;
if (event.target) {
elem = event.target;
} else if (event.srcElement) {
elem = event.srcElement;
}
if (elem && elem.nodeType == 3) {
elem = elem.parentNode;
}
return elem;
}
var hoverDiv = null;
function onItemMouseOver(event) {
var elem = getElem(event);
if (!hoverDiv) {
hoverDiv = document.createElement('DIV');
hoverDiv.className = "hover";
document.body.appendChild(hoverDiv);
//elem.appendChild(hoverDiv);
hoverDiv.style.right=100;
hoverDiv.style.top=-100;
}
}
function onItemMouseOut(event) {
if(hoverDiv) {
hoverDiv.parentNode.removeChild(hoverDiv);
hoverDiv = null;
}
}
var items = document.getElementsByClassName("item");
for(var i = 0; i < items.length; ++i) {
var item = items[i];
item.onmouseover = onItemMouseOver;
item.onmouseout = onItemMouseOut;
}
fiddle
HTML
<div class='a'>
<div class="b">
asfdwa
</div>
</div>
CSS
.a {
position: relative;
width: 300px;
height: 300px;
background: lightgray;
}
.b {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 80px;
background: pink;
opacity: 0;
transition: .2s opacity ease-in-out;
}
.b a {
display: block;
margin: 1rem;
}
.a:hover .b {
opacity: 1;
}
The best approach is to use CSS only if possible (no JS).
In this situation, I would recommend to put the div you would like to display on hover into the div that is the trigger.
<div class="parent">
<div class="child">
...
</div>
...
</div>
Than the CSS would look like this:
div.child {
display: none;
}
div.parent:hover div.child {
display: block;
}
With this technique you can position the child even to get outside the parent and it will not disappear if you get out of the parent if you are still on the child since the child is technically (not visually) in the parent. You just need to make sure that the parent at least touches the displayed child since the child will disappear if you travel over the gap between them with your cursor (the cursor won't be on the parent nor on the child)
I have an h1 and h3 tag that will erase itself and type, using theater.js. The problem is that when it erases itself to empty, the height of the div it's in get smaller, then snaps bigger when it has content again.
I want to make the h1 and h3 tag (or change the tag completely) keep its height even while empty.
Any idea?
Just wrap your h2/h3 tag in a div with display: inline-block; like this:
<div class="header2"><h2>ABCD</h2></div>
and then add this to your css:
.header2 {
min-width: 100px;
width: auto;
min-height:45px;
background-color:#333;
color:#FFF;
display:inline-block;
padding:10px;
}
Here's a jsfiddle of two h2 tags with the above properties: https://jsfiddle.net/AndrewL32/e0d8my79/21/
two possible solutions:
1) you can set min-height to the div
For example:
div{min-height:50px;}
2) or to set min-height of h2 and p1 tags
h1,p1 {
min-height:5px;
}
Demo for 2nd approach :
h1{
background:yellow;
min-height:5px;
}
<h1></h1>
Note: as paulie_D mentioned, h1 ,p and div are block level elements by default
You may use a pseudo element to force an empty space within the element and swip it away with text-indent
h1.fixed:before {
content:' ';
display:inline-block;
width:1em;
}
h1 {
background:lightgray;
box-shadow:inset 0 0 0 1px;
}
h1.fixed {
text-indent:-0.8em; /* swip off the pseudo element */
}
<h1 contenteditable="true"></h1>
<h1 class="fixed" contenteditable="true"></h1>
else, use the :empty pseudo-class
h1:empty:before {
content:'|';
}
<h1 contenteditable="true"></h1>
Is there a way to make these two textareas that are floated next to one another always be the same height. The height of their container, which expands when one of them is resized. I've tried putting them in a container div and setting their height to 100%. I've tried making a jquery function to resize them (you can see it commented out in the fiddle) which failed.
http://jsbin.com/IkESUli/6/edit
How can I make them always the same height after a resize?
textarea{
min-height:150px;
float:left;
display:inline-block;
overflow:auto;
}
#t2{
width:30px;
overflow:hidden;
text-align: right;
white-space:nowrap;
}
div.container{
min-height:150px;
border:1px solid black;
display:inline-block;
}
This will works:
$(".t").mouseup(function(){
$(".t").not($(this)).css("height", parseInt($(this).css("height"),10));
});
You could use mousemove instead of mouseup for "real time" effect.
try setting textarea's height to 100% and container's height to 150px. when textarea is in 100% it will automatically fits into your parent div's height, hope this helps.
textarea {
height: 100%;
width: 100%;
display: block;
}
div.container{
height: 150px;
min-height:150px;
border:1px solid black;
display:inline-block;
}
You can use javascript to implement the following scenario. Once the parent element changes its dimentions, for instance, height, you call the functios (ES6 Javascript version):
const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {
document.querySelectorAll(someTextareaSelector)[0].style.height =
document.querySelectorAll(someParentElementSelector)[0]
.getBoundingClientRect().height + "px"
}
const someTextareaSelector = '...'
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)
i have a global class for an html
<div class="wrapper">
<div class="content"></div>
</div>
and the CSS is
.div { width:auto; display:block }
.content { width:100px; height:50px; }
On the .content div, i do not need "display:block" class. But Its applying on Runtime.
i Have given dispay:inherit; but it doesn't work. Is there any Other Way for Removing the Display Style ?
.div { width:auto; display:block }
this might not be working....for the above provided html cos there is not div named class
what you can do is
.content { width:100px; height:50px; display:inline}
.content { width:100px; height:50px; display: inline; }
or another display property
You can just do:
.content { width:100px; height:50px; display:inline }
//or display:none or whatever your standard default is
inline is what the value is by default, see MDN Ref.