Hide element if mouse leaves parent - javascript

I have two divs, the parent is let's say 100*100px small. When the user hovers the parent, a small popup with the content appears (absolute positioned to one side). This div is like a tooltip, and a child of the 100px div. Now, when the user leaves the parent div, the child should be hidden - even if the mouse leaves the parent 100px * 100px area.
How can I achieve this?

You can easily assign css styles to an element on parent's :hover
.tooltip {
display: none;
}
:hover .tooltip {
display: block;
}

For this solution I'm using JQuery
$('#parent').on('mouseleave', function() {
$('#child').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">Child Text</div>
Parent Text
</div>

Check below example.
#parent {
width: 100px;
height: 100px;
background-color: palegreen;
}
#child {
position: absolute;
display: none;
background-color: green;
color: white;
}
#parent:hover #child {
display: block;
}
#parent:hover #child:hover {
display: none;
}
<div id="parent">
<div id="child">
some content for the popup
</div>
</div>

Related

Absolutely Positioned elements Affecting Another elements on delete

I have more than one div that is positioned absolute and dynamically created by clicking on a button. Once clicked, they are placed in a container that is positioned relative, and I have a button on each div that when clicking on it, will delete the div, the problem is when deleting the div, it will affect the others positions.
function create() {
var $home = $('<div class="cabine"></div>');
$("#container").append($home);
}
.cabine { /*class that all div's share*/
position: absolute;
top:5%;
left:10%;
width:135px;
height:135px;
float:left;
background: red;
}
#container { /* Where the div's are placed*/
position: relative;
background-image: url(wall.jpg);
background-color: #FFFFFF;
border: 1px solid #000;
width: 100%;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="create()">Create Cabine</button>
<div id="container"></div>
In html you have #container instead of .container.

How to disable background div scroll temporary while the front div can still be scrolled?

I have 2 div, one in the front and one in the back. The front will popup only when the button was pushed. If the front div isn't displayed, the background div can be scrolled. In the contrary, if the front div is displayed, the background div scroll will be disable. But the front div can still be scrolled.
I have tried using css by applying no-scroll css to the background div.
.no-scroll {
position: fixed;
overflow: hidden
}
But every time I applied no-scroll class to the element, it will bounced back top the top.
I also followed
this article
But it disable the entire window scroll and also the font div too. Any suggestion?
I think you should wrap both divs in a container and the toggle class on that. Something like this
var btn = document.querySelector('button'),
wrapper = document.querySelector('.wrapper');
btn.addEventListener('click', function(){
wrapper.classList.toggle('modal-is-visible');
});
html, body { height: 100% }
.wrapper {
height: 500px;
overflow: scroll;
border: solid 2px black;
padding: 2rem;
}
.lower_div {
background: red;
width: 100%;
height: 600px;
position: relative;
}
.modal {
display: none;
height: 20px;
width: 100%;
position: absolute;
z-index: 2;
background: tomato;
}
.modal-is-visible .modal { display: block;}
.modal-is-visible.wrapper { overflow: hidden; }
<button>
toggle
</button>
<div class="wrapper">
<div class="lower_div">
<div class="modal">
</div>
</div>
</div>
You could try adding an event listener on your background div on the event "blur" to trigger a style change so it puts your "overflow: hidden" style on the block.
You could also use a z-index to prevent the background div from coming back to front, just put a higher z-index to the front div and it should be good.

Internet Explorer cursor: auto

