$(document).ready(function(){
$("#summary").click(function(){
$(this).toggleClass('clicked');
});
});
.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="summary">
<div class="clicked">111</div>
<div class="clicked">222</div>
</div>
How to not set beckoned-color to red when html page load.Only change it to red when click on its div?
Remove class="clicked" from your divs?
$(document).ready(function(){
$("#summary").click(function(){
$(this).toggleClass('clicked');
});
});
.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="summary">
<div>111</div>
<div>222</div>
</div>
You have already added the .clicked to the divs when your page is loading, while you want to toggle the class by clicking on the div. Try the below code:
$(function(){
$(document).on('click', '#summary', function(){
$(this).toggleClass('clicked');
});
});
.clicked {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="summary">
<div class="someclass">111</div>
<div class="someclass">222</div>
</div>
Just remove the inline class clicked from the div tags
HTML CODE:
<div id="summary">
<div >111</div>
<div >222</div>
</div>
Live demo # JSFiddle:http://jsfiddle.net/dreamweiver/qjrahp6t/
Remove class clicked from the HTML. It will become red only after the click.
<div id="summary">
<div class="">111</div>
<div class="">222</div>
</div>
Related
I am trying to learn jquery and I have 2 div elements that I want only with one button to toggle between hide and show. I tried to write everything that I want but I think the sintax is wrong.
<div id="first"></div>
<div id="second">
</div>
<button class="change">change</button>
CSS:
#first {
width:500px;
height:500px;
margin:0 auto;
background-color:#ccc;
}
#second {
width:500px;
height:500px;
margin:0 auto;
background-color:black;
display:none;
}
and I wrote as Jquery
$(document).ready(function() {
$('.change').click(function() {
$('#first').hide();
$('#second').show();
});
});
I was thinking about an if else statement however I am not sure if can handle that yet.
You can use toggle method of jQuery. Make your second div hidden on initialisation...
$(document).ready(function() {
$('.change').click(function() {
$('#first, #second').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">first</div>
<div id="second" style="display: none;">second</div>
<button class="change">change</button>
working example: https://jsfiddle.net/tanaydin/kjyq0eow/3/
documentation: http://api.jquery.com/toggle/
edited after: #Darren Sweeney's comment, much better with this selector.
First thing, you won't see emptys divs.
Example - 1
$(document).ready(function() {
$('.change').click(function() {
$('#first').toggle();
$('#second').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="display: none">teste</div>
<div id="second">teste2</div>
<button class="change">change</button>
Example - 2
You can check if a element is visible with that:
$(document).ready(function() {
$('.change').click(function() {
if($('#first').is(":visible")){
$('#first').hide();
$('#second').show();
}else{
$('#first').show();
$('#second').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">test1</div>
<div id="second">test2</div>
<button class="change">change</button>
I'm trying to find an element in my HTML file based on its parent class name and then add a class to it. I've tried the solution in here but it won't work. also, I've tried to log the child class name to see if it's working but it will return undefined. My HTML file is something like this:
$(document).ready(function () {
console.log($(".grid-container").find(">:first-child").className);
$(".grid-container").find(">:first-child").toggleClass("search-controller");
});
.search-controller {
height: 100%;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ui-view="" class="grid-container ng-scope" style="">
<div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope">
This is test data
</div>
</div>
To get the class name from jQuery object you have to use prop(). Try to set some style to the element so that the changes are visible (like color):
$(document).ready(function () {
console.log($(".grid-container").find(">:first-child").prop('class'));
$(".grid-container").find(">:first-child").toggleClass("search-controller");
});
.search-controller {
height: 100%;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ui-view="" class="grid-container ng-scope" style="">
<div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope">
This is test data
</div>
</div>
Use addClass instead of toggleClass.toggleClass class will require an event like click to toggle the class.
$(document).ready(function() {
//console.log($(".grid-container").find(">:first-child").className);
$(".grid-container").find(">:first-child").addClass("search-controller");
});
.search-controller {
height: 100%;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ui-view="" class="grid-container ng-scope" style="">
<div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope">Test
</div>
</div>
I was wondering how I could define a click event in jQuery / JavaScript which excludes children with a specific class. In the same time I need to use "this" to access the clicked element.
$(".slidebox-header *:not(.stop)").click(function(event) {
alert("woohoo!");
$(this).siblings(".slidebox-content").slideToggle();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>
But because "this" refers to the children of ".slidebox-header", it is not working.
My question: Is there an elegant way to solve this issue?
Thanks a lot!
slidebox-content is a sibling of slidebox-header, so use .closest() to traverse to to header then use .sibling()
$(".slidebox-header *:not(.stop)").click(function(event) {
$(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});
Also you can use descendant selector to target the specific child.
$(".slidebox-header > span").click(function(event) {
$(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});
$(".slidebox-header *:not(.stop)").click(function(event) {
//alert("woohoo!");
$(this).closest('.slidebox-header').siblings(".slidebox-content").slideToggle();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>
Or you could bind event with header and use event.stopPropagation() with block element to stop event bubbling.
$(".slidebox-header").click(function(event) {
$(this).siblings(".slidebox-content").slideToggle();
});
$(".slidebox-header .stop").click(function(event) {
event.stopPropagation();
});
$(".slidebox-header").click(function(event) {
$(this).siblings(".slidebox-content").slideToggle();
});
$(".slidebox-header .stop").click(function(event) {
event.stopPropagation();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>
You can use parents() or closest() to achieve this. Below is the usage of parents():
$(".slidebox-header *:not(.stop)").click(function(event) {
alert("woohoo!");
$(this).parents(".slidebox:first").find(".slidebox-content").slideToggle();
});
.slidebox-header {
background-color: yellow;
}
.stop {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidebox">
<div class="slidebox-header">
<div class="stop">BLOCKED AREA</div>
<span>Header - Click allowed</span>
</div>
<div class="slidebox-content">
<p>Content</p>
</div>
</div>
Is it possible to change div1 if div2 is hovered but under div1?
/* Works */
.div1:hover + .div2 {
background-color: red;
}
/* Doesn't Work */
.div2:hover + .div1,
.div2:hover ~ .div1,
.div2:hover .div1 {
background-color: red;
}
<div class="div1">hover</div>
<div class="div2">hover</div>
Solutions using Javascript and/or JQuery are also appreciated
Using JQuery's .hover() + .css() for both the divs
$( ".div1" ).hover(
function() {
$(".div2").css( "background-color", "red" );
}, function() {
$(".div2").css( "background-color", "initial" );
}
);
$( ".div2" ).hover(
function() {
$(".div1").css( "background-color", "red" );
}, function() {
$(".div1").css( "background-color", "initial" );
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>
If you don't want to use javascript, you can use display: flex on the container, then change the rendering order (note that the html order has to be updated as well). Then you can hover on div2 and highlight div1.
.container {
display: flex;
flex-wrap: wrap;
}
.div1, .div2 {
flex: 0 0 100%;
}
.div1 { order: 1; }
.div2 { order: 2; }
.div2:hover ~ .div1 {
background-color: red;
}
<div class="container">
<div class="div2">hover 2</div>
<div class="div1">hover 1</div>
</div>
Nope, the CSS does not provide a provide a previous sibling selector, the only solution is using JS. You can use jquery's prev() method for the same.
$(function() {
$(".div2").hover(function() {
$(this).prev().addClass("hoveredBg");
},
function() {
$(this).prev().removeClass("hoveredBg");
});
});
.hoveredBg {
background-color: red;
}
<div class="div1">div 1 hover</div>
<div class="div2">div 2 hover</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This will only help your hover for the previous sibling div only and not burden the browser for next sibling hover, which can be achieved using CSS only.
Try this below code.
$(document).ready(function() {
$(".div2").mouseover(function() {
$(".div1").css("background-color", "red");
});
$(".div2").mouseout(function() {
$(".div1").css("background-color", "");
});
});
/* Works */
.div1:hover+.div2 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>
Hope this will help you.
Check out this fiddle,
https://jsfiddle.net/rkqhvzyc/
$(document).ready(function() {
$(".div2").hover(function(){
$('.div1').css("background-color", "red");
}, function(){
$('.div1').css("background-color", "white");
});
});
/* Works */
.div1:hover + .div2 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div1">hover</div>
<div class="div2">hover</div>
Interesting how nobody pointed out that classes are multiple on a single page,
and no, you should not target .div1 just like that, like many suggested, and expect that all other .div1 in the DOM will not be targeted as-well.
// NONSENSE
$( ".div2" ).hover(
function() {
$(".div1").css( "background-color", "red" );
}, function() {
$(".div1").css( "background-color", "initial" );
}
);
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
To reflect the above-mentioned problem - here's a couple of solutions:
// 1. EXAMPLE TARGETING .prev() (NOT FLEXIBLE)
$(".hoverTargetPrev").hover(function() {
$(this).prev(".div1").toggleClass("red");
});
// 2. BETTER EXAMPLE USING .couple PARENT, .closest() AND .find()
$(".div2").hover(function() {
$(this).closest(".couple").find(".div1").toggleClass("red");
});
// 3. EXAMPLE TARGETING .prevAll() and .eq(0) (a bit expensive but...)
$(".hoverTargetNearestPrev").hover(function() {
$(this).prevAll(".div1").eq(0).toggleClass("red");
});
.div2 {color:red;}
.red {background: red;}
<h3> 1. EXAMPLE TARGETING .prev() (NOT FLEXIBLE)</h3>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2 hoverTargetPrev">DIV2 hover me (will not work any more)</div>
<h3> 2. BETTER EXAMPLE USING .couple PARENT, .closest() AND .find() </h3>
<div class="couple">
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
</div>
<div class="couple">
<div class="div1">DIV1</div>
<div class="div2">DIV2 hover me</div>
</div>
<div class="couple">
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2">DIV2 hover me (will kork!)</div>
</div>
<h3> 3. EXAMPLE TARGETING .prevAll() and .eq(0) (a bit expensive but...)</h3>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me</div>
<div class="div1">DIV1</div>
<div>Future intruder...</div>
<div class="div2 hoverTargetNearestPrev">DIV2 hover me (will work!!)</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hello How do you find element not in this class name?
drop-area__itemPage
I use this but not working
$("#drop-area").children("div").find(".drop-area__item:not('.drop-area__itemPage:first')")
$("#drop-area").children("div").find(".drop-area__item")
div#page1.drop-area__item.ui-droppable.drop-area__itemPage
div#page2.drop-area__item.ui-droppable.ui-droppable-active
div#page3.drop-area__item.ui-droppable.ui-droppable-active
div#page4.drop-area__item.ui-droppable.ui-droppable-active
div#page5.drop-area__item.ui-droppable.ui-droppable-active
div#page6.drop-area__item.ui-droppable.ui-droppable-active
div#page7.drop-area__item.ui-droppable.ui-droppable-active
div#page8.drop-area__item.ui-droppable.ui-droppable-active
div#page9.drop-area__item.ui-droppable.ui-droppable-active
enter code here
Here is a snippet showing selection of first child which has one class and do not has another one:
$("#drop_area").find("div.class1:not([class~='class3']):first").css("border", "5px blue solid");
.class1, .class2, .class3{
display: inline-block;
margin: 20px;
width: 150px;
height: 80px;
}
.class1 {
background: teal;
}
.class2 {
background: tomato;
}
.class3 {
background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drop_area">
<div class="class1 class3 class2">class1 class3 class2</div>
<div class="class2">class2</div>
<div class="class1 class2">class1 class2</div>
<div class="class3 class1">class3 class1</div>
<div class="class1">class1</div>
<div class="class2">class2</div>
<div class="class1 class2">class1 class2</div>
<div class="class3 class1">class3 class1</div>
<div class="class3">class3</div>
<div class="class2">class2</div>
<div class="class3 class2">class3 class2</div>
<div class="class3 class1">class3 class1</div>
</div>
<div class="result"></div>
So result jquery statement looks like:
$("#drop-area .drop-area__item:not('.drop-area__itemPage'):first")
First select all related elements, than exclude with class .drop-area__itemPage and than use .eq(0) to select first of them:
$('#drop-area div .drop-area__item.:not(.drop-area__itemPage)').eq(0);
I'm taking a bit of a guess at what you're trying to do, but if you want to find the first child div of drop-area that does not have the class drop-area__itemPage, you can do this:
$(function() {
$("#drop-area").find(".drop-area__item").not('.drop-area__itemPage').first().css({
'color': 'red'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drop-area">
<div id="page1" class=".drop-area__item ui-droppable drop-area__itemPage">1</div>
<div id="page2" class="drop-area__item ui-droppable ui-droppable-active">2</div>
<div id="page3" class="drop-area__item ui-droppable ui-droppable-active">3</div>
</div>