Honzis Novák Honzis Novák - 4 months ago 30
Javascript Question

jQuery If .hasClass, then enable .hover

I have 2 divs:

.left
and
.right
.

What I want, is that when
.active
class isn't linked to these divs, then enable .hover function. It does this if:

if (!($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"))) {}


But it doesn't work, if I change this condition to true, or false, then script doesn't realize it . It looks like it remembers value of this condition from the page load, not changes after that.



if (!($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"))) {
$(".left").hover(function(){
$(".left").css("margin-left", "-10%");
}, function(){
$(".left").css("margin-left", "-50%");
});
$(".left").hover(function(){
$(".right").css("margin-left", "90%");
}, function(){
$(".right").css("margin-left", "50%");
});
//animace praveho panelu
$(".right").hover(function(){
$(".left").css("margin-left", "-90%");
}, function(){
$(".left").css("margin-left", "-50%");
});
$(".right").hover(function(){
$(".right").css("margin-left", "10%");
}, function(){
$(".right").css("margin-left", "50%");
});
}

$(".left").click(function () {
$(".left").addClass("active");
$(".right").removeClass("active");
$(".left").css("margin-left", "-10%");
$(".right").css("margin-left", "90%");

});
$(".right").click(function () {
$(".right").addClass("active");
$(".left").removeClass("active");
$(".left").css("margin-left", "-90%");
$(".right").css("margin-left", "10%");
});

body {
line-height: 1;
overflow-x: hidden;
}
html,body, input, textarea{
height: 100%;
}

.container{
width: 100%;
height: 100%;
background-color: aqua;
}

.half{
display: inline;
position: absolute;
width: 100%;
height: 100%;
transition-duration: .5s;
transition-timing-function: ease-in-out;
}

.left{
margin-left: -50%;
background-color: antiquewhite;
}
.right{
margin-left: 50%;
background-color: cadetblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="half left" id="panel-left">

</div>
<div class="half right" id="panel-right">

</div>
</div>





Goal:

Hover works, when the page is loaded, but once you click on one of these divs, then

$(".right").click(function () {
$(".right").addClass("active");
});


So in this logic, .active will be added to .right, so hover wouldn't work anymore... But it does.

Answer
function clicked() {
  var bool = ($("#panel-left").hasClass("active") || $("#panel-right").hasClass("active"));
  return bool;


}

$(".left").hover(function() {
  if (!clicked()) ;
    $(".left").css("margin-left", "-10%");
}, function() {
  if (!clicked())
    $(".left").css("margin-left", "-50%");
});
$(".left").hover(function() {
  if (!clicked())
    $(".right").css("margin-left", "90%");
}, function() {
  if (!clicked())
    $(".right").css("margin-left", "50%");
});
//animace praveho panelu
$(".right").hover(function() {
  if (!clicked())
    $(".left").css("margin-left", "-90%");
}, function() {
  if (!clicked())
    $(".left").css("margin-left", "-50%");
});
$(".right").hover(function() {
  if (!clicked())
    $(".right").css("margin-left", "10%");
}, function() {
  if (!clicked())
    $(".right").css("margin-left", "50%");
});


$(".left").click(function() {
  $(".left").addClass("active");
  $(".right").removeClass("active");
  $(".left").css("margin-left", "-10%");
  $(".right").css("margin-left", "90%");

});
$(".right").click(function() {
  $(".right").addClass("active");
  $(".left").removeClass("active");
  $(".left").css("margin-left", "-90%");
  $(".right").css("margin-left", "10%");
});

Can be optimized, but at least it does what you want. Hope that helps, and good luck!

Comments