The problem
Given a jQuery selection of one element (.context), how can I select into it:
the elements that are not child/grandchild of a specific class (e.g. .paragraph) [the class can have deeper nested levels of itself, like .paragraph .paragraph]
the child/grandchild elements with a certain set of tags (e.g. strong | i)
Notes
.context can be descendant of another .context or another .paragraph.
the elements I want to selects can be identified by [data-hint^="I want"] selector (obviously the data attribute is not present in the real scenario).
I don't want just the direct children of .context but also the descendants (obviously filtering away the elements contained in .context .paragraph.
The battle field
$selection = $('.context').first();
$formatting_elements = $selection.find('strong, i')
.not('.paragraph *');
.paragraph {
margin: 15px;
position: relative;
border: 1px solid black;
}
.paragraph .paragraph {
border: 1px solid #444;
}
.paragraph .paragraph .paragraph {
border: 1px solid #888;
}
.context {
margin: 15px;
position: relative;
background-color: limegreen;
}
[data-hint^="I want"] {
background-color: violet;
}
.paragraph:before {
content: '-paragraph-';
position: absolute;
bottom: 100%;
left: 200px;
}
.context:before {
content: '-context-';
position: absolute;
bottom: 100%;
left: 200px;
color: green;
}
.context .paragraph:before {
font-style: italic;
color: #444;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="paragraph">
<i>bar</i>
<div class="paragraph">
<strong>foo</strong>
<i>bar</i>
<div class="context" data-hint="Find elements relative to this element">
<i data-hint="I want to get this">foo</i>
<div class="paragraph">
<i>bar</i>
<div class="paragraph">
<strong>foo</strong>
<div class="paragraph">
<strong>foo</strong>
<i>bar</i>
</div>
<i>bar</i>
</div>
</div>
<strong data-hint="I want to get this">foo</strong>
<i data-hint="I want to get this">bar</i>
</div>
</div>
</div>
I tried the above script but it doesn't seem to work.
The goal
is being able to select and change yellow elements to be violet.
Edit
Sorry, misunderstood your question therefore re-writing the entire answer.
What you are trying to achieve here can be done using a custom filter function.
The theory is simple, you select all the elements that meet a specific criteria (including the one's that are children/grandchildren of some specific selector), then you filter your set out given the parent/grandparent criteria
var myElements = $('strong, i').filter(
function() {
return $(this).parents('.context').length < 1;
});
See working fiddle here
UPDATE
In light of your comment, I have made the following changes to the fiddle. I hope this is what you are looking for.
var myElements = $('strong, i', '.context').filter(
function() {
return $(this).parent('.context .paragraph').length < 1;
});
See updated fiddle here
Related
I want to change the background-color of a child of a div with a certain background color and was wondering if this could be done with CSS. I'll explain the case below.
something like:
.container[background-color=some color] .content {
background-color: some other color
}
My guess is that it can't be done because you would then be able to do something along the lines of:
.div {
background-color: some color
}
.div[background-color=some color] {
background-color: some other color
}
Which would create some kind of circularity where the div would be selected, set to the other color, then not be selected anymore and fall back on the original definition, but then be selected again because it has that original color.
I don't think the :has, :is and :where selectors work this way either but I was hoping there was some way this could be done while avoiding doing it in Javascript.
The Case
Divs are created dynamically based on errors in user input. These divs may or may not contain a certain type of error for which another div is needed
// simple errors
<div class="errors">
<p>Error 1</p>
<p>Error 2</p>
<p>Error 3</p>
<p>Error 4</p>
</div>
// more complex errors
<div class="errors">
<p>Error 1</p>
<div class="complex-error">
<p>Complex Error 1</p>
</div>
</div>
I give the errors div a background color with odd/even
.errors {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
border-radius: 4px;
margin: 8px 0px;
}
.errors:nth-child(odd) {
background-color: #dee2e6;
}
.errors:nth-child(even) {
background-color: #f8f9fa;
border: 2px solid #dee2e6;
}
I was wondering whether or not the elements with class errors could be selected based on background color to then select it's child.
I'll post my own solution as the answer.
The best way to do it without using JavaScript would be with classes. You can add the first background-color with a class that you add to the children that need to have that background color. Then, you change the background-color of only the children that have that class. And if you need to you can add and remove the class dynamically with JavaScript (as you are not providing an example of the whole app I don't fully understand the behaviour you are looking for).
div.black {
background-color: black;
}
div.white {
background-color: white;
}
div.black {
background-color: #5A5A5A;
}
This is the way you could do it. Separate the class out to style the background color then use the class selector .class1.class2 to apply the rule to only the parent. Use the descendent class combinator to apply the background colour to the child.
Here's an example
.parent {
border: 1px solid black;
padding: 1rem;
font-size: 1.5rem;
margin-top: 1rem;
}
.yellow-backgroud {
background-color: yellow;
}
.red-background {
background-color: red;
}
/* this selects all child divs where the parent has the parent class AND the yellow-background class */
.parent.yellow-background div {
background-color: green;
}
/* this selects all child divs where the parent has the parent class AND the red-background class */
.parent.red-background div {
background-color: orange;
}
<div class='parent yellow-background'>
Parent
<div>
This is a the child of the yellow background parent
</div>
</div>
<div class='parent red-background'>
Parent
<div>
This is a the child of the red background parent
</div>
</div>
<div class='parent'>
Parent
<div>
This is a the child with no parent background color set.
</div>
</div>
The odd/even selector can already be used to select those elements.
.errors:nth-child(odd) {
background-color: #dee2e6;
}
.errors:nth-child(odd) .complex-error {
background-color: #f8f9fa;
}
.errors:nth-child(even) {
background-color: #f8f9fa;
border: 2px solid #dee2e6;
}
.errors:nth-child(even) .complex-error {
background-color: #dee2e6;
}
There was no reason to select them after the fact when you can just select them at the place where they are defined.
I am seeing simlar questions about hiding parent divs if there is no child but can't find how to show a different div in the parent if no other child is in it.
I have a parent div that is updated with free meeting rooms:
.Parent{
width: 100%;
margin-top: 4px;
overflow: auto;
}
if there is a free room it is display on the board (in the parent). This is done in JS like so:
$('#Parent').addClass("showRooms");
If a room is not free by default it is hidden:
if(roomStatus == "Taken"){
$('#Parent').addClass("hideRooms");
}
The css classes are as so:
.showRooms{
visibility: visible;
background-color: green;
}
.hideRooms{
visibility:hidden;
}
When all the rooms are hidden there is a blank board, I would like to show a different child div in the parent so I can show something more interesting e.g. the company logo.
(I am aware I could have the compnay logo on the parent even if there are rooms showing but I only want it to show if there are no rooms free)
What can I use to achieve this?
Yes!
I've came up with a pure CSS solution, because combining selectors is awesome:
Consider the following setup:
.container {
margin: 10px;
border: 1px solid #000;
}
.room {
width: 100px;
height: 75px;
background-color: #F00;
}
.hidden {
display: none;
}
.placeholder {
display: block;
}
.room:not(.hidden) ~ .placeholder {
display: none;
}
<div class="container">
<div class="room hidden"></div>
<div class="room hidden"></div>
<div class="room hidden"></div>
<div class="room hidden"></div>
<div class="placeholder">No rooms available!</div>
</div>
<div class="container">
<div class="room hidden"></div>
<div class="room"></div>
<div class="room"></div>
<div class="room hidden"></div>
<div class="placeholder">No rooms available!</div>
</div>
Now the magic lies in the following lines:
.room:not(.hidden) ~ .placeholder {
display: none;
}
Explanation:
Take a placeholder, who is a sibling of a .room that does not contain the .hidden class. The placeholder is visible by default, but if it can find a sibling that has a .room without .hidden, it will fall back into display none.
Take note, this requires the placeholder div to always be the last child of it's parent. Since the ~ selector only checks for next siblings, not previous.
I would go something like :
if(allRoomStatusAreTaken()){
$('#Parent').addClass("showLogo");
} else {
$('#Parent').removeClass("showLogo");
}
And
.showLogo{
visibility: visible;
background-image: url(...);
}
In allRoomStatusAreTaken() you have to check if all rooms are taken. I would use a function like every from Lodash :
function allRoomStatusAreTaken() {
return every(allRooms, room => room.status === "Taken");
}
You could hide the logo by default, and change the display using js if the rooms are hidden. Example:
$(function() {
var roomStatus = "Taken";
if (roomStatus == "Taken") {
$('#Parent').addClass("hideRooms");
$('.logo').addClass('show');
}
})
.Parent {
width: 100%;
margin-top: 4px;
overflow: auto;
}
.showRooms {
visibility: visible;
background-color: green;
}
.hideRooms {
visibility: hidden;
}
.logo {
display: none;
width: 200px;
height: 200px;
background: red;
}
.logo.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Parent">
<div class="logo">
</div>
</div>
Just Keep the Logo div with class 'companyLogo' inside parent and use the following CSS and will work.
.hideRooms .companyLogo{
visibility:visible;
}
.showRooms .companyLogo{
visibility:hidden;
}
For more specific answer please provide HTML structure.
When the parent is free you have to use append to add anything you want to the parent
if(roomStatus == "Taken"){
$('#Parent').addClass("hideRooms");
$("#Parent").append("<span>somthing to show</span>");
}
You can have a logo wrapped in some div (or anything else, or you can add a class to the logo image, really anything), which will have a 'hidden' class by default which will hide it and then you can also show this whet you have no rooms, something like:
if(roomStatus == "Taken") {
$('#Parent').addClass("hideRooms");
$('.logo').addclass("visible");
$('.logo').removeClass("hidden");
} else {
$('#Parent').addClass("showRooms");
$('.logo').removeClass("visible");
$('.logo').addClass("hidden");
}
```
Update
I'd modded the CSS given by David Thomas a bit. Its now a banner.
.div.popular::before {
/* setting the default styles for
the generated content: */
display: block;
width: 10em;
height: 2em;
line-height: 2em;
text-align: center;
background: #F60;
color: #fff;
font-size: 1.4rem;
position: absolute;
top: 30px;
right: 0px;
z-index: 1;
}
I would like to make a folded corner sort of like in this post: Folded banner using css
--- Original post ---
Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.
But I only want this to trigger when a div has a specific class.
So if the div the class populair or sale I would like to have a little circle show up on that post. This script what I am using right now.
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
if($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
});
And this HTML:
<div class="populair-div" style="display:none;">
<strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
<strong>Sale</strong>
</div>
But this only show's the populair-div and not the other one. I'm guessing my script is wrong. Should I use else for all the other call-to-action classes?
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
else($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
else($("#front-page-items").hasClass('Free')){
$(".free-div").show();
} // and so on
});
Is there someone that could help me out? Also is it possible to echo the div so I don't have to write a whole div for every call-to-action div?
For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:
div {
/* preventing <div> elements
from showing by default: */
display: none;
}
div.populair-div,
div.sale-div {
/* ensuring that elements matching
the selectors above (<div>
elements with either the 'sale-div'
or 'populair-div' class-names
are shown: */
display: block;
}
div.populair-div::before,
div.sale-div::before {
/* setting the default styles for
the generated content: */
display: block;
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
border: 3px solid transparent;
border-radius: 50%;
}
div.populair-div::before {
/* setting the text with the
"content" property: */
content: "Popular";
/* providing a specific colour
for the generated contents'
border: */
border-color: #0c0;
}
div.sale-div::before {
content: "Sale";
border-color: #f90;
}
/* entirely irrelevant, just so you can
see a (slightly prettified) difference
should you remove the default display
property for the <div> elements: */
code {
background-color: #ddd;
}
em {
font-style: italic;
}
<div class="neither-popular-nor-sale">
<p>
This element should not be shown, it has neither a class of <code>"populair-div"</code> <em>or</em> <code>"sale-div"</code>.
</p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>
You can use toggle function for this. It will be shorter and clearer.
Display or hide the matched elements.
Note: The buttons is for tests.
$(document).ready(function($){
init();
});
function init() {
$(".populair-div").toggle($("#front-page-items").hasClass('populair'));
$(".sale-div").toggle($("#front-page-items").hasClass('sale'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front-page-items" class="populair sale"></div>
<div class="populair-div">populair-div</div>
<div class="sale-div">sale-div</div>
<hr />
<button onclick="document.getElementById('front-page-items').classList.toggle('populair');init()">toggle populair</button>
<button onclick="document.getElementById('front-page-items').classList.toggle('sale');init()">toggle sale</button>
I developed, using ng-show and ng-hide, a box of description that pops up under a text after I click it.
But the problem is, the decription box is not shown exactly under the text, like here in the picture.
I want the description to be shown exactly under R2A.
This is my code:
HTML
<ion-content>
<div class="contenu">
<p>Salut</font><font size="4">, Welcome</font><font size="4">, Bienvenue chez </font>R2A<font size="4">...</font></p>
<div ><font class="boxed" ng-show="collapsed"size="4" >I am description</font></div>
<p> Nous sommes ton equipe de Welcomers, nous allons t'accompagner pour ta première journée.</p>
</div>
</ion-content>
CSS
.collapsed {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
.contenu .boxed {
display: inline-block;
padding:20px;
border-radius: 10px;
box-shadow: 5px 5px 10px #000;
background-color: #FBC02D;
}
First, transform the a into a button and you can put your boxed element inside your link.
Now, you can position the boxed element relative to the button element which contains the R2A text.
The boxedelement should have the position: absolute;, so it positions relative to the first ancestor which does not have the position static. Next, the button, which by default has the position static, should have the position: relative;. This means that it positions relative to its default position. If we don't specify top, left etc. the position remains the same. More here.
So, the html :
...
<button class="important-link" ng-model="collapsed" ng-click="collapsed=!collapsed">
<span>R2A</span>
<div class="boxed" ng-show="collapsed">
I am Description
</div>
</button>
...
And the css:
important-link {
position: relative;
background: none;
border: none;
}
.important-link span {
font-size: 30px;
color: #B9121B;
}
.boxed {
min-width: 100px;
position: absolute;
width: auto;
top: 50px;
padding: 20px;
border-radius: 10px;
box-shadow: 5px 5px 10px #000;
background-color: #FBC02D;
}
And here is a fiddle with the whole example.
PS. It's recommended not to use inline CSS in your HTML like style="font-size:180%; ..
Edit
So, if you don't want some kind of 'tooltip' effect there are two solutions.
In the first one, you add a margin-top to the next div, so that the description box doesn't overlap the text below. You can add it with ng-class on ng-style so the margin applies only if the description box is shown.
Second solution, inside the button element, both the text (R2A) and the description should be block elements, so that they position one under the other (block vs inline elements).
And then you remove the position: absolute from the boxed element (and you can also remove the position : relative; from the parent).
Here is the updated fiddle.
There are still some limitations in both solutions, so the one you choose depends on the final result.
You can also use JS to manipulate and position the elements of the DOM.
Just put both of these elements in a separate div element and add a break in between <br>:
<div>R2A
<font size="4">...</font></p>
<br>
<div>
<font class="boxed" ng-show="collapsed"size="4" >I am description</font>
</div>
</div>
Or put them in the same span.
You may have to fiddle around with the margins as well.
I'm creating a simple button (sort of) for a user to iterate through a number of selections when clicking "up" or "down".
I'm using jQuery to check after each click that there are more things up (or down) and updating the classes / styles / selections accordingly. However if I change the class of the element that is triggering the "on" function, it is still triggering (on click) even though all the classes specified in the selector are not there (in the DOM) any more.
In this simplified example if you click the "i.up.enabled" element then it's class switches ".up.disabled" and the visible field changes. Fine so far. However, if you click it again then it updates again, which it shouldn't(?) as the selector used to call the 'on' function is "i.up.enabled" and not "i.up.disabled". It's reasonably simple to work round this but I wondered why this is?
Does "on" read from the source rather than the DOM & is there a more accepted way doing this?
HTML
<div class="wrapper">
<div data-state="1">Number 1</div>
<div data-state="0">Number 2</div>
<i class="up enabled">up</i>
</div>
CSS
i {
cursor: pointer;
}
div[data-state="0"] {
display: none;
padding: 0 2rem;
border: 1px solid gray;
}
div[data-state="1"] {
padding: 0 2rem;
border: 1px solid gray;
}
.wrapper > * {
display: inline-block;
font-size: 90%;
}
i.disabled {
color: gray;
cursor: default;
}
i.enabled {
color: blue;
cursor: pointer;
}
JavaScript / jQuery
$('.wrapper i.enabled.up').on('click', function(){
var $current = $(this).siblings('div[data-state="1"]');
var $next = $(this).siblings('div[data-state="0"]');
$current.attr('data-state', 0)
$(this).addClass('disabled').removeClass('enabled');
$next.attr('data-state', 1);
});
And the fiddle is here
N.B. I appreciate that .data() is better for manipulating data-* elements, but due to restrictions I have to use attr("data-*", [value])
Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.
Its does't matter even if selector is modified, Event will still be attached with these elements when using "direct" binding.
You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically or manipulation selector (like removing and adding classes).
General Syntax
$(staticParentElement).on('event','selector',callback_function)
Example
$('.wrapper').on('click', 'i.enabled.up', function(){
});
DEMO
You can remove the event inside the on function using $(this).off("click");:
$('.wrapper i.enabled.up').on('click', function(e) {
var $current = $(this).siblings('div[data-state="1"]');
var $next = $(this).siblings('div[data-state="0"]');
$current.attr('data-state', 0)
$(this).addClass('disabled').removeClass('enabled');
$next.attr('data-state', 1);
$(this).off("click");
});
i {
cursor: pointer;
}
div[data-state="0"] {
display: none;
padding: 0 2rem;
border: 1px solid gray;
}
div[data-state="1"] {
padding: 0 2rem;
border: 1px solid gray;
}
.wrapper > * {
display: inline-block;
font-size: 90%;
}
i.disabled {
color: gray;
cursor: default;
}
i.enabled {
color: blue;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div data-state="1">Number 1</div>
<div data-state="0">Number 2</div>
<i class="up enabled">up</i>
</div>