Is there any way to use CSS pointer-events to apply only to the text e.g. in a div? This seems to work with SVGs but is there also a property to apply to regular text elements only?
This is what I am trying to achieve:
<div style="width: 500px; height: 500px">
Fire only when this text is clicked!
<p><!--Don't fire in this space--></p>
Fire here too!
</div>
I do not want to create a child in the parent div to capture the event.
Thanks in advance!
Put it in a <span> and apply your css to it
.mousePointer{
cursor: pointer;
}
<div style="width: 500px; height: 500px">
<span style="cursor: pointer;">
Fire only when this text is clicked!
</span>
<p><!--Don't fire in this space--></p>
<span style="cursor: pointer;">
Fire Here
</span>
</div>
Or
<div style="width: 500px; height: 500px">
<span class="mousePointer">
Fire only when this text is clicked!
</span>
<p><!--Don't fire in this space--></p>
<span class="mousePointer">
Fire Here
</span>
</div>
Could something like this work?
div {
pointer-events: auto;
}
div p {
pointer-events: none;
}
Or select all children like
div * {
pointer-events: none;
}
I'm not sure on your situation, but a little more html like a span tag would help keep things a little cleaner.
First, there is no text node selector in CSS.
So if you don't want to add any children in your parent div, you would have to exclude all other children. For example:
<div>
No pointer events here
<div class="other-class1"></div>
<div class="other-class2"></div>
<p></p>
No pointer events here
<div>
Your selector would be something like:
div{
pointer-events: auto;
}
div:not(.other-class1):not(.other-class2):not(p){
pointer-events: none;
}
Related
I wrote the following code:
<div class="slider-button-next slider-btn"> < </div>
<img src="images/pic02.jpg" alt="" data-position="center center" />
<div class="slider-button-prev slider-btn"> > </div>
I want the users to click on the left/right buttons in order to switch between images. Currently I have only one image pic02.jpg. How can I change the image displayed, without JS? (For example, changing to pic03.jpg when pressing right and changing to pic01.jpg when pressing left and so on). I'm planning to use hosting services to host my static website so as I understand, I can't use JS.
If you're careful about where you position your elements you can do this:
#mycheckbox~.images img:first-child {
display: none;
}
#mycheckbox:checked+.images img:last-child {
display: none;
}
#mycheckbox:checked+.images img:first-child {
display: unset;
}
<input id='mycheckbox' type='checkbox'> Click me
<div class='images'>
<img src='https://picsum.photos/id/237/200/300'>
<img src='https://picsum.photos/id/433/200/300'>
</div>
The :has() pseudo class is on it's way (it's not in Firefox yet - check caniuse.com but it's coming) and this allows you lots of flexibilty:
.images img:first-child {
display: none;
}
body:has(#mycheckbox:checked) .images img:last-child {
display: none;
}
body:has(#mycheckbox:checked) .images img:first-child {
display: unset;
}
<input id='mycheckbox' type='checkbox'> Click me
<p> Lots of content here</p>
<div class='images'>
<img src='https://picsum.photos/id/237/200/300'>
<img src='https://picsum.photos/id/433/200/300'>
</div>
You'd have to look at your slider element to see how it's been rendered in the DOM to see if it's an underlying check box or other input and change the rules accordingly.
I've had a look at related answers but none are what I am looking for... I think. Apologies if I am duplicating a question.
This HTML is used many times on a page, within a product box and is displayed on a product category page.
<div class"all-buttons-container">
<div class="button1-container">
<a class="button1">text</a>
</div>
<div class="button2-container">
<a class="button2 **hidden**">text</a>
</div>
</div>
In this (much simplified) HTML I have a container which houses 2 siblings.
- Each sibling contains an anchor.
The button containers are always visible.
Sometimes, the .button2 anchor also has the bootstrap class of hidden so the anchor is no longer displayed. This is done in each of the product boxes depending on the need to have the second button for that product. I am not in control of this.
When the .button2 anchor has the hidden class I need to add some margin-top to button1-container to vertically center it
I was going to use pure style (flexbox) but it wasn't achieving what I needed.
I would like to run a little jQuery or pure JS every time the page finishes loading which adds some the top margin, if required, on each instance of this HTML. I don't like having to do this but will need to if I cannot find another simple way of controlling it.
Any thoughts... solutions... perfect solutions etc?
Thanks in advance!
cheers
wayjo
I suppose I've fully understood your question.
You can achieve this without JS, in a cleaner any.
Why not make a custom class of button2-hidden and attach it to all-buttons-container?
<div class"all-buttons-container button2-hidden">
<div class="button1-container">
<a class="button1">text</a>
</div>
<div class="button2-container">
<a class="button2">text</a>
</div>
</div>
Then you have this CSS:
.button2-hidden .button2-container{
display: none; // or visibility -- whatever you want
}
.button2-hidden .button1-container{
margin-top: 1rem;
}
If you can add a div to contain the buttons, than you can use the snippet below:
.all-buttons-container{
display: flex; /* important part */
align-items: center; /* important part */
padding: 10px;
background-color: grey;
width: 200px;
border: 2px solid #fff;
height: 150px;
}
.hidden {
display: none!important;
}
.all-buttons-container > div a{
display: inline-block;
background-color: blue;
padding: 7px;
margin: 7px;
color: #fff;
}
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1">button1</a>
</div>
<div class="button2-container">
<a class="button2">button2</a>
</div>
</div>
</div>
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1">button1</a>
</div>
<div class="button2-container">
<a class="button2 hidden">button2</a>
</div>
</div>
</div>
<div class="all-buttons-container">
<div class="very-important-div">
<div class="button1-container">
<a class="button1 hidden">button1</a>
</div>
<div class="button2-container">
<a class="button2">button2</a>
</div>
</div>
</div>
Here is the sample code. I want to disable the click outside the search id. Just like we need in pop-up to disable outside click
<body>
You can search here
<div id="search">
Search
<input type="text" name=search><button>search</button>
</div>
</body>
You can create a div with fixed position that spans the entire screen and place what you want to be able to click inside of it, making all the clicks outside that element actually be on that "empty" div.
.disable-outside-clicks {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
}
.enabled-clicks {
width: 200px;
margin: 0 auto;
}
<div>
<button>This button will not work</button>
</div>
<div class="disable-outside-clicks">
<div class="enabled-clicks">
<button>This button will work</button>
</div>
</div>
You can use the :not() CSS selector combined with the .preventDefault() JS function :
$('*:not(#search)').click(function(e){
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I don't work !
<div id="search"></div>
maybe the css property pointer-events is the thing you are looking for.
add a class to the body element if the pop up is opened. let's say you will add the class .popup to the body element if the pop up is visible. then you can do it like this in css:
body.popup *:not(#search) {
pointer-events: none;
}
this means, that every element (*) in the body element with the class .popup, except the element #search is not clickable.
I have a web application with a lot of <div> used for layout. Now I need to add some tables drown by a library. The issue is that the library creates a lot of <div> with their own style and depending on the position they collide with styles already in place for <div> in that position.
This is the (very) simplified html structure where [myTableDataSource] identify the element with the table.
<div id="id1">
<div>
<div myTableDataSource="xxx"></div>
</div>
<div id="id2">
<div myTableDataSource="yyy"></div>
</div>
<div id="id3">
<div>
<div>
<div myTableDataSource="zzz"></div>
</div>
</div>
</div>
</div>
My idea is to avoid applying style on <div> that are descendant of [myTableDataSource]but... How can I do? Is there a selector to get all <div> element not descendand of a [myTableDataSource] attribute?
Please consider that I have a style for all <div> descendant of #id1, of #id2, #id3 [...] and I can't change this, but only modify selector to avoid conflicts.
What about using attributes and the .not() selector?
Something like this is a start:
#id1 div:not([myTableDataSource="xxx"]) {
background: orange;
padding: 30px;
width: 200px;
height: 200px;
}
div[myTableDataSource="xxx"] {
width: 100px;
height: 100px;
background: grey;
}
To ignore descendants (not tested):
#id1 div:not([myTableDataSource="xxx"]):not(div[myTableDataSource="xxx"] div){ ... }
I have something very simple but I can not make it work correctly in Webkit and Mozilla
This is my HTML
<li style="padding-bottom: 10px;" class='product'>
<span class ='handle' style="cursor:move; float:left; margin-top:40px; margin-right:8px; margin-bottom:30px; display:none;">
<%= image_tag "page/arrow.png"%>
</span>
<table >
<tr style="border:5px; solid: #444">
<td class="product_contents" style="vertical-align: top;" >
<div class="product_contents" style="width: 480px; font-size: 100%; font-weight: bold; color: #333; margin-bottom: 10px; word-wrap: break-word; overflow: auto;">
STUFF HERE
</div>
<p class="product_contents" style="width: 480px; font-size: 93%; line-height: 150%; word-wrap: break-word; overflow: auto;">
MORE STUFF HERE
</p>
</td>
</tr>
</table>
</li>
And this is my JQuery:
jQuery(function($) {
$(".product").mouseenter(
function () {
$(this).find(".handle").css('display', 'inline'); //show();
$(this).css('background-color','#fffdef');
$(this).find(".product_contents").css('width', '450px');
});
$(".product").mouseleave(
function () {
$(this).find(".handle").css('display', 'none'); //.hide();
$(this).css('background-color','#ffffff');
$(this).find(".product_contents").css('width', '480px');
});
});
Nothing fancy here at all and it works as I expect in Firefox. The image in handle appears on the left and it displaces the content to the right, the content also change colors and size to match the image. PErfect.
But in Webkit it changes the color and the size but there is no displacement. What I want to achieve is pretty basic, there is a better approach?
I can use Jquery but I can not use any plugin.
I'm not sure if I understood your problem right, but I would recommend to try jQuery's show/hide functions:
$(this).find(".handle").show();
$(this).find(".handle").hide();
This one works for me in Firefox, and fails for Conkeror (which was surprising), and fails for SRWare Iron (which is a Chrome-based browser).
The problem seems to be related to the fact that the table is inside a <li> element. For some reason, Firefox treats this table as an inline element, and the other browsers as a block element. Since it is a block element, the table is pushed to the next line, and is not displaced, because the handle is on the previous line. Changing the display style of the table to inline-table fixed the issue for me.
You can hide an element by using the CSS display property and setting it to none.
$("element").style.display = "none"; // hide element
$("element").style.display = "block"; // show element (or inline)