I have a wrapper div that contains all of my content. I want this wrapper div to have a cursor: pointer because it's clickable, but I don't want the content inside the wrapper to have that cursor pointer:
So I set the wrapper to cursor: pointer, and the content div to cursor: auto, and it works fine...in everything except Internet Explorer (I'm using IE11). The problem in IE is that cursor: auto doesn't reset the cursor to its default state for each element, but instead sets it to the parent's cursor setting. (see cursor:auto behaviour in IE 8 and 9). So in IE, I always see a pointer and it makes it seem like the whole page is clickable.
The problem with the solution in the answer I linked to is that even if I set the content area to have cursor: default, which turns the pointer cursor to a normal cursor, when I hover over text I don't get a text cursor, rather a normal, default one. Is there any obvious solution to this problem aside from specifying each element manually inside the content div to have its default cursor? In other words:
.wrapper {
cursor: pointer;
}
.content {
cursor: default;
}
.content p, .content h1, .content h2.... {
cursor: text;
}
.content a {
cursor: pointer;
}
etc.....
Just change your layout like this, see fiddle https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/45/
html
<div class="wrapper">
<a href="#">
<div class="left">
</div>
</a>
<div class="middle">
</div>
<a href="#">
<div class="right">
</div>
</a>
</div>
CSS
.wrapper {
width: 100%;
height: 100vh;
}
.left,
.right {
width: 150px;
height: 100%;
float: left;
background-color: blue;
}
.middle {
width: calc(100% - 300px);
height: 100%;
float: left;
background-color: gray;
}
you can use the * selector:
.content > * {
cursor: default;
}

Centering Dynamic width Divs

I have a page that has 2 columns. The first column is a dynamic width. It contains a bunch of tabular data in tables. The 2nd column is a fixed width full of navigation stuff.
The 2 columns are divs with float left. I need to accomplish 2 things.
I need to center the 2 divs on the page. For example, if the first div is 600px wide as dictated by the data inside of it and the second div is a fixed 200px, the centering point is 400px.
I don't want the 2nd div to wrap down if the browser window is resized.
I'm thinking that I may have to nest the 2 divs inside of another div, set the parent div width using javascript, then center it.
I created this fiddle to help illustrate. http://jsfiddle.net/darthg8r/uhKdt/
Surround them with a div and set its style to:
width: ( whatever you need )
margin: 0 auto; // this centers the div
You can set the width dynamically with JavaScript if needed. As long as it's smaller than 100% of the surrounding container, it will stay centered.
You could achieve this with the following code:
HTML:
<div id="wrapper">
<div id="container">
<div id="variable">test</div>
<div id="fixed">test</div>
</div>
</div>
CSS:
#wrapper { overflow: hidden; }
#container {
float: left;
position: relative;
left: 50%; }
#container > div {
float: left;
position: relative;
right: 50%;
height: 300px; }
#variable {
background: red;
width: 300px; }
#fixed {
background: blue;
width: 200px; }
Preview: https://jsfiddle.net/Wexcode/mreLt/
You could also achieve this effect by wrapping the two elements in a container, setting them both to display: inline-block, and finally setting their container to have text-align: center.
The answer is a little more complicated than this, so let me know if you want to choose this route instead.
To make it so the elements don't fall to the next line, use inline-block.
<div id="container">
<div id="variable">
<p>test</p>
</div><div id="fixed">
<p>test</p>
</div>
</div>
CSS:
body { margin: 0; }
#container {
color: #fff;
text-align: center;
white-space: nowrap; }
#container > div {
height: 300px;
display: inline-block; }
#variable {
background: red;
width: 100px; }
#fixed {
background: blue;
width: 200px; }
Preview: https://jsfiddle.net/Wexcode/mreLt/2/

Div height does not resize when add more content

I'm trying to build a kind of tag-cloud.
I've a div (the tag container) in which dinamically I add span nodes (the tags).
span nodes are default inline elements, so if I've set their display property do display:block, to prevent that they will overflow the div horizontally.
I've also set their float property to float:left since I want that they're disposed near on the same line and if line is full tthey automatically go to the next line.
The problem now is that, the tags overflow vertically on the bottom. The tag container does not resize its height to contain all the tags inserted. How could I fix this problem?
EDIT
Here is the fiddle. http://jsfiddle.net/Vk92s/1/
As you can see, if a comment float: left, the div automatically resize, but all the tags dispose on a new line.
At opposite, if i add the float: left, the tags wrap correctly, but div does not resize.
Here's a fiddle.
You can set overflow to hidden, like below:
<div id="test">
<span>first</span>
<span>second </span>
<span>third </span>
<span>fourth </span>
</div>
#test
{
border: 1px solid black;
width: 100px;
overflow: hidden;
}
span
{
float: left;
}
In your tag container div, add this css rule:
overflow: auto;
This will make it expand to contain its floated content.
Edit:
A fiddle: http://jsfiddle.net/5AgxU/
Try adding a div that has clear: both set under all of your elements.
Working Demo
HTML
<div id="tag-cloud">
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<span class="tag">example</span>
<div class="clear-both"></div>
</div>
CSS
.tag{
display: block;
width: 98px;
background-color: red;
margin-right: 2px;
float: left;
}
.clear-both{
clear: both;
}
#tag-cloud{
width: 300px;
background-color: black;
}
Rather than adding an empty element that clears your float, my preference is to use the following on the parent element so you don't pollute your markup.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
overflow: visible;
}

Categories