We Keep Coding

Detect if hovering over image in div with jQuery

I have an example:
<div class="class1" id="id_1">
test
</div>
function handler(ev) {
let target = $(ev.target);
let elId = target.attr('id');
if( target.is("div[id^='id_']") ) {
let lastChar = elId.substr(elId.length - 1);
alert('The mouse was over'+ lastChar );
}
}
$("div[id^='id_']").mouseleave(handler);
It works in such a way that if I hovering on an element, then alert is displayed - the problem occurs if I have only a picture in this div - then it does not work. How to make it work even more if I only have a picture like this, e.g. I have:
<div class="class1" id="id_1">
<img src="/img_src">
</div>

Use $(ev.currentTarget) or $(this) to reference the element that matches the selector rather than any target that is a descendant
function handler(ev) {
console.clear();
let $div = $(ev.currentTarget);
let elId = $div.attr('id');
console.log('currentTarget id:', elId)
$div= $(this);
elId =$div.attr('id');
console.log('this id:', elId)
}
$("div[id^='id_']").mouseleave(handler);
.class1{ margin : 1em; border: 1px solid green
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1" id="id_1">
<div class="inner">test 1</div>
</div>
<div class="class1" id="id_2">
<div class="inner">test 2</div>
</div>

How can I toggle between two sections while keeping one element visible?

var toggles = document.querySelectorAll("[data-toggle-content-section]");
var sections = document.querySelectorAll(".content-bar__section");
var toggleSections = function(event) {
event.preventDefault();
sections.forEach(function(elem) {
console.log(elem) ;
elem.classList.toggle("active");
});
};
toggles.forEach(function(elem) {
elem.addEventListener("click", toggleSections, ) ;
});

Depending on your HTML you could do something like this:
Note that this is just an example and might have to adjusted to reflect your own markup
var toggles = document.querySelectorAll("[data-toggle-content-section]");
var sections = document.querySelectorAll(".content-bar__section");
var toggleSections = function(event) {
event.preventDefault();
sections.forEach(function(elem) {
elem.classList.remove("active");
});
// get the child element of the just clicked toggle element
event.target.querySelector('.content-bar__section').classList.add("active");
};
toggles.forEach(function(elem) {
elem.addEventListener("click", toggleSections);
});
.content-bar__section{
display: none;
}
.active{
display: block;
}
<div data-toggle-content-section>
Headline 1
<div class="content-bar__section">
Section 1
</div>
</div>
<div data-toggle-content-section>
Headline 2
<div class="content-bar__section">
Section 2
</div>
</div>
<div data-toggle-content-section>
Headline 3
<div class="content-bar__section">
Section 3
</div>
</div>
As you also tagged jQuery here the same solution depending on jQuery:
var $toggles = $("[data-toggle-content-section]");
var $sections = $(".content-bar__section");
$toggles.on('click', function() {
event.preventDefault();
$sections.removeClass('active');
$(this).find('.content-bar__section').addClass('active');
});
.content-bar__section {
display: none;
}
.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-toggle-content-section>
Headline 1
<div class="content-bar__section">
Section 1
</div>
</div>
<div data-toggle-content-section>
Headline 2
<div class="content-bar__section">
Section 2
</div>
</div>
<div data-toggle-content-section>
Headline 3
<div class="content-bar__section">
Section 3
</div>
</div>

In the case where you have n areas and you want to only show/activate one at a time, the nearly canonical way to do this is:
function selectOne(e) {
document.querySelectAll(".commonClass").forEach(function(elem) {
//disable element
elem.disabled = true;
});
//enable selected element
document.getElementById(e.target).disabled = false;
}

Two clicks - different actions (same div)

Hope someone could help!
I have some divs (using bootstrap) like:
<div class="container">
<div class="row" id="r2">
<div class="col-lg-8">
<div class="block-in-div"></div>
</div>
<div class="col-lg-4">
<div class="col-lg-12">
<div class="block-in-div"></div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12">
<div class="block-in-div"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="block-in-div"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="block-in-div"></div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="block-in-div"></div>
</div>
</div>
</div>
</div>
</div>
</div>
When I click on some div it should randomly get some background color.
When I click on another div, previous should reset its background, and newly clicked div should get its random background.
Whith this issues everything is clear.
I can`t get how to do next: I clicked on div, it changes its colour, I click again and it should become bigger.
Color randomizer:
function getRandomColor() {
var r=Math.floor(Math.random() * (256));
var g=Math.floor(Math.random() * (256));
var b=Math.floor(Math.random() * (256));
var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
return color;};
Reset background:
function cancelBg() {
let selectedBlocks = $("div.block-in-div");
$.each(selectedBlocks,function(key,value){
selectedBlocks[key].style.background = "none";
});};
Main function:
$(document).ready(function () {
$(".block-in-div").click(function () {
cancelBg();
$(this).css("background", getRandomColor());
});});
Trying smth like:
$(document).ready(function () {
$(".block-in-div").click(function () {
var state = 1;
return function () {
cancelBg();
if(state===1){
$(this).css("background", getRandomColor());
state=2;
}
else if(state===2){
/*$(this).addClass("active");*/
state=1;
}
};
}());});
.active just for test and it is simply:
.active{
height: 100vh;
width: 100vw;
}
Please help!
Be the force with you! :)

You can achieve this by adding a class when the div was clicked first.
$(document).ready(function () {
$(".block-in-div").click(function () {
return function () {
cancelBg();
if(!$(this).hasClass('not-resized')) {
$(this).css("background", getRandomColor());
$(this).addClass('not-resized');
}
else if ($(this).hasClass('not-resized')) {
$(this).addClass("active");
$(this).removeClass('not-resized');
}
};
}());
});
If you need to reset the state on click on other div you can just add $(".block-in-div").removeClass('not-resized'); at the end.
Note 1: Adding active class like you did will have lower priority than the size on original class (add an !important as a temporal fix to see the changes or even better... make a stronger selector).
Note 2: If I didn't get the requirements right pls. tell me.

Thanks everyone!
Mold something like JSFiddle
$(document).ready(function () {
$(".block-in-div").click(function () {
if($(this).hasClass('tofull') && !$(this).hasClass('active')){
$(this).addClass("active");
}
else if($(this).hasClass('active')){
$(this).removeClass("active tofull");
$(this).css("background", "none");
}
else{
cancelBg();
let clr = "#"+((1<<24) * Math.random()|0).toString(16);
$(this).css("background", clr);
$(this).addClass("noColor tofull");
}
});
});
Still got some problems with working but got ideas how to fix it.
Problem is: Click block A (become red), click B (yellow), click C (green), click A again - size changes but no background

Jquery change background colour for a selected div

I have this HTML code div in 4*4 format :
$(document).ready(function() {
$("div").click(function(e){
var id_val=this.id;
var word = id_val.split("-").pop();
alert(word)
e.preventDefault();
for(var i=1;i<=4;i++)
{
if(i!=word)
{
$("#div-"+i+"").css("background-color","white");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-1">
<p>div1</p>
<div id="div-2">
<p>div2</p>
<div id="div-3">
<p>div3</p>
<div id="div-4">
<p>div4</p>
</div>
</div>
</div>
</div>
I have written the jquery code when on click the particular div has to change colour to red and remaining div colour should be white
When I have executed this only the div1 has changing the colour to red and other divs are not changing the colour.
for eg :
if I click div1 change to red colour and other div2,div3,div4 should be in white
color
If I click div2 change to red colour and other div1,div3,div4 should be in white
color

You need to use e.stopPropagation(); to prevent the other div elements from triggering as well.
you didn't properly terminate the first two lines with }); at the end of the script.
$(document).ready(function() {
$("div").click(function(e) {
var id_val = this.id;
var word = id_val.split("-").pop();
if (word != null) {
alert(word)
e.stopPropagation();
for (var i = 1; i <= 4; i++) {
if (parseInt(i) === parseInt(word)) {
$("#div-" + i + "").css("background-color", "red");
} else {
$("#div-" + i + "").css("background-color", "white");
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div-1">
<p>div1</p>
<div id="div-2">
<p>div2</p>
<div id="div-3">
<p>div3</p>
<div id="div-4">
<p>div4</p>
</div>
</div>
</div>
</div>

Try something Like that
$("div").click(function(e){
$("div[id^='div-']").css("background-color","white");
$(this).css("background-color","red");
}

You need to use e.stopPropagation() and not e.preventDefault(). Also since divs are nested you should give a color to the inside p tag and not the div itself. Also terminate your function correctly.
$(document).ready(function() {
$("div").click(function(e){
var id_val=this.id;
$(this).first("p").css("background-color","red")
var word = id_val.split("-").pop();
alert(word)
e.stopPropagation();
for(var i=1;i<=4;i++)
{
if(i!=word)
{
$("#div-"+i+"").css("background-color","white");
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-1">
<p>div1</p>
<div id="div-2">
<p>div2</p>
<div id="div-3">
<p>div3</p>
<div id="div-4">
<p>div4</p>
</div>
</div>
</div>
</div>

This worked for me
$("div").click(function (e) {
$(this).css("background-color", "red");
$('div:not(#' + this.id + ')').css("background-color", "white");
e.stopImmediatePropagation();
});

Try to use this simple code
$(document).ready(function() {
$("div").click(function(e) {
$('div[id^="div-"] p').css("background-color", "white"); //change the remaining elements who's id start with div- color to white
if ($(e.target).is('p')) {
$(e.target).css("background-color", "red"); //change the clicked element color
}
});
});
$("div").click(function(e) {
$('div[id^="div-"] p').css("background-color", "white"); //change the remaining elements who's id start with div- color to white
if ($(e.target).is('p')) {
$(e.target).css("background-color", "red"); //change the clicked element color
}
});
body {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-1">
<p>div1</p>
<div id="div-2">
<p>div2</p>
<div id="div-3">
<p>div3</p>
<div id="div-4">
<p>div4</p>
</div>
</div>
</div>
</div>

How to avoid the particular class from applying css

My HTML
<body>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
<div id="txt_blog_editor" class="box" style="width: 1097px;">
<div class="abc anotherclass">
</div>
</div>
</div>
</div>
<div class="abc"></div>
</body>
My Script
$('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
var pos = $(this).offset();
console.log(pos.left+"||"+pos.top);
var left_pos=(pos.left-15)+"px";
var top_pos=(pos.top+35)+"px";
$(".abc").css({position: "absolute", top: top_pos, left: left_pos });
$(".abc").show();
$(".popup").show();
});
});
I want to apply the left and top to abc class which is without parent and not to the class which is under id="txt_blog_editor"

According to this answer here is a working snippet:
jQuery.expr[':'].noparents = function(a,i,m){
return jQuery(a).parents(m[3]).length < 1;
};
var elts = $(".abc").filter(":noparents(#txt_blog_editor)");
elts.css({ "background-color": "green" });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="finalparent">
<!--many parent divs here-->
<div id="1stparent">
<div id="txt_blog_editor" class="box" style="width: 1097px;">
<div class="abc anotherclass">
ABC With Parent
</div>
</div>
</div>
</div>
<div class="abc">ABC WITHOUT Parent</div>
Basically, you create a new jQuery expression :noparents which returns elements not having selector given parents

You need to check if .abc has a parent #txt_blog_editor http://jsfiddle.net/ugv2pxdw/4/
$('html').on('mouseover','.fr-bttn .fa-picture-o', function () {
var pos = $(this).offset();
console.log(pos.left+"||"+pos.top);
var left_pos=(pos.left-15)+"px";
var top_pos=(pos.top+35)+"px";
$('.abc').each(function(){
if (!$(this).parents('#txt_blog_editor').length) {
$(this).css({position: "absolute",top: top_pos, left: left_pos });
$(this).show();
$(".popup").show();
}
});
});

If abc classes are only direct childs of body, why not using body > .abc as your selector?