I want to make an entire div cursor-pointer with inline CSS, but it currently only affects the whitespace around the child elements. I've tried position and z-index to no avail.
I do not and cannot have an external stylesheet.
<div className="cursor-pointer">
<checkbox>
<label>
</div>
Is there any way to do this without applying the cursor-pointer to every element? There's conditional logic as well so that would get pretty cluttered.
Since you allow the usage of JS, you could use querySelectorAll to select all child elements and apply the same class to it:
let el = document.querySelectorAll('.cursor-pointer *');
el.forEach(ele => ele.classList.add('cursor-pointer'));
/* just for demonstration purpose */
.cursor-pointer {
cursor: not-allowed;
}
<div class="cursor-pointer">
<input type="checkbox">
<label>Label</label>
</div>
Using javascript, this solution loops through the parent and children and applies the cursor directly to each element.
let pointers = document.querySelectorAll(".cursor-pointer");
pointers.forEach(function(el) {
let children = el.querySelectorAll("*");
children.forEach(function(c) {
c.style.cursor = "pointer";
});
el.style.cursor = "pointer";
});
<div class="cursor-pointer">
<input type="checkbox">
<label>A</label>
</div>
Related
I am trying to find out whether this element <ul class = 'pagination-buttons no-bullets'> is visible:
When <ul class = 'pagination-buttons no-bullets'> is visible, its parent element has class = 'page-number-section', when <ul class = 'pagination-buttons no-bullets'> is invisible, its parent element has class = 'page-number-section cloaked'. The element itself's attributes do not change with its visibility.
I could look at its parent class and verify whether it is visible but is there another way to do it? e.g. something like pageObj.QuerySelector().visible()?
Thanks
Using the getComputedStyle you can check the actual value of a css attribute.
Here is an example:
console.log('#a1 visibility is:', window.getComputedStyle(document.getElementById('a1'), null).getPropertyValue("visibility"));
console.log('#a2 visibility is:',window.getComputedStyle(document.getElementById('a2'), null).getPropertyValue("visibility"));
.hide-inner .some-class {
visibility: hidden;
}
<div class="hide-inner">
<div id="a1" class="some-class">abc</div>
</div>
<div class="show-inner">
<div id="a2" class="some-class">def</div>
</div>
My goal, essentially, is to have the CSS :hover replaced by JavaScript. The reason is that I need a loop to be executed on a variable number of divs that will be nested inside the parent div that should react upon :hover.
The problem, however, is that I have no idea how to target just the div being hovered over without hard-coding in specific IDs - something that I will not be able to do once applied to my project, a tumblr theme.
HTML
<div id="motherbox">
<div class="middlebox">
<div class="childbox">One</div>
<div class="childbox">Two</div>
<div class="childbox">Three</div>
</div>
</div>
<div id="motherbox">
<div class="middlebox">
<div class="childbox">One</div>
<div class="childbox">Two</div>
<div class="childbox">Three</div>
<div class="childbox">Four</div>
<div class="childbox">Five</div>
</div>
</div>
CSS
#motherbox {
width:30%;
height:100px;
margin:100px auto;
background-color:gray;
}
JavaScript
document.getElementById("motherbox").onmouseenter = function(){
this.style.backgroundColor = 'blue';
};
document.getElementById("motherbox").onmouseleave = function(){
this.style.backgroundColor = "gray";
};
JSFiddle
My question is - how do I cause divs with the same class or id to react individually (or, rather, not all at once) on hover using javascript, rather than CSS?
Thank you for your time.
Basically you can select elements having a particular class using getElementsByClassName.
Here is a working demo.
var elements = document.getElementsByClassName('childbox');
for(var i=0; i<elements.length; i++) {
elements[i].onmouseleave = function(){
this.style.backgroundColor = "blue";
};
}
So use instead of getElementById this:
http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
And provide classess for your divs, where you want have that event.
I have problem with working on DOM elements.
This is my HTML:
<div class="movie__feature">
▲
</div>
<div class="movie__images">
<span class="similarity_points">9</span>
<a href="http://www.filmypodobnedo.pl/Top-Gun/" title="Filmy podobne do Top Gun">
<img alt="Filmy podobne do Top Gun" src="http://www.filmypodobnedo.pl/photos/Top-Gun.jpg"/>
</a>
</div>
<div class="movie__feature">
▼
</div>
</div>
When I click on .plus class, I need to go to .similarity.
This is my jQuery:
$('.plus').click(function(e){
e.preventDefault();
var self = $(this);
self.closest('div').find('.similarity_points').text('10');
}
How my num should look?
The closest div doesn't contain .similarity_points as a descendent. You could use this:
self.closest('div').parent().find('.similarity_points').text('10');
But, be aware that code which is highly dependant on the structure of the DOM is also fragile.
In your code you are going up to .movie__feature, and then you are looking for children with the .similarity_points class.
You need to go up one more level and then look for the child element:
$('.plus').click(function () {
$(this).closest('div').parent().find('.similarity_points').text('10');
return false;
});
I'm using the liferay framework and I need to add a JavaScript detected inline height to a very very specific div in my page. The problem is I need to target it going through an unknown number of dynamically added divs with dynamically added classes and IDs. To complicate this even further, the divs are randomly siblings or nested in each other.
Here's what it looks like:
<div class="known-class">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated">
<div class="unknown dynamicallygenerated"></div>
<div class="unknown dynamicallygenerated">
<div class="DIV-I-WANT-TO-TARGET">this is the div i need to Target with my css/javascript</div>
</div>
</div>
</div>
obviously I can't target it simply with
function resize() {
var heights = window.innerHeight;
jQuery('.DIV-I-WANT-TO-TARGET').css('height', heights + "px");
}
resize();
Because that class is present elsewhere, I would rather target it with something like.
jQuery('.known-class .DIV-I-WANT-TO-TARGET')
Which obviously doesn't work because there's a ton of other divs in the middle and my div is not a child of ".known-class"
I was asking myself if there was any jQuery that could help. Something like:
Catch any div with .DIV-I-WANT-TO-TARGET class that is "generically" inside another div that has .known-class
Is this possible? thanks a lot for your help!
Something like this would work:
// this will target the known-class and find all children with DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET');
// this will target the known-class and find the first DIV-I-WANT-TO-TARGET
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').first();
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:first');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET:eq(0)');
$('div.known-class').find('div.DIV-I-WANT-TO-TARGET').eq(0);
You can try in your css file
.known-class div div div div{}
The last div being the DIV-I-WANT-TO-TARGET
Assuming that you are adding the divs starting from the outer to the inner
Assign an equal name plus a number starting from 1
<div class="known-class">
<div class="unknown dynamicallygenerated" id="dynamicdiv1"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv2">
<div class="unknown dynamicallygenerated" id="dynamicdiv3">
<div class="unknown dynamicallygenerated" id="dynamicdiv4"></div>
<div class="unknown dynamicallygenerated" id="dynamicdiv5">
<div class="DIV-I-WANT-TO-TARGET" id="dynamicdiv6"></div>
</div>
</div>
</div>
The use jQuery [.each][1] to loop through all the divs on the document
$( document.body ).click(function() {
$( "div" ).each(function( i ) {
if ( this.style.color !== "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
When you reach the last item in numeric order. (you can use any split function) add the attributes to that div
you need to select last div inside the known-class:
$('.known-class').find('div:last').css('background', 'Red')
OR if you want to select all the .known-class :
$('.known-class').each(function() {$(this).find('div:last').css('background', 'Red')});
Actually your selector works just fine:
$('.known-class .DIV-I-WANT-TO-TARGET')
With a space, selectors will find any descendant.
The search is only limited to direct descendants (immediate children) if you use the > operator.
So $('.known-class > .DIV-I-WANT-TO-TARGET') would not find what you wanted.
I would like to convert
<div id="outer">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
into
<div id="outer">
<div id="middle">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
</div>
I would like to preserve any references to the inner divs that may have been set prior to this so just doing $("#outer").html($("<div id='middle>" + $("#outer").html() + "</div>")) will not work for me.
Is there a better way than just creating the middle div, moving all the children of outer to it and then appending it to the outer div?
Like this...
$('#outer').wrapInner($('<div>',{id:'middle'}));
DEMO: http://jsfiddle.net/uy6wg/
The .wrapInner() method will wrap all the content of #outer in the element you give it.
This will include inner text nodes if your actual content contains any.
If you care about performance, here's a native DOM solution...
var outer = document.getElementById('outer'),
middle = document.createElement('div');
middle.id = 'middle';
while(outer.firstChild)
middle.appendChild(outer.firstChild);
outer.appendChild(middle);
DEMO: http://jsfiddle.net/uy6wg/1/
This could be made into a reusable function...
function wrapInner(id, tag) {
var outer = document.getElementById(id),
wrapper = document.createElement(tag);
while(outer.firstChild)
wrapper.appendChild(outer.firstChild);
outer.appendChild(wrapper);
return wrapper;
}
wrapInner('outer','div').id = "middle";
DEMO: http://jsfiddle.net/uy6wg/2/
You can use the .wrapAll() method:
$("#outer > div").wrapAll('<div id="middle"></div>');