manipulating css element with jquery

Question

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

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 :

change the overlay background opacity and z-index so it will be overlaying the body
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>

Tirthraj Barot · Accepted Answer · 2016-11-24 08:26:53Z

3

.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>

edited Nov 24, 2016 at 8:26

answered Nov 24, 2016 at 7:24

Tirthraj Barot

2,6792 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Citra45Abadi Over a year ago

thank you it works now. but another question, when I clicked on button once, it just show the overlay, then I click on the button again, now the divs are moving. why can't it be executed at the same time?

Tirthraj Barot Over a year ago

Alright.. Let me have a look.. I ll execute it and will be back in a while. @Citra45Abadi

Citra45Abadi Over a year ago

I already tried your code, it still not changing the overlay and moving div at the same time

Tirthraj Barot Over a year ago

I tested it.. Divs are moving simultaneously in my browser.. what browser do you use @Citra45Abadi

Tirthraj Barot Over a year ago

And if you are trying the opacity thing, its value is between 0 and 1. so if you make the opacity 1 once, then it remains 1 untill you yourself make it 0 @Citra45Abadi

|

Robert M. · Accepted Answer · 2016-11-24 07:28:33Z

1

Change your button to:

<button class="show">Menu</button>

Then in your jQuery use:

$(".show").on("click", function() {
  show();
});

Sets an on click handler for the button element. See: http://api.jquery.com/on/

answered Nov 24, 2016 at 7:28

Robert M.

6138 silver badges18 bronze badges

1 Comment

Citra45Abadi Over a year ago

hi thank you for that. I did what you suggest, but the first click still just changes the overlay, and the second click moves the divs

Collectives™ on Stack Overflow

manipulating css element with jquery

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related