Internet Explorer cursor: auto - javascript

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;
}

Related

How to stack elements without using z-index

I have this code:
<nav>
<div class="slider" id="slider"></div>
<div class="titleGroup">
<h2 onclick="selectArticles()" id="articlesButton" class="active">Articles</h2>
<h2 onclick="selectSocial()" id="socialButton">Social</h2>
</div>
</nav>
I need to make the slider appear on top of titleGroup but under its h2 childs, is there a way to do it using javascript? Making the h2s appear on top of everything would work too.
I tried doing it with z-index but obviously it doesn't work because z-index is relative to the parent.
Since you asked for JavaScript solution... you can prepend it to be the first child of the .titleGroup. But of course a better approach would have been to fix the HTML or try with z-index.
titleGroup.prepend(slider)
.titleGroup {
background: red;
height: 150px;
}
h2 {
position:relative;
background: black;
}
.slider {
opacity: 0.5;
background: yellow;
height: 100px;
width: 100%;
position: absolute;
}
<nav>
<div class="slider" id="slider">I am slider</div>
<div class="titleGroup" id="titleGroup">
<h2 onclick="selectArticles()" id="articlesButton" class="active">Articles</h2>
<h2 onclick="selectSocial()" id="socialButton">Social</h2>
</div>
</nav>
It's actually possible to solve your current problem using z-index and no JavaScript
(assuming you're not doing something funny with your titleGroup).
nav{
position:relative;
}
.titleGroup {
background: red;
height: 150px;
border: 1px solid yellow;
}
#slider{
z-index:1;
position: absolute;
top: 5px;
background: green;
color: white;
height: 80px;
left: 5px;
width: calc(100% - 10px);
padding: 5px;
box-sizing: border-box;
}
#slider::before{
content: "Slider in front of titleGroup background, but behind h2"
}
h2 {
position: relative;
background: cyan;
z-index: 2;
}
<nav>
<div class="slider" id="slider"></div>
<div class="titleGroup" id="titleGroup">
<h2 onclick="selectArticles()" id="articlesButton" class="active">Articles</h2>
<h2 onclick="selectSocial()" id="socialButton">Social</h2>
</div>
</nav>
Note that .titleGroup has no special value for position (or z-index for that matter), so no new stacking context is created.
(And if a css statement somehow affects your titleGroup element’s position property, you can use position:unset or position:static)
More about stacking context: Link1 (The stacking context
)
The following has an example where elements that are not siblings can be controlled just using z-index: Link2 (Stacking context example 1
)
In my example, h2 and #slider are not siblings, but since .titleGroup has no stacking context, in effect the behavior of z-indexes is comparable that of siblings.
Also note that this fails if your .titleGroup has opacity value less than 1, as it creates a new stacking context, and similarly if you have a special filter, etc. (described in the first link).

how to get Cursor Invisbile or change focus in out of DIV

I want cursor to be active only inside div and invisible outside of this div. How to do this?
I am using jQuery drag and drop functionality. When I drag its move all over the browser. I need to fix some particular height and width drag works only the particular fixed size how to do this?
Set cursor:none to body, html and cursor: default on your div
body,html{
cursor: none;
}
#cursor{
cursor: default;
background: red;
width: 100px;
height:100px;
position:absolute;
top:20px;
left:20px;
}
<div id="cursor">
</div>
a solution would be the following:
css
div {cursor: auto }
* { cursor: none; }
However, how would the user find the div if they cannot see the pointer???
body {
cursor: none;
}
div {
cursor: auto;
}
should do the trick!
The CSS property that can be used is:
element.style {
cursor: none;
}
Here is sample code
.nocursor {
cursor: none;
padding: 2em;
border: 1px solid red;
}
<div class="nocursor">
When you mouse hover in div class,cursor will be hide
</div>

Hover state does not work when applying z-index

