We Keep Coding

.click only if div contains 2 specific divs

I have a an on.click, but I want it to only run if #battle contains #obiWanPicked and #darthMaul. For whatever reason it seems to be ignoring the if statement and running the click, no matter what.
Most of my html content is dynamically created in JavaScript, thats why I start using .on instead of .click lower down when I'm manipulating objects dynamically created.
if ($("#battle").has("#obiWanPicked") && $("#battle").has("#darthMaul")) {
$("#battle").on("click", "#attack", function () {
if(darthMaulStats.healthPoints <= 0){
$("#darthMaul").remove();
alert("You win!");
}
darthMaulStats.healthPoints = darthMaulStats.healthPoints - obiWanStats.attackPower;
obiWanStats.attackPower = obiWanStats.attackPower + 15;
$("#darthMaul").text(darthMaulStats.healthPoints);
obiWanStats.healthPoints = obiWanStats.healthPoints - 5;
$("#obiWanPicked").text(obiWanStats.healthPoints);
console.log(obiWanStats);
$('#yourFighters').remove();
});
}
All of the above code
<div id="gameModule">
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<div id="allFighters">Pick your Fighter!<br /></br>
<div id="obiWan">
<h2>120</h2>
</div>
<div id="darthMaul">
<h2>150</h2>
</div>
<div id="hanSolo">
<h2>100</h2>
</div>
<div id="maceWindu">
<h2>200</h2>
</div>
</div>
</div>
<div id="col-2"></div>
</div>
<div id="row">
<div id="yourFighters"></br>Your Pick<br></div>
</div>
<div id="row">
<div id="enemyFighters">Your Enemies: Click to fight<br></div>
</div>
<div id="row">
<div id="battle">Time to Battle!</br><br></div>
</div>
<div id="row">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="footer">
<br />
FOOTER
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
var allFighters = $('#allFighters');
var yourFighters = $('#yourFighters');
var enemyFighters = $('#enemyFighters');
var battle = $('#battle');
var obiWan = $('#obiWan');
var darthMaul = $('#darthMaul');
var darthMaulBattle = $('#darthMaulBattle');
var hanSolo = $('#hanSolo');
var maceWindu = $('#maceWindu');
var attack = $('#attack')
var obiWanStats = {
healthPoints: 120,
attackPower: 15,
counterAttackPower: 14,
};
var darthMaulStats = {
healthPoints: 150,
attackPower: 15,
counterAttackPower: 14,
};
var hanSoloStats = {
healthPoints: 100,
attackPower: 15,
counterAttackPower: 14,
};
var maceWinduStats = {
healthPoints: 200,
attackPower: 15,
counterAttackPower: 14,
};
console.log(maceWinduStats.healthPoints);
obiWan.click(function () {
allFighters.remove();
yourFighters.append("<div id='obiWan'>120</div><h1>");
enemyFighters.append("<div id='darthMaul'>150</div>");
enemyFighters.append("<div id='hanSolo'>100</div>");
enemyFighters.append("<div id='maceWindu'>200</div>");
battle.append("<div id='obiWanPicked'>" + obiWanStats.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline; '>VERSUS");
});
darthMaul.click(function () {
allFighters.remove();
yourFighters.append("<div id='darthMaul'>120</div>");
enemyFighters.append("<div id='obiWan'>150</div>");
enemyFighters.append("<div id='hanSolo'>100</div>");
enemyFighters.append("<div id='maceWindu'>200</div>");
battle.append("<div id='darthMaulPicked'>" + darthMaulStats.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline; '>VERSUS");
});
hanSolo.click(function () {
allFighters.remove();
yourFighters.append("<div id='hanSolo'>120</div>");
enemyFighters.append("<div id='darthMaul'>150</div>");
enemyFighters.append("<div id='obiWan'>100</div>");
enemyFighters.append("<div id='maceWindu'>200</div>");
battle.append("<div id='hanSoloPicked'>" + hanSoloStats.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline; '>VERSUS");
});
maceWindu.click(function () {
allFighters.remove();
yourFighters.append("<div id='maceWindu'>120</div>");
enemyFighters.append("<div id='darthMaul'>150</div>");
enemyFighters.append("<div id='hanSolo'>100</div>");
enemyFighters.append("<div id='obiWan'>200</div>");
battle.append("<div id='maceWinduPicked'>" + maceWindu.healthPoints + "</div> <p style='color: red; padding-left: 500px; padding-right: 500px; text-decoration: overline;'>VERSUS");
});
$("#enemyFighters").on("click", "#darthMaul", function () {
$(this).remove();
console.log("meme");
battle.append("<div id='darthMaul' style='float: none; margin-left: 50%; margin-top: -35px;'>" + darthMaulStats.healthPoints + "</div><div id='attack'>Attack!</div>");
});
$("#enemyFighters").on("click", "#hanSolo", function () {
$(this).remove();
console.log("meme");
battle.append("<div id='hanSolo' style='float: none; margin-left: 50%; margin-top: -35px;'>" + hanSoloStats.healthPoints + "</div><div id='attack'>Attack!</div>");
});
$("#enemyFighters").on("click", "#maceWindu", function () {
$(this).remove();
console.log("meme");
battle.append("<div id='maceWindu' style='float: none; margin-left: 50%; margin-top: -35px;'>" + maceWinduStats.healthPoints + "</div><div id='attack'>Attack!</div>");
});
$("#enemyFighters").on("click", "#obiWan", function () {
$(this).remove();
console.log("meme");
battle.append("<div id='obiWan' style='float: none; margin-left: 800px; margin-top: -35px;'>" + obiWanStats.healthPoints + "</div><div id='attack'>Attack!</div>");
});

Maybe you are trying to do something like this. Using find and testing the length should work.
/* Maybe you are trying to do something like this. Using find and testing the length should work. */
$("#battle").on("click", "#attack", function () {
if ($("#battle").find("#obiWanPicked").length > 0 && $("#battle").find("#darthMaul").length > 0){
console.log("You win!");
} else {
console.log("You Lose!");
}
});
/* Just for testing */
$("body").on("click", "#toggleObiwan", function(){
if($("#battle").find("#obiWanPicked").length > 0){
$("#obiWanPicked").remove();
} else {
$("#battle").append("<div id='obiWanPicked'>O</div>");
}
});
$("body").on("click", "#toggleDarthMaul", function(){
if($("#battle").find("#darthMaul").length > 0){
$("#darthMaul").remove();
} else {
$("#battle").append("<div id='darthMaul'>D</div>");
}
});
#battle {
width: 200px;
height: 100px;
background: green;
}
#obiWanPicked {
width: 20px;
height: 20px;
background: skyblue;
line-height: 20px;
margin: 5px;
}
#darthMaul {
width: 20px;
height: 20px;
background: red;
line-height: 20px;
margin: 5px;
}
button {
width: 100px;
font-size: 11px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button id="toggleObiwan">TOGGLE OBIWAN</button>
<button id="toggleDarthMaul">TOGGLE DARTH MAUL</button>
<div id="battle">
<button id="attack">ATTACK</button>
<div id="obiWanPicked">O</div>
<div id="darthMaul">D</div>
</div>

Not sure here... I'm kind of replying quick. But I understand your question from this:
I want it to only run if #battle contains #obiWanPicked and #darthMaul
Now the click handler is registered on page load where (I suppose) the two ids to be checked for existance are there.
Move that condition in the click handler!
$("#battle").on("click", "#attack", function () {
if ($("#battle").has("#obiWanPicked").length && $("#battle").has("#darthMaul").length) {
if(darthMaulStats.healthPoints <= 0){
//...
So the condition will be checked on every click instead of only when the handler gets registered.
;)
showdev mentionned a good point... Add .length after has(), so the condition will evaluate on length instead of on an object.
A zero length evaluates to false. Any other lenght evaluates to true.

Toggle method without show/hide option

How to use .toggle() method but not for show and hide purposes?
For example, when I click on a certain div I would like to animate it's position
$(div).animate({"left":"+=50px"}); and then on the second click to return the div on the same position $(div).animate({"left":"-=50px"}).
I know there is other solution but I would like to achieve this with .toggle() without hiding an showing the div. Any ideas?

$("#myDiv").toggle(function() {
$(this).stop().animate({
left:"+=50"
}, 500);
}, function() {
$(this).stop().animate({
left:"-=50"
}, 500);
});
#myDiv{
background-color:black;
width:100px;
height:100px;
position:absolute;
left:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="myDiv"></div>
hope this answer your question. However, jQuery 1.9 and newer do not allow this feature.

there is no toggle function using click since 1.9 . But you can still doing this using two ways:
for more explaination
$(function(){
//basic method
var clicked = false;
$('#mydiv1').click(function(){
if(clicked){
clicked = false;
$(this).animate({"left":"+=50px"});
}else{
clicked=true;
$(this).animate({"left":"-=50px"});
}
});
//create new function like old built-in function
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
$('#mydiv2').clickToggle(function(){
$(this).animate({"left":"+=50px"});
}, function(){
$(this).animate({"left":"-=50px"});
});
});
#mydiv1{
background-color: yellow;
width: 50px;
height: 50px;
position: absolute;
left: 100px;
}
#mydiv2{
background-color: blue;
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="mydiv1"></div>
<div id="mydiv2"></div>
</div>

my drag & drop is not working

i want move my #timebase1 div into draghere div. now its move only the start of the div, i want to drop it in anywhere inside the dragehere div.
function funct(e) {
var id = e.id;
mouseXY(id);
}
function mouseXY(id) {
//alert(id);
var x = event.pageX,
y = event.pageY
$('#' + id).css({
top: y,
left: x + ''
});
}
.activelevel1 {
background-color: #EA623E;
}
.timescalebase {
margin-top: 13px;
height: 7px;
position: relative;
width:0px;
}
<div id="draghere"style="width:100%;margin-top:25px;">
<div id="timebase1"draggable="true"class="timescalebase activelevel1" ondrag=funct(this)>
</div>

You must allowdrop on your target div like this :
function funct(e) {
var id = e.id;
mouseXY(id);
}
function allowDrop(ev) {
ev.preventDefault();
}
function mouseXY(id) {
var x = event.pageX,
y = event.pageY
$('#' + id).css({
left: x
});
}
.activelevel1 {
background-color: red;
width: 10px;
height: 10px;
}
.timescalebase {
margin-top: 13px;
height: 7px;
position: relative;
}
#draghere {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draghere" style="width:100%;margin-top:25px;" ondragover="allowDrop(event)">
<div id="timebase1" draggable="true" class="timescalebase activelevel1" ondrag="javascript:funct(this)">
</div>
</div>
EDIT
One example with jquery-ui :
https://jsfiddle.net/2gaq2r15/
$(document).ready(function(e) {
$("#timebase1").draggable({
containment: "#draghere",
axis: "x"
});
});

How to prevent parent click event when the user clicks on his child element? AngularJS

I have a <div> with a ng-click but this <div> have a child element with also a ng-click directive.
The problem is that the click event on the child element trigger also the click event of the parent element.
How can I prevent the parent click event when I click on his child?
Here is a jsfiddle to illustrate my situation.
Thank you in advance for your help.
EDIT
Here is my code:
<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
<div id="child" ng-click="childClick()"></div>
<p ng-bind="elem"></p>
</div>
<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>
<script>
function TestController($scope) {
$scope.parentClick = function() {
$scope.elem = 'Parent';
}
var i = 1;
$scope.childClick = function() {
$scope.elem = 'Child';
$scope.childElem = 'Child event triggered x' + i;
i++;
}
}
</script>

You should use the event.stopPropagation() method.
see: http://jsfiddle.net/qu86oxzc/3/
<div id="child" ng-click="childClick($event)"></div>
$scope.childClick = function($event) {
$event.stopPropagation();
...
}

Use event.stopPropagation to stop the event from bubbling up the DOM tree from child event handler.
Updated Demo
function TestController($scope) {
$scope.parentClick = function() {
$scope.elem = 'Parent';
}
var i = 1;
$scope.childClick = function(e) {
$scope.elem = 'Child';
$scope.childElem = 'Child event triggered x' + i;
i++;
e.stopPropagation(); // Stop event from bubbling up
}
}
body {
width: 100%;
height: 100%;
overflow: hidden;
}
#parent {
width: 100px;
height: 100px;
position: relative;
z-index: 1;
margin: 10px auto 0 auto;
background-color: #00acee;
border-radius: 2px;
cursor: pointer;
}
#parent:hover {
opacity: 0.5;
}
#child {
width: 20px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
background-color: #FFF;
border-radius: 2px;
cursor: pointer;
}
#child:hover {
opacity: 0.5;
}
#parent p {
width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
<div id="child" ng-click="childClick($event)"></div>
<!-- ^^^^^^^ -->
<p ng-bind="elem"></p>
</div>
<div>
<p style="text-align:center" ng-bind="childElem"></p>
</div>
</body>

