Citra45Abadi Citra45Abadi - 15 days ago 5
CSS Question

manipulating css element with jquery

I'm still learning jquery.

I want to make a code, if I click on button, 2 divs will move simultaneously and the background will be overlayed by another div with

opacity
of 0.5

enter image description here

so when I click on menu button, the menu Right and menu Left will move left and right respectively

then
z-index
and
opacity
of
div class="overlay"
will be changed, then check if
#circleMenu
has
.open
class, if not then add
.open
class and move
#left
and
#right
div

I use custom defined function to run it
onclick="show()"


the code does not work, when I check for problem and error on the console it says :


SyntaxError: Unexpected token. Uncaught ReferenceError: show is not defined


EDIT

thanks to @Tirthraj Barot, the error is now gone.

still my question remains, I expect the code to do this when I click on button :


  1. change the overlay background opacity and z-index so it will be overlaying the body

  2. move the 2 divs inside circle simultaneously



I expected it to be executed at the same time, but in reality it is not. the first time I clicked on button, only the background is overlayed, the second time, the background overlay is gone but the divs moves



function show() {
$(".overlay").css("z-index", 1);
$(".overlay").css("opacity", 1);
if ($("#circleMenu").hasClass("open") == true) {
$("#circleMenu").removeClass("open");
$("#left").css("left", "-100px");
$("#right").css("right", "-100px");
} else if ($("#circleMenu").hasClass("open") == false) {
$("#circleMenu").addClass("open");
$("#left").css("left", "100px");
$("#right").css("right", "100px");
}
}
$(".show").on("click", function() {
show();
});

body {
margin : 0;
padding : 0;
width : 100%;
height : 100%;
}
.overlay {
width : 100%;
height : 100%;
background-color : gray;
opacity : 0;
z-index : -1;
position : absolute;
transition : all 1s;
}
.kontainer-menu {
width : 50%;
height : 30%;
margin : auto;
position : relative;
z-index : 2;
top : 40%;
}
#circleMenu {
width : 200px;
height : 200px;
border-radius : 50%;
background-color : red;
z-index : 3;
position : relative;
left : 35%;
}
#left {
width : auto;
position : absolute;
background-color : green;
top : 90px;
left : 100px;
}
#right {
width : auto;
position : absolute;
background-color : teal;
top : 90px;
right : 100px;
}

<div class="overlay"></div>
<div class="kontainer-menu">
<button onclick="show()">Menu</button>
<div id="circleMenu">
<div id="left"> menu Left</div>
<div id="right"> menu Right</div>
</div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>




Answer

.overlay should be in double quotes

function show() {
    $(".overlay").css("z-index", 1);
    $(".overlay").css("opacity", 1);
    if ($("#circleMenu").hasClass("open") == true) {
        $("#circleMenu").removeClass("open");
        $("#left").css("left", "-100px");
        $("#right").css("right", "-100px");
    } else if ($("#circleMenu").hasClass("open") == false) {
        $("#circleMenu").addClass("open");
        $("#left").css("left", "100px");
        $("#right").css("right", "100px");
    }
}

----------------UPDATE----------

I updated the code above. You forgot to write px after 100 and -100 in if and else blocks.

------------ UPDATE 2 ------------

Just to show the simultaneous movement of both the divs, the left and the right, And to change the background overlay color according to my perceptions, I have updated your code a little. Please let me know if I have misinterpreted your requirements..

Have a look at it.

function show() {
  if ($("#circleMenu").hasClass("open") == true) {
    $(".overlay").css("z-index", 1);
    $(".overlay").css("opacity", 1);

    $("#circleMenu").removeClass("open");
    $("#left").css("left", "-100px");
    $("#right").css("right", "-100px");
  } else if ($("#circleMenu").hasClass("open") == false) {
    $(".overlay").css("z-index", 0);
    $(".overlay").css("opacity", 0);


    $("#circleMenu").addClass("open");
    $("#left").css("left", "100px");
    $("#right").css("right", "100px");
  }
}
$(".show").on("click", function() {
  show();
});
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.overlay {
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0;
  z-index: -1;
  position: absolute;
  transition: all 1s;
}
.kontainer-menu {
  width: 50%;
  height: 30%;
  margin: auto;
  position: relative;
  z-index: 2;
  top: 40%;
}
#circleMenu {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: red;
  z-index: 3;
  position: relative;
  left: 35%;
}
#left {
  width: auto;
  position: absolute;
  background-color: green;
  top: 90px;
  left: 100px;
  transition: all 1s;
}
#right {
  width: auto;
  position: absolute;
  background-color: teal;
  top: 90px;
  right: 100px;
  transition: all 1s;
}
<div class="overlay"></div>
<div class="kontainer-menu">
  <button onclick="show()">Menu</button>
  <div id="circleMenu">
    <div id="left">menu Left</div>
    <div id="right">menu Right</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>