Triggering a flip animation in CSS3 with Javascript - javascript

I am attempting to make the boxes in my grid flip over with a button click. With pure CSS3, I can make the animation work with hover. My javascript doesn't work at all. My aim is to trigger this CSS animation by using a button click that calls a function in javascript. Thank you for any help that is offered. Here is my code:
<html>
<head>
<meta charset="utf-8">
<title>Sudoku Grid Attempt</title>
<style type="text/css">
#sudoku{
position:relative;
top:150px;
left:150px;
background-color:#666699;
height:800px;
width:800px;
font-family:Lucida Console monospace;
size:1px;
}
.grid{
position:relative;
top:65px;
left:65px;
width:42px;
height:42px;
float:left;
}
.square{
text-align:center;
height:2.6em;
width:2.6em;
}
.square>.front{
position:absolute;
height:2.6em;
width:2.6em;
border-style:solid;
border-width:3px;
border-color:black;
background-color:#ff6600;
transform:perspective(600px) rotateY(0deg);
backface-visibility:hidden;
transition:transform .5s linear 0s;
}
.square>.back{
position:absolute;
height:2.6em;
width:2.6em;
border-style:solid;
border-width:3px;
border-color:black;
background-color:#ff0066;
transform:perspective(600px) rotateY(180deg);
backface-visibility:hidden;
transition:transform .5s linear 0s;
}
/*.square:hover>.front{
transform:perspective(600px) rotateY(-180deg);
}*/
/*.square:hover>.back{
transform:perspective(600px) rotateY(0deg);
}*/
.frontSide{
transform:perspective(600px) rotateY(-180deg);
}
.backSide{
transform:perspective(600px) rotateY(0deg);
}
.button{
height:70px;
width:90px;
border-radius:70px 70px 70px 70px;
border-color:#ff3300;
background-color:#ff3300;
position:relative;
top:600px;
left:-300px;
}
</style>
<script>
document.getElementsByClassName("button").addEventListener("click",flipSide,false);
function flipSide(){
var elem = document.getElementsByClassName("square");
var elemF = document.getElementsByClassName("front");
var elemB = document.getElementsByClassName("back");
var efs = document.getElementsByClassName("frontSide");
var ebs = document.getElementsByClassName("backSide");
elem.elemF += "efs";
elem.elemB += "ebs";
}
</script>
</head>
<body>
<div id="sudoku">
<div class="grid">
<div class="square">
<div class="front">1</div>
<div class="back">2</div>
</div>
<div class="square">
<div class="front">3</div>
<div class="back">4</div>
</div>
<div class="square">
<div class="front">5</div>
<div class="back">6</div>
</div>
<div class="square">
<div class="front">7</div>
<div class="back">8</div>
</div>
<div class="square">
<div class="front">9</div>
<div class="back">10</div>
</div>
<div class="square">
<div class="front">11</div>
<div class="back">12</div>
</div>
<div class="square">
<div class="front">13</div>
<div class="back">14</div>
</div>
<div class="square">
<div class="front">15</div>
<div class="back">16</div>
</div>
<div class="square">
<div class="front">17</div>
<div class="back">18</div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="grid">
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="square">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<button class="button">Solution</button>
</div>
</body>
</html>


Since you said this code works in pure CSS, just using :hover, I would just use pure Javascript to edit the CSS of the element to do the flip.
The code should look something like this:
var k = 0;
function flip() {
var j = document.getElementById("card");
k += 180;
j.style.transform = "rotatey(" + k + "deg)";
j.style.transitionDuration = "0.5s"
}
This is as simple as it gets because it is simply using Javascript to edit the CSS properties of the element. Nothing else.
You could also change .square:hover > .front to #image:active > .front to achieve the same effect.
Check out this JSFiddle.


If you want to use getElementsByClassName method you must get specified element index 0 as example below. You will not get that error message after change this part.
var button = document.getElementsByClassName("button")[0];
if(button != null)
button.addEventListener("click",flipSide,false);
Instead of this it is better to use getElementById method.


I suggest that you check out jQuery. jQuery together with jQueryRotate which has a rotate method and an animateTo property that may be what you need. Here's a simple script to illustrate that when you click on the image it rotates 180 degrees and when you double click on it, it returns to its original position:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - demo</title>
<style type='text/css'>
#image{ margin:30px 30px; }
</style>
<script type='text/javascript' src='js/jquery-latest.js'></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$("#image").rotate({
bind:
{
click : function() {
$(this).rotate({animateTo:180})
},
dblclick : function() {
$(this).rotate({animateTo:0})
}
}
});
});
</script>
</head>
<body>
<div align="center"><img src="images/wizard.gif" id="image"></div>
</body>
</html>
Here's a working example: http://jsfiddle.net/j7gfwfc3/3/

