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){ ... }
Related
I have a main <div> with many other divs inside like this:
[HTML]
<div class="container">
<div class="row">
<div class="col">
<div class ="deleteMe">
delete me
</div>
</div>
</div>
</div>
I want to remove the div with class name "deleteMe", i tried to remove it by using ,find() method from jquery:
$('.container').find('.row').find('.col').find('deleteMe').remove();
or
$('.container').find('.row').find('.col').removeClass('.deleteMe');
But didn't work, what is the best way to remove it?
here is the fiddle link test this exemple:
fiddle
//$('.container').find('.row').find('.col').find('deleteMe').remove();
$('.container').find('.row').find('.col').removeClass('.deleteMe');
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.deleteMe {
border: solid 1px #6c757d;
padding: 10px;
background: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<div class="deleteMe">
delete me
</div>
</div>
</div>
</div>
You do not need jquery for the job, see the following code snippet ( The setTimeout wrapper delays the deletion by 1s and only serves to see what is happening.
setTimeout ( () => {
document.querySelector(".deleteMe").remove();
}, 1000);
<div class="container">
<div class="row">
<div class="col">
<div class ="deleteMe">
delete me
</div>
</div>
</div>
</div>
Given your original code, you might want the selector to be more specific:
document.querySelector(".container > .row > .col > .deleteMe").remove(); // Adjacent sub-selectors reference elements in a parent/child relation
document.querySelector(".container .row .col .deleteMe").remove(); // The elements are in a ancestor/descendant relation, not necessarily child/parent
Try this
$(".container .deleteMe").remove();
below line will do
$( ".container .row .col .deleteMe" ).remove();
There is a little typo in your code: a . is missing before deleteMe.
$('.container').find('.row').find('.col').find('.deleteMe').remove();
correctly.
Another thing: removeClass don't remove an element with the specified class; It removes the specified class from the element.
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>
I'm trying to use the slot API in this example:
<tabs-s>
<tab-c>
<tab-c>
</tabs>
where tabs-s is the component that wraps other components.Inside it I'm using the tag to render its dom but if I want the assigned nodes I also get the whitespaces (text nodes).
Is there a manner to avoid getting the text nodes when calling assignedNodes() method? This was not happening in Polymer 1.x
Thanks
Let say you want to create a featured section to present new items
the section needs to have some basic information and change colors.
The element will take the title, count and class from his parent
<featured-section class="blue">
<span slot="count">3</span>
<h1 slot="title">The title of the element go here</h1>
</featured-section>
Inside the element featured-section
<dom-module id="featured-section">
<template>
<section>
<div class="vertical-section-container">
<div class="circle-container">
<div class="circle">
<slot name="count"></slot>
</div>
</div>
<slot name="title"></slot>
<feature-box></feature-box>
<feature-grid></feature-grid>
</div>
</section>
</template>
But who is in charge of the class detail? The element itself featured-section
<custom-style>
<style include="shared-styles">
:host {
display: block;
background-color: var(--my-section-color);
}
:host(.blue) {
--my-section-color: #03A9F4;
}
:host(.green) {
--my-section-color: #8BC34A;
}
:host(.pink) {
--my-section-color: #FF6EB6;
}
::slotted(h1) {
color: #fff;
padding-bottom: 1.5em;
line-height: 48px;
}
</style>
</custom-style>
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;
}
When using jQuery's $.animate() on a display:table, spatial dimensions not specified to change will animate.
fiddle
In this case, width is specified, but height isn't, yet height jumps around. In this case, how can a display:table's height be kept from visually changing?
html
<div style="display:table; height:40px;">
<div style="display:table-row">
<div class="cell">
Short text
</div>
<div class="cell cellToAnimate">
Really long text
</div>
<div class="cell cellToAnimate">
Really, really, really long text
</div>
</div>
</div>
<div>
<button type="button" id="cellChanger">Change cells</button>
css
.cell{
display:table-cell;
}
js
$(document).ready(function () {
$('.cellToAnimate').hide();
$("#cellChanger").click(function(){
$('.cellToAnimate').stop(true,false).animate({
width: 'toggle',
opacity: 'toggle'
});
});
});
style a container with
display: block;
height: 40px;
overflow: hidden;