The problem is I have 2 divs: one container a link and another a box shaped container. The link has a position:fixed; and it flies over the container div, so I tried to give the link a z-index with a negative value, turns out the
hover state does not work when applying z-index with a negative value for the anchor Unless I scroll the same amount of the height of the container div. So I scroll like 3 times and the hover state works again.
HTML
<div id="div-1">
<div class="container"></div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
</div>
CSS
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:0;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
an important thing is:
The container is hidden by Jquery, unless I click a certain button.
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
I have resorted to every possible (other ideas) I could think of. I tried to do the opposite meaning giving the container a z-index positive vales and leave the anchor, but that leaves the same problem
update
I will try to change the css property "z-index"but only when the the container button is toggled on
so the link will have z-index:-9; but only when the container is toggled to be viewed and when it is toggled back off the z-index will be removed or not applied.
I can't really figure how this will be written with jquery I tried this
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
$("#div-2 a").css("z-index", -9);
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
this only result when I toggled the container on the z-index will be applied, but when i toggle it of it remains, how to remove the z-index or make it equal to z-inedx:99; when the container is toggled off?
Only any other answer for the problem is appreciated.
It's not clear what you want exactly, but the pics helped, although it appears that you want the link above the container, it looks as if you don't?
the whole purpose is to make the anchor in a lower index, so when the container is toggled on/ viewed, the link won't be setting on top of the container.
But you want the link to always react when hovered upon. So I assume that you can't figure out why it's not hovering when the container is open and you can still see the link, so logically you'd expect to at least be able to hover over the visible portion of the link.
It's not jQuery and it's not the .container. It's the .container's container A.K.A. #div-1. #div-1 width is always 100% and even if you didn't have that style, it would be 100% still because that's what blocks have if there isn't an explicit width assigned to it.
Solution: Give #div-1 a smaller width.
You have a fixed link yet no coords. You can't expect a fixed element to stand it's ground and behave like a fixed element if it doesn't know where to stand. Also if you have any positioned elements and you want interaction between other elements, make those elements positioned as well, div-1 is now position:relative and the z-index properties of the link and div-1 function correctly now.
Solution: Give #div-2 a top and left or right and bottom properties. Give #div-1 a position property so that the z-index functions properly.
All details are commented in the source.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
#div-1 {
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
position: relative;
z-index: 1;
border: 1px solid red;
width: 200px;
/*Enable this and it will block link*/
/*width:100%;*/
height: 290px;
}
.container {
/* This saves you an unnecessary step in jQuery */
display: none;
width: 200px;
height: 290px;
background: orange;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
position: fixed;
font-weight: 500;
font-size: 1.09em;
text-align: center;
background-color: none;
text-decoration: none;
outline: none;
/* It's not clear whether you want the link above or
| below the container. If above, simply change to
| z-index: 2
*/
z-index: 0;
/* If you have a fixed element give it coords, otherwise
| it doesn't know where it should stand and behavior
| will be unexpected.
*/
top: 10%;
left: 125px;
}
#div-2 a:hover {
background: red;
color: white;
}
/* FLAG is just to test the accessibility of the link */
#FLAG {
display: none;
}
#FLAG:target {
display: block;
font-size: 48px;
color: red;
}
</style>
</head>
<body>
<button id='button-f'>F</button>
<div id="div-1">
<div class="container">Container is open</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
<span id='FLAG'>This link is accessible now!</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/* This is the jQuery you need to accomplish what you want.
| The rest was redundant and unnecessary.
*/
$(document).ready(function() {
$("#button-f").click(function(e) {
$(".container").toggle();
});
});
</script>
</body>
</html>
Have you tried assigning a z-index to #div-2?
You'll need to assign it a position to be able to give it a z-index. Try this:
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:2;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
position: relative;
z-index:1;
}
I don't know what actually in your code but the js you provide look at the if section you have (##button-f) so we find an error here and do we actually need this line ??like we also don't need the line 'container'.hide() in JS. Now you have to scroll for the 'a' certain height because yous set height for #div-1 which is not hidden. So that's amount of height you have to scroll.
So What I change on your code
1. cut the height of div-1 and place it to .container class. you dont provide the a:hover class so I add that to and remove some unnecessary css you have. If you have any other Question ask me in comment LIVE ON FIDDLE
$(document).ready(function() {
$("#button-f").click(function() {
$(".container").toggle();
});
});
button {
width: 13%;
height: auto;
}
#div-1{
width:100%;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
.container {
height:290px;
display:none;
border: 1px solid red;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
positon:fixed;
float:right;
font-weight: 500;
font-size: 1.09em;
text-align: center;
text-decoration: none;
border-radius: 10px;
}
#div-2 a:hover {
background: black;
color: white;
}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<button id="button-f">
button
</button>
<div id="div-1">
<div class="container">tagasdgasdgasdgas</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
<a href='#'>This is a link</a>
</div>
</body>

Hide element if mouse leaves parent

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>

Placing a clickable element inside a clickable container element

I'm trying to make the #header div clickable by wrapping a link element around it, but I cannot do it when it already has another image link inside the div. How would I fix this?
#header {
border: 1px solid red;
background-color: red;
}
img {
width: 50px;
height: 50px;
}
<a href = 'index.php'>
<div id = 'header'>
<a href = 'profile.php?username=$username'>
<img src = 'https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a>
</div>
</a>
Now while the image link works just fine, the #wrapper div is not clickable.
#header {
border: 1px solid red;
background-color: red;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
height: 50px;
}
#header a:first-child {
display: block;
height: 100%;
}
#header a:last-child {
position: absolute; /* image now independently clickable */
top: 0; /* position image anywhere you want inside #header */
left: 0;
}
img {
width: 50px;
height: 50px;
}
<div id='header'>
<a href='index.php'></a>
<a href='profile.php?username=$username'>
<img src='https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a>
</div>
NOTES:
If you wrap a hyperlink inside another hyperlink, how is the browser supposed to know which link to execute?
Instead, make the #header element entirely clickable, and absolutely position the image.
Now the image can be clicked separately and positioned anywhere inside the #header element.

Categories