This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I have the following code:
<div class="photos-wrapper" id="detailPhoto">
<div class="pseudo">
fixedTEXT
</div>
<div class="image-wrapper">
</div>
<div class="activites">
</div>
<div class="commentaire">
</div>
</div>
I want to include my own CSS style to this first and main <div class="photos-wrapper" id="detailPhoto"> but the only way to do this is by identify the grandchild selector i.e <a href="#/123456/"> because there are multiple occurrences of the same code.
Maybe it will be a bit more clear when I show what I tried:
a[href*="123456"] > div.pseudo > div.photos-wrapper[id^="detailPhoto"] {
display: none !important;
}
div.photos-wrapper[id^="detailPhoto"] < div.pseudo < a[href*="123456"] {
display: none !important;
}
That's the way I tried to do so but it obviously is not working.
The thing I am probably trying to do here is called a parent selector but I'm not quite sure.
#edit
Let's take a look on this code, it's actually more detailed:
http://jsfiddle.net/60ezqtL7/
The goal is to hide by display: none; style whole divs that are containing exactly the same values i.e. PHOTO 1
There's no need to use jQuery in this case (or many other cases).
detailPhoto.classList.toggle('hide', detailPhoto.querySelector('[href=#/123456]'))
As I mentioned in my comment to your answer, there is not parent or ancestor selecor. The easiest and most efficient way to to it via jQuery is the has() method.
$('#detailPhoto').has('a[href*="123456"]').hide(); // or use .addClass() instead
Use Google to host jquery for you.
Demo : I've used the class selector in the demo as id should be unique.
addClass Demo
UPDATE
Given your update and assuming you want to display 1 and only 1 of each photo, additional wrappers with photos with the same href will be hidden.
/*Loop through each link in div with cass psudo
in a div with class photos-wrapper*/
var found = {};
$(".photos-wrapper .pseudo a").each(function(){
var $this = $(this);
var href = $this.attr("href");
//if the href has been enountered before, hide the .photos-wrapper ancestor
if(found[href]){
$this.closest(".photos-wrapper").hide();
/*Other options:
Use Css direct
$this.closest(".photos-wrapper").css("display", "none");
Assign a duplicate class, then style that class ass appropriate
$this.closest(".photos-wrapper").addClass("duplicate");
*/
}else{
//otherwise add it to the array of what has been found
found[href] = true;
}
});
Demo
If you're not familiar with jquery, make sure to read up on how it is implemented and the purpose of $(document).ready();
Update 2
To hide all containers with replicated href use:
//Loop through each a tag
$(".photos-wrapper .pseudo a").each(function () {
var $this = $(this);
//Get the href
var href = $this.attr("href");
//Check if more than one exists
if ($('.photos-wrapper .pseudo a[href="' + href + '"]').size() > 1) {
//Hide all .photo-wrapper containers that have the replicated href
$('.photos-wrapper .pseudo a[href="' + href + '"]').closest(".photos-wrapper").hide();
}
});
Another Demo
I still suggest removing duplicates server-side if at all possible.
On a complete side note, the <center> tag was depreciated back at HTML4 and should no longer be used. Use CSS instead. There are pleanty of examples out there on how to center content using CSS.
At this time there is not a way to do this with only CSS, but you can do it easily with JQuery. This will search the descendants of #detailPhoto and hide the href (set it to display: none;).
<script>
$(function() {
$('#detailPhoto').find('a[href$="#/123456/"]').hide();
});
</script>
To search parents, you'd use this.
<script>
$(function() {
$('a[href$="#/123456/"]').closest('#detailPhoto').hide();
});
</script>
To use this you will also need the JQuery library added to the head of your document.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Related
There's an img element being created somehow on this page that I can't figure out how to target. It's generated by a script I don't have access to so I can't just delete it.
There are no ID or class attributed to it so I can't apply CSS (that I know of). The source link also changes for other article pages so I can't reference the URL either.
Is there anyway I can target or just hide it? It's creating extra white space at the bottom of the page.
http://support.spacejump.co.nz/support/solutions/articles/27000068245-payment-methods
There are two ways depending upon the possibilities on your website.
1: I suppose there will be no img tag directly inside the body tag if you code properly and put it inside a div or any other tag. So, for this solution is:
body > img {display: none;}
2: If first is not the case and the image will always come after the script tag. Then this also is the solution:
body > script + img {display: none;}
BTW, both are working in your situation.
Right click on the page and view source. You can see the element present int the page source. Delete it in the source code in line 551.
If the image src attribute is guaranteed to be consistent over time, then you can target it by that attribute, and remove it.
document
.querySelector('img[src="/support/solutions/articles/27000068245-payment-methods/hit"]')
.remove()
Here is a JS solution to target the last class in the page before all those JS src CDNs... As it seems the IMG tag is after a bunch of JS tags with the very last element in your page being the layout class, so we create a helper function that gets the siblings of the target element, then we loop over the array returned by the function and set an index, then check the tag.tagName === 'IMG' and check our iterated index => i is higher than the set index, if we get a match, remove that element from the DOM.
const removeImg = document.querySelector('.layout')
const body = document.body
function getAllSiblings(element, parent) {
const children = [...parent.children];
return children.filter(child => child !== element);
}
function removeImageAfterElement(el) {
let index = 0;
getAllSiblings(removeImg, body).forEach((tag, i) => {
tag.classList.contains(el) ? index = i : null
tag.tagName === "IMG" && i > index ? tag.remove() : null
})
}
removeImageAfterElement(removeImg)
<body>
<div class="another-class"></div>
<div class="layout layout--anonymous">
some text and page content
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/package#version/file"></script>
<script src="https://unpkg.com/#freshworks/freshdesk/dist/freshdesk.js"></script>
<script></script>
<script type="text/javascript"></script>
<img src="/support/solutions/articles/27.............../hit">
</body>
first am sorry for bad English / grammar
am creating something where you show and hide.
but my problem is that when I click show/hide it only brings input box 1 on both buttons. and I want it to show/hide each box.
my problem is that. I don't want to use the id to define show/hide Element
because if I have more than 10 div with input boxes I have to define them all by getElementById I don't want that.
I want when I click on the show/hide it brings input box without getElementById
so that even if I have more then 10 input box to show I only click and show/hide without defining its id
function myFunction(event) {
var x = document.getElementById("mydv");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
x.parentNode.insertBefore(x, event.target.nextSibling);
}
document.addEventListener('click', function(event){
if(event.target.className.includes("dv1")){
myFunction(event);
}
});
<!DOCTYPE html>
<html>
<head>
<title> SHOW / Hide </title>
</head>
<body>
<ul>
<li>
<div id="mydv" style="display:none;">
<p>input box 1
<input type="text" name="textfield">
</p>
</div>
<button class="dv1">SHOW/HIDE</button>
</li>
<li><div id="mydv" style="display:none;">
<p>input box 2
<input type="text" name="textfield">
</p>
</div>
<button class="dv1">SHOW/HIDE</button></li>
</ul>
</body>
</html>
If you want to specify an element on a page, that can be similar in every way to other elements except perhaps text content or something else, realistically you need an id, as this is how JavaScript defines a unique element.
But what you can do, is change your HTML button, to contain a rel, which is an attribute, and then get that attribute and use that to specify which element id you're looking for.
You can then call a function and simply pass "this" as an argument.
HTML :
<button onclick="hideShow(this)" rel="mydv">Show/Hide</button>
JavaScript :
<script>
function hideShow(elem){
var ele = document.getElementById(elem.getAttribute("rel"));
if(ele.style.display == "none"){
ele.style.display = "block";
}
else{
ele.style.display = "none";
}
}
</script>
If you are absolutely abhorrent to using ID's, you can use child nodes and specify which child by number, but this means if ever you change anything, you will break your code, which is foolish. I recommend using unique ID's and simply changing your code in the above ways.
Short and lazy answer to your problems - if you are going to keep your current hierarchy, you can simply find DIV tag inside your LI parentNode (since its the only DIV tag).
Basically it goes like this - button press -> change focus from button to parentNode LI -> finds DIV.
in short - in function myFunction(event) change
var x = document.getElementById("mydv");
to
var x = event.target.parentNode.getElementsByTagName("DIV")[0];
Working example:
https://jsfiddle.net/w2a9zg46/1/
The problem is that getElementById refers to the first element with that id. It simply ignores everything else. Using the same id for more than one element is a bad practice. An id should be a unique reference to that element, use class instead.
I'm noot good in english, so the title may seem a bit odd.
I want to use css function attr() like this:
I mean i have a container <div> and an inner <div> that i want to have width depending on data-width attribute. For example this would be great, but this doesnt work:
<div class="container">
<div data-width="70%">
</div
</div>
.container {
width: 600px;
height: 200px;
}
.container div {
width: attr(data-width);
height: 100%;
}
Is there any noJS way to use attributes like that?
UPDATE: Guys convinced me that the JS is the only way to do this :)
That's not a big problem (but that's bad. CSS, why youre so illogical? Is the difference between content:attr(data-width) and width: attr(data-width) so big ?).
One of the guys had an idea to go through the all elements with jQuery.
That's ok, but it is very... local? Don't know how to say it in english.
Anyway, i remaked his code a little bit and here it is:
allowed = ['width','color','float'];
$(document).ready(function () {
$('div').each(function (i, el) {
var data = $(el).data(),style = '';
if (!$.isEmptyObject(data)) {
$.each(data, function (attr, value) {
if (allowed.indexOf(attr) != - 1) {
style += attr + ': ' + value + '; ';
}
})
if (style.length != 0) {
$(el).attr('style', style);
}
}
})
})
Idea is simple:
1. We suppose that style we want to add to an element is the only one. I mean there are no scripts that will try to add some other styles,
2. We create an array of allowed attribute names, we need to avoid using wrong names at the style attribute, for example style="answerid: 30671428;",
3. We go through each element, save its data attributes in an object, check if object is empty, and if not - check every attribute if it is allowed, create a string that contains all styles that we need, and - finally - add our style string to the element as the content of style attribute.
That's all, thanks everybody
I would not advise to use CSS alone since it will not allow you to do what you're looking for... instead use a scripting language (in my case jQuery) to accomplish this functionality for you like so: jsFiddle
jQuery
jQuery(document).ready(function(){
var dataElem; // to store each data attribute we come accross
jQuery('div').each(function(){ //loop through each div (can be changed to a class preferably)
dataElem = jQuery(this); //get the current div
if(dataElem.data('width')){ //make sure it exists before anything further
dataElem.width(dataElem.data('width')); //set the element's width to the data attribute's value
dataElem.css("background-color", "yellow");
}
});
});
HTML
<p>The links with a data-width attribute gets a yellow background:</p>
<div>
w3schools.com
</div>
<div class="me" data-width="50"> <!-- change value to see the difference -->
disney.com
</div>
<div>
wikipedia.org
</div>
Notes on the above:
each, data, width.
Instead of doing data-width, use a class attribute. An html tag can have mutliple classes separated by spaces, so if you wanted to be very precise, you could set up as many classes as you need. For instance:
<div class="w70 h100">
</div>
Then in your css:
.w70{
width: 70%;
}
.h100{
height: 100%;
}
And so on.
Is there any noJS way to use attributes like that?
No, you cannot use CSS to set the width of the element to it's data-width attribute. CSS does not allow for this as attr() is only currently available for the CSS content property which is only available on css pseudo elements (::before and ::after).
How can you achieve this with as little javascript as possible?
This is extremely easy to do using the native host provided DOM API.
Select the elements using Document.querySelectorAll().
Iterate the elements and apply the styles using Element.style which can be retrieved from the data-width attribute using Element.dataset
(Demo)
var items = document.querySelectorAll('#container div'), item, i;
for(i = 0; (item = items[i]); i++) item.style.width = item.dataset.width;
how to change properties of a parent div on hover of child div.
can it be done with pure css ?
html:
<div class="parent">
<div class="child">
</div>
</div>
css:
.parent{width:200px;height:100px;background:#cccccc;}
.child{width:200px;height:100px;background:transparent;}
Not with plain CSS you need some form of script to notify the parent that the child is being hovered(eg.):
<div id="parentId" class="parent">
<div id="childId" onmouseover="doOnMouseOver()" onmouseout="doOnMouseOut()" class="child">
</div>
</div>
<script type="text/javascript">
function doOnMouseOver() {
var parentNode = this.parentNode;
var newParentClass = parentNode.getAttribute('class') + 'child-beeing-hovered';
parentNode.setAttribute('class', parentClass);
}
function doOnMouseOut() {
var parentNode = this.parentNode;
var newParentClass = parentNode.getAttribute('class').replace('child-beeing-hovered', '');
parentNode.setAttribute('class', parentClass);
}
</script>
Note that I've added ids to your html elements so that I can get a hold of them with javascript without making the code unnecessary complex nor using a third party library like jQuery.
Note that you need also to bind onmouseout or otherwise the parent element will keep the new class child-beeing-hovered.
jQuery actually makes your job easier but you should try doing this with javascript at least once.
I hope it helps.
Is there a reason you do not want to use JavaScript or JQuery?
You could simply:
$("#child_id").hover(function (){
$(this).parent("div").addClass("some-class")
});
There is no parent selector in CSS.
You can find quite good explanation why it's not supported here: http://snook.ca/archives/html_and_css/css-parent-selectors
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there any way to hover over one element and effect a different element?
How to change the div background image,in mouse over the another div,using css .
With the markup you supplied, this is indeed possible with CSS alone:
<a>
<img src="http://placehold.it/100x100" />
<div>
</div>
</a>
You can use the :hover pseudo selector to select the div when the anchor has been hovered
a:hover div
{
background-image: url(http://placehold.it/400x400);
}
This will change the div's background when the anchor is hovered. This doesn't work in all cases, you must be aware of the relationship of the elements and use the appropriate selector. If the elements have no relationship, you will have to use Javascript (or one of its libraries.)
http://jsfiddle.net/Kyle_Sevenoaks/fPGU3/
This will achieve what you're looking for though there are better ways to do this, using sprites and background-position for example. However:
Your HTML
<a class="selector">My Link</a>
Your CSS
.selector {
background-image:url(myImage.jpg);
}
.selector:hover {
background-image:url(myHoverImage.jpg);
}
Jquery solution
HTML
<a class="selector" data-type="bgChanger1">
My Link
</a>
<div data-type="bgChanger1">
...
</div>
JQUERY
$(document).ready(function()
{
var hoverElement = $('.selector'),
dataType = hoverElement.attr('data-type'),
linkedDiv = $('div[data-type="' + data-type + '"]');
hoverElement.hover(function(e)
{
e.preventDefault()
linkedDiv.css('background-image', 'hoverImage.jps');
},
{
linkedDiv.css('background-image', 'normalImage.jpg');
});
});
You can use jquery to do this.
Your markup:
<div id="div1"></div>
<div id="div2"></div>
Your script:
$("#div1").mouseover( function() {
$("#div2").css("background-image", "url('image.png')");
});
just add a jquery script as follows:
$(document).ready(function() {
$('#div1').hover(function(){
$('#div2').css("background","url(image_url)");
});
});