also you can use this as it use do the same.
<div id="child" ng-click="childClick();$event.stopPropagation();"></div>

Even if Pieter Willaert's answer is much more beautiful i updated your fiddle with a simple boolean check:
http://jsfiddle.net/qu86oxzc/6/
function TestController($scope) {
$scope.boolean = false;
$scope.parentClick = function () {
if (!$scope.boolean) $scope.elem = 'Parent';
$scope.toggleBoolean();
}
var i = 1;
$scope.childClick = function () {
$scope.boolean = true;
$scope.elem = 'Child';
$scope.childElem = 'Child event triggered x' + i;
i++;
}
$scope.toggleBoolean = function () {
$scope.boolean = !$scope.boolean;
}
}

You can also try $event.stopPropagation();. write it after the child function. It working like a preventdefault.
<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
<div id="child" ng-click="childClick();$event.stopPropagation();"></div>
<p ng-bind="elem"></p>
</div>
<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>

Jquery animation/function help needed

I'm working on my first serious website and i'm stuck on this problem.
First of all I think my JQuery is extremly clumsy and could probably have been done in a more efficient way, would love some help on how to code this better (Feks i probably use to many functions).
Secoundly I need some help with the animation. I want the divs to animate over to the leftside off the container before they open. The way it is now looks so unnatural.
I would appreciate any help.
http://jsfiddle.net/Skaadel/nt8a29gm/1/
HTML
<div class="container">
<div class="row">
<div class="test1 col-sm-3">
<div id="boks1">About Me</div>
</div>
<div class="test2 col-sm-3">
<div id="boks2">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div id="boks3">Project</div>
</div>
<div class="test4 col-sm-3">
<div id="boks4">TEST</div>
</div>
</div>
</div>
CSS
html {
width: 100%;
}
#test {
background-color: blue;
height: 400px;
width: 400px;
margin: auto;
}
#wrapper {
height: 500px;
}
.container {
background-color: black!important;
margin-bottom: 40px!important;
}
#boks1 {
height: 400px;
width: 100px;
background-color: red;
position: relative;
z-index: 15;
}
#boks2 {
height: 400px;
width: 100px;
background-color: blue;
}
#boks3 {
height: 400px;
width: 100px;
background-color: white;
}
#boks4 {
height: 400px;
width: 100px;
background-color: pink;
}
JQUERY
$(document).ready(function () {
$("#boks1").click(function () {
if ($("#boks1").width() == 100) {
$("#boks1").animate({
width: "720px"
});
$("#boks2").css("display", "none");
$("#boks3").css("display", "none");
$("#boks4").css("display", "none");
} else {
$("#boks1").animate({
width: "100px"
});
$("#boks2").css("display", "");
$("#boks3").css("display", "");
$("#boks4").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks2").click(function () {
if ($("#boks2").width() == 100) {
$("#boks2").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test4").css("display", "none");
$(".test3").css("display", "none");
} else {
$("#boks2").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test4").css("display", "");
$(".test3").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks3").click(function () {
if ($("#boks3").width() == 100) {
$("#boks3").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test2").css("display", "none");
$(".test4").css("display", "none");
} else {
$("#boks3").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test2").css("display", "");
$(".test4").css("display", "");
}
});
});
$(document).ready(function () {
$("#boks4").click(function () {
if ($("#boks4").width() == 100) {
$("#boks4").animate({
width: "720px"
});
$(".test1").css("display", "none");
$(".test2").css("display", "none");
$(".test3").css("display", "none");
} else {
$("#boks4").animate({
width: "100px"
});
$(".test1").css("display", "");
$(".test2").css("display", "");
$(".test3").css("display", "");
}
});
});

I have changed your code somewhat. Changes are as follows:
1) In your HTML added class name boks class="boks" along your inner Div.
2) In your CSS added properties for .boks, #boks1-2-3-4 and .col-sm-3. Also Added class .zindex
3) In your JQuery i changed everything. Have a look and ask if you stuck anywhere.
Working : Demo
JQuery
$(document).ready(function() {
$(".boks").click(function() {
var curId = this.id; //Gives you id of clicked element.
var curWidth = $("#" + curId).width(); // Taking width to check if it's 100px.
var offset = $("#" + curId).offset(); // Taking Position for animating to left.
var leftPos = offset.left;
var firstElementLeftPos = $("#boks1").offset().left;
leftPos = leftPos - firstElementLeftPos;
if (curWidth == 100) {
$(this).parent(".col-sm-3").css('left', '-' + leftPos + 'px');
$("#" + curId).css("width", "720px").addClass('zindex');
} else {
$(this).parent(".col-sm-3").css('left', '0px');
$("#" + curId).css("width", "100px").delay(500).queue(function() {
$("#" + curId).removeClass('zindex');
});
}
});
});
CSS
html {
width: 100%;
}
#test {
background-color: blue;
height: 400px;
width: 400px;
margin: auto;
}
#wrapper {
height: 500px;
}
.container {
background-color: black!important;
margin-bottom: 40px!important;
}
/* Edits are to Below CSS */
.boks {
height: 400px;
width: 100px;
position: relative;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
#boks1 {
background-color: red;
}
#boks2 {
background-color: blue;
}
#boks3 {
position: relative;
background-color: white;
}
#boks4 {
background-color: pink;
}
.col-sm-3 {
left: 0px;
transition: 0.5s ease-in-out;
position: relative;
}
.zindex {
z-index: 999;
}
HTML
<div class="row">
<div class="test1 col-sm-3">
<div class="boks" id="boks1">About Me</div>
</div>
<div class="test2 col-sm-3">
<div class="boks" id="boks2">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div class="boks" id="boks3">Project</div>
</div>
<div class="test4 col-sm-3">
<div class="boks" id="boks4">TEST</div>
</div>
</div>
</div>

just to show you how you could reduce your code with using $(this) and class names in jQuery ...
http://jsfiddle.net/nt8a29gm/3/
$(document).ready(function () {
$(".box").click(function () { // check for click on .box
if($(this).width() == 100) { // if this one width is 100
$('.box').not(this).hide(); // hide all but this
$(this).animate({ // animate the one we clicked on
width: "720px"
});
} else {
$(this).animate({ // make this one small again
width: "100px"
}, 900, function() { // 900 is animation speed
// Animation complete. // wait this animation is finished
$('.box').not(this).show(); // show all boxes again
});
}
});
});
HTML see class="box"
<div class="container">
<div class="row">
<div class="test1 col-sm-3">
<div class="box">About Me</div>
</div>
<div class="test2 col-sm-3">
<div class="box">Portfolio</div>
</div>
<div class="test3 col-sm-3">
<div class="box">Project</div>
</div>
<div class="test4 col-sm-3">
<div class="box">TEST</div>
</div>
</div>
</div>