Related

How to show div data by on click event on selector using jQuery

I am new to jQuery and confused about simple logic and need your help to sort the mess. I am using HTML, CSS, jQuery to display some data by on click the jQuery event on selector '.class'.
I have successfully opened the data for the first time for a single div panel. But if I used the same HTML twice then both of the panels display data at the same. Below is the code
jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).siblings(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="" alt="Shea Butter" />
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" />
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" />
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" />
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" />
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" />
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" />
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" />
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" />
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" />
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So I want to open one by one i.e. when someone clicks on the year 2021 then it will open its data and if someone clicks on 2022 then that year div data open.
How to achieve the same?

jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).next(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="" alt="Shea Butter" />
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" />
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" />
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" />
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" />
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" />
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" />
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" />
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" />
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" />
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Use next instead of siblings
JQuery(document).ready(function() {
JQuery(".flip").click(function () {
JQuery(this).next(".panel").slideToggle("slow");
});
});
Working codepen. https://codepen.io/rvtech/pen/zYEWxqR

$(".flip").click(function(e) {
$(this).next().slideToggle()
})
https://codepen.io/hardik9193/pen/yLzKNEZ

jQuery show/hide methods arent working

Here is my codepen for you guys to play with.... CodePen.io
I cannot seem to get the #play-again button to show up once a game has finished using $('#play-again').show().
Any thoughts on this???
Update Added raw html link

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="banner">
<p>tic-tac-toe</p>
<button id="play-again"> <i class="fa fa-repeat"></i></button>
</div>
<div class="board">
<div class="row" id="row-1">
<div class="col" id="col-1-1">
<div class="content"></div>
</div>
<div class="col" id="col-1-2">
<div class="content"></div>
</div>
<div class="col" id="col-1-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-2">
<div class="col" id="col-2-1">
<div class="content"></div>
</div>
<div class="col" id="col-2-2">
<div class="content"></div>
</div>
<div class="col" id="col-2-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-3">
<div class="col" id="col-3-1">
<div class="content"></div>
</div>
<div class="col" id="col-3-2">
<div class="content"></div>
</div>
<div class="col" id="col-3-3">
<div class="content"></div>
</div>
</div>
</div>
</div>
The issue is that you must place the button#play-again outside the p when i changed, it is working for me

Remove parent element [duplicate]

This question already has answers here:
JQuery Remove Parent Elements
(3 answers)
Closed 6 years ago.
can someone help me solve this problem.
I want loop through class 'row' and delete entire class 'card-col' that contain id=x2 or x3.
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3"></div>
</div>
</div>
</div>
expected result something like this.
what jquery i can use ?
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1"></div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x4"></div></div>
</div>
</div>
thanks

Go quickly trough the jQuery docs:
Selectors how to get an element using the right selectors
.closest() test up the DOM tree finding the closest matching element
.remove() yep.
jQuery(function($) { // DOM is now ready
$("#x2, #x3").closest(".card-col").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
</div>
The other way around, you can target first all .card-col and that use :not(:has(#x1)) to filter and than remove
https://api.jquery.com/not-selector/
https://api.jquery.com/has-selector/
jQuery(function($) { // DOM is now ready
$(".card-col:not(:has(#x1))").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
</div>

You could use parents() :
$("#x2, #x3").parents(".card-col").remove();
Hope this helps.
$("#x2, #x3").parents(".card-col").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="card-col">
<div class="card">
<div class="card" id="x1">x1</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x2">x2</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x3">x3</div>
</div>
</div>
<div class="card-col">
<div class="card">
<div class="card" id="x4">x4</div>
</div>
</div>
</div>

jQuery not working in jade. Documnet.ready function not working

Tried different intendations but the jQuery part is still not working.
PS : The jQuery lib is already included this document is extended.
extends home
mixin print(x,y)
if x < y
.column=x
else
.column
mixin rooms(n,num,a,b,c,d)
while n < num
.row(value=n++)
+print(n,a)
+print(n,b)
+print(n,c)
+print(n,d)
block content
div(id="tabs")
.row
.column
a(href="#tab1" onclick="open(this.href)") Ground Floor
.column
a(href="#tab2" onclick="open(this.href)") Ist Floor
.column
a(href="#tab3" onclick="open(this.href)") IInd Floor
div(id="tab1")
+rooms(100,111,111,104,111,111)
div(id="tab2")
+rooms(200,217,217,211,214,211)
div(id="tab3")
+rooms(300,317,317,311,314,311)
script(src='https://code.jquery.com/jquery-2.1.1.min.js')
script.
$(document).ready(function(){
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
});
1.jQuery isn't hiding the div it is asked to hide
2.NO error in console.

The html generated is as expected
I copied the Jade into this online converter.
The end of the output looked like this:
<script>
$(document).ready(function(){
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
</script>});
You missed out the indent before }); so it was placed outside the script element.
no errors in console
This generated the error:
Uncaught SyntaxError: Unexpected end of input
When I corrected that error, it successfully hid the elements:
<div id="tabs"></div>
<div class="row">
<div class="column">Ground Floor</div>
<div class="column">Ist Floor</div>
<div class="column">IInd Floor</div>
</div>
<div id="tab1">
<div value="100" class="row"></div>
<div class="column">101</div>
<div class="column">101</div>
<div class="column">101</div>
<div class="column">101</div>
<div value="101" class="row"></div>
<div class="column">102</div>
<div class="column">102</div>
<div class="column">102</div>
<div class="column">102</div>
<div value="102" class="row"></div>
<div class="column">103</div>
<div class="column">103</div>
<div class="column">103</div>
<div class="column">103</div>
<div value="103" class="row"></div>
<div class="column">104</div>
<div class="column"></div>
<div class="column">104</div>
<div class="column">104</div>
<div value="104" class="row"></div>
<div class="column">105</div>
<div class="column"></div>
<div class="column">105</div>
<div class="column">105</div>
<div value="105" class="row"></div>
<div class="column">106</div>
<div class="column"></div>
<div class="column">106</div>
<div class="column">106</div>
<div value="106" class="row"></div>
<div class="column">107</div>
<div class="column"></div>
<div class="column">107</div>
<div class="column">107</div>
<div value="107" class="row"></div>
<div class="column">108</div>
<div class="column"></div>
<div class="column">108</div>
<div class="column">108</div>
<div value="108" class="row"></div>
<div class="column">109</div>
<div class="column"></div>
<div class="column">109</div>
<div class="column">109</div>
<div value="109" class="row"></div>
<div class="column">110</div>
<div class="column"></div>
<div class="column">110</div>
<div class="column">110</div>
<div value="110" class="row"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div id="tab2">
<div value="200" class="row"></div>
<div class="column">201</div>
<div class="column">201</div>
<div class="column">201</div>
<div class="column">201</div>
<div value="201" class="row"></div>
<div class="column">202</div>
<div class="column">202</div>
<div class="column">202</div>
<div class="column">202</div>
<div value="202" class="row"></div>
<div class="column">203</div>
<div class="column">203</div>
<div class="column">203</div>
<div class="column">203</div>
<div value="203" class="row"></div>
<div class="column">204</div>
<div class="column">204</div>
<div class="column">204</div>
<div class="column">204</div>
<div value="204" class="row"></div>
<div class="column">205</div>
<div class="column">205</div>
<div class="column">205</div>
<div class="column">205</div>
<div value="205" class="row"></div>
<div class="column">206</div>
<div class="column">206</div>
<div class="column">206</div>
<div class="column">206</div>
<div value="206" class="row"></div>
<div class="column">207</div>
<div class="column">207</div>
<div class="column">207</div>
<div class="column">207</div>
<div value="207" class="row"></div>
<div class="column">208</div>
<div class="column">208</div>
<div class="column">208</div>
<div class="column">208</div>
<div value="208" class="row"></div>
<div class="column">209</div>
<div class="column">209</div>
<div class="column">209</div>
<div class="column">209</div>
<div value="209" class="row"></div>
<div class="column">210</div>
<div class="column">210</div>
<div class="column">210</div>
<div class="column">210</div>
<div value="210" class="row"></div>
<div class="column">211</div>
<div class="column"></div>
<div class="column">211</div>
<div class="column"></div>
<div value="211" class="row"></div>
<div class="column">212</div>
<div class="column"></div>
<div class="column">212</div>
<div class="column"></div>
<div value="212" class="row"></div>
<div class="column">213</div>
<div class="column"></div>
<div class="column">213</div>
<div class="column"></div>
<div value="213" class="row"></div>
<div class="column">214</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="214" class="row"></div>
<div class="column">215</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="215" class="row"></div>
<div class="column">216</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="216" class="row"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div id="tab3">
<div value="300" class="row"></div>
<div class="column">301</div>
<div class="column">301</div>
<div class="column">301</div>
<div class="column">301</div>
<div value="301" class="row"></div>
<div class="column">302</div>
<div class="column">302</div>
<div class="column">302</div>
<div class="column">302</div>
<div value="302" class="row"></div>
<div class="column">303</div>
<div class="column">303</div>
<div class="column">303</div>
<div class="column">303</div>
<div value="303" class="row"></div>
<div class="column">304</div>
<div class="column">304</div>
<div class="column">304</div>
<div class="column">304</div>
<div value="304" class="row"></div>
<div class="column">305</div>
<div class="column">305</div>
<div class="column">305</div>
<div class="column">305</div>
<div value="305" class="row"></div>
<div class="column">306</div>
<div class="column">306</div>
<div class="column">306</div>
<div class="column">306</div>
<div value="306" class="row"></div>
<div class="column">307</div>
<div class="column">307</div>
<div class="column">307</div>
<div class="column">307</div>
<div value="307" class="row"></div>
<div class="column">308</div>
<div class="column">308</div>
<div class="column">308</div>
<div class="column">308</div>
<div value="308" class="row"></div>
<div class="column">309</div>
<div class="column">309</div>
<div class="column">309</div>
<div class="column">309</div>
<div value="309" class="row"></div>
<div class="column">310</div>
<div class="column">310</div>
<div class="column">310</div>
<div class="column">310</div>
<div value="310" class="row"></div>
<div class="column">311</div>
<div class="column"></div>
<div class="column">311</div>
<div class="column"></div>
<div value="311" class="row"></div>
<div class="column">312</div>
<div class="column"></div>
<div class="column">312</div>
<div class="column"></div>
<div value="312" class="row"></div>
<div class="column">313</div>
<div class="column"></div>
<div class="column">313</div>
<div class="column"></div>
<div value="313" class="row"></div>
<div class="column">314</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="314" class="row"></div>
<div class="column">315</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="315" class="row"></div>
<div class="column">316</div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div value="316" class="row"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$('#tab1').hide();
$('#tab2').hide();
$('#tab3').hide();
});
</script>

Okay finally when you have a file which is extended you keep your js code in the parent file because keeping at the end of the extended document causes it to be inherited by some tag.

try writing # with ids
div(id="tabs")
.row
.column
a(href="#tab1" onclick="open(this.href)") Ground Floor
.column
a(href="#tab2" onclick="open(this.href)") Ist Floor
.column
a(href="#tab3" onclick="open(this.href)") IInd Floor
#tab1 rooms(100,111,111,104,111,111)
#tab2 rooms(200,217,217,211,214,211)
#tab3 rooms(300,317,317,311,314,311)

jQuery - only target class elements with same parent

So i have a lot of profiles and thereby many divs which are repeated again and again
Now i want to target a class element with jquery and animate another class element in the same profile
in my case:
$(',profile_menu').click(function() {
$( ".profile_like" ).removeClass( "m_hidden" )
$(".profile_like").animate({
left: 0+'%'
},300);
The Problem is that i only want to target the classes which are in the same profile.
I hope that the issue has been well described.
<!-:::::::::::::::::::: Profile 1::::::::::::::::::::::::::::::::::::::::-->
<div class="profile_box">
<div class="profiles">
<div class="profile_icons">
<div class="profile_like m_hidden"></div>
<div class="profile_favorite m_hidden"></div>
<div class="profile_present m_hidden"></div>
<div class="profile_chat m_hidden"></div>
</div>
<div class="profile_spacer"></div>
<div class="info_container">
<div class="info_bar">
<div class="profile_name_spacer"></div>
<div class="profile_name"></div>
<div class="profile_city"></div>
</div>
<div class="profile_menu"></div>
</div>
</div>
</div>
<!-:::::::::::::::::::: Profile 2::::::::::::::::::::::::::::::::::::::::-->
<div class="profile_box">
<div class="profiles">
<div class="profile_icons">
<div class="profile_like m_hidden"></div>
<div class="profile_favorite m_hidden"></div>
<div class="profile_present m_hidden"></div>
<div class="profile_chat m_hidden"></div>
</div>
<div class="profile_spacer"></div>
<div class="info_container">
<div class="info_bar">
<div class="profile_name_spacer"></div>
<div class="profile_name"></div>
<div class="profile_city"></div>
</div>
<div class="profile_menu"></div>
</div>
</div>
</div>
<!-:::::::::::::::::::: Profile 3::::::::::::::::::::::::::::::::::::::::-->
<div class="profile_box">
<div class="profiles">
<div class="profile_icons">
<div class="profile_like m_hidden"></div>
<div class="profile_favorite m_hidden"></div>
<div class="profile_present m_hidden"></div>
<div class="profile_chat m_hidden"></div>
</div>
<div class="profile_spacer"></div>
<div class="info_container">
<div class="info_bar">
<div class="profile_name_spacer"></div>
<div class="profile_name"></div>
<div class="profile_city"></div>
</div>
<div class="profile_menu"></div>
</div>
</div>
</div>
<!-:::::::::::::::::::: Profile 4::::::::::::::::::::::::::::::::::::::::-->
...
...
...

Categories

Resources