Clicking popup button - javascript

I need to do a function that
if class="btn btn-default" exists
click them
this would be problematic bcz there are more btn defaults besides this ones :D
so how do i work with the "Chest unlocked"
<div class="chest_container">
<div class="chest unlocked"></div>
Here's the html
<div id="daily_bonus_content">
<div class="rewards_grid">
<div class="reward day_1">
<div class="center">
<div class="chest_container">
<div class="chest unlocked"></div>
<div class="day">1</div>
<div class="actions">Abrir</div>
</div>
</div>
</div>
<div class="reward day_2">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">2</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_3">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">3</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_4">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">4</div>
<div class="actions"></div>
</div>
</div>
</div>


In vanillaJS, clicking every btn-default in a chest_container
var buttons = document.querySelector(".chest_container .btn-default");
buttons.forEach(function(button) {
button.click();
});
If you catch the click in an event, you can reach the chest_unlocked by doing the following, where e is the event:
var chestUnlockedDiv = e.target.parentElement.parentElement.querySelector(".chest.unlocked");

Related

How to add class to div having same name on button click

I want to add a class to a div on a button click, I have the below code, but I cannot get the jquery working correctly:
$(document).ready(function()
{
$('.edit-btn').click(function()
{
$(this).closest('.edit-box').addClass('open');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col account">
<strong>Account Settings</strong>
<div class="col">
<span>Profile Status</span>
<p>status</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 1
</div>
</div>
<div class="col">
<span>Name</span>
<p> name</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 2
</div>
</div>
<div class="col">
<span>Username</span>
<p>username</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 3
</div>
</div>
<div class="col">
<span>Bio</span>
<p>bio</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 4
</div>
</div>
</div>
Clicking on the button will add a class to div i.e .edit-box. So only on the clicked button will add class to relevant div.

This code adds the open class to the edit-box div that comes after the button that is clicked.
It works by finding the parent of the button (i.e. the flex-btn container div), then getting the next element that has the class edit-box.
To see it working below I've added a background colour to the .edit-box and .edit-box.open divs so you can see it changing when the button is clicked:
$(document).ready(function() {
$('.edit-btn').click(function() {
$(this).parent().next('.edit-box').addClass('open');
});
});
.edit-box {
background: #ccffff;
}
.edit-box.open {
background: #ccccff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col account">
<strong>Account Settings</strong>
<div class="col">
<span>Profile Status</span>
<p>status</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 1
</div>
</div>
<div class="col">
<span>Name</span>
<p> name</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 2
</div>
</div>
<div class="col">
<span>Username</span>
<p>username</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 3
</div>
</div>
<div class="col">
<span>Bio</span>
<p>bio</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 4
</div>
</div>
</div>

Do I understand you correctly?
$(document).ready(function()
{
$('.edit-btn').click(function()
{
//$('.edit-box').removeClass('open');
$(this).closest('.col').find('.edit-box').addClass('open');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col account">
<strong>Account Settings</strong>
<div class="col">
<span>Profile Status</span>
<p>status</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 1
</div>
</div>
<div class="col">
<span>Name</span>
<p> name</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 2
</div>
</div>
<div class="col">
<span>Username</span>
<p>username</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 3
</div>
</div>
<div class="col">
<span>Bio</span>
<p>bio</p>
<div class="flex-btn front-btn">
<button class="edit-btn">edit</button>
</div>
<div class="edit-box">
edit 4
</div>
</div>
</div>

Personally, I would add this to all of the divs that wrap around the buttons:
onclick="this.nextElementSibling.classList.add('open');"
That's not what you asked though, so here is how to get your thing working (using vanilla javascript):
document.querySelectorAll('.edit-btn').forEach(button => {
button.addEventListener("mouseup", () => {
button.parentElement.nextElementSibling.classList.add("open")
})
})

Div buttons not working on mobile phone

My website is
meesbuschman.com
The buttons work just fine on desktop, but on my android phone the buttons don't seem to work. It might be the fact that I'm using transitions or transform on my css, but I'm not possitive. I couldn't find anything on stack overflow.
$('#projectsBtn').click(function(){
setWhite();
growLogo();
animateInfo(1);
$('header').css('height', '20vh');
$('.second-half').css('height', '80vh');
$('.nav').css('transform', 'translateY(-100%)');
$('.projects').css('transform', 'translateY(0)');
});
<div class="nav">
<div class="btn" id="skillBtn">
<div class="small-border-bottum"></div>
<div class="small-border-left"></div>
<div class="small-border-top"></div>
<div class="small-border-right"></div>
<h2>My Skills</h2>
</div>
<div class="btn" id="projectsBtn">
<div class="small-border-bottum"></div>
<div class="small-border-left"></div>
<div class="small-border-top"></div>
<div class="small-border-right"></div>
<h2>Projects</h2>
</div>
<div class="btn" id="aboutBtn">
<div class="small-border-bottum"></div>
<div class="small-border-left"></div>
<div class="small-border-top"></div>
<div class="small-border-right"></div>
<h2>About me</h2>
</div>
</div>
<div class="skills">
<div class="btn" id="homeSkillBtn">
<div class="small-border-bottum"></div>
<div class="small-border-left"></div>
<div class="small-border-top"></div>
<div class="small-border-right"></div>
<h2><i class="ion-chevron-up"></i></h2>
</div>

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

Filter visible/hidden bootstrap columns using buttons

Any JQuery assistance to show/hide bootstrap columns on click buttons?
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Category1</button>
<button type="button" class="btn btn-default">Category2</button>
<button type="button" class="btn btn-default">Category3</button>
</div>
This should control visible column/s in animated transition
<div class="row">
<!-- Category1 -->
<div class="col-lg-4">
...
</div>
<!-- Category2 -->
<div class="col-lg-4">
...
</div>
<!-- Category2 -->
<div class="col-lg-4">
...
</div>
</div>

Try with JQuery to toggle hide/show on button click for respective category DIV.
JQuery toggle() function toggle the display property of the element.
$(document).ready(function() {
$('.btn-group').on('click', 'button', function() {
var $btn = $(this);
var categoryId = $btn.data('categoryId');
$('#' + categoryId).toggle();
});
});
Respective id of category div is added as data attribute on each button.
Complete sample code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.btn-group').on('click', 'button', function() {
var $btn = $(this);
var categoryId = $btn.data('categoryId');
$('#' + categoryId).toggle();
});
});
</script>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-category-id="Category1">Category 1</button>
<button type="button" class="btn btn-default" data-category-id="Category2">Category 2</button>
<button type="button" class="btn btn-default" data-category-id="Category3">Category 3</button>
<div class="row">
<!-- Category1 -->
<div class="col-lg-4" id="Category1">Category 1</div>
<!-- Category2 -->
<div class="col-lg-4" id="Category2">Category 2</div>
<!-- Category3 -->
<div class="col-lg-4" id="Category3">Category 3</div>
</div>
</div>

I could find Codepen sample using Isotope. Just the way I needed.
<div id="filters" class="button-group">
<button class="btn btn-primary" data-filter="*">show all</button>
<button class="btn btn-primary" data-filter=".web">WEB</button>
<button class="btn btn-primary" data-filter=".design">DESIGN</button>
</div>
<div class="container-fluid no-gutter">
<div id="posts" class="row">
<div id="1" class="item web col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600">
</div>
</div>
<div id="2" class="item web col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/nature">
</div>
</div>
<div id="3" class="item design col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/people/1">
</div>
</div>
<div id="4" class="item design col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/technics">
</div>
</div>
<div id="5" class="item web col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/transport/1">
</div>
</div>
<div id="6" class="item design col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/sports">
</div>
</div>
<div id="7" class="item web col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//lorempixel.com/600/600/business/1">
</div>
</div>
<div id="8" class="item design col-sm-3">
<div class="item-wrap">
<img class="img-responsive" src="//placekitten.com/600/600" title="Can you believe it??">
</div>
</div>
</div>
</div>
Here is the code: http://codepen.io/bmodena/pen/Fybdu

How to wrap all next elements until?

I have following html:
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
What I am trying to achieve, is wrap each .menuItem and all next .submenuItem with .menuSet. Unhappily, the following js wraps the whole snippet instead of the set defined above.
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
For make my intention more understandable, below I post the desired result:
$(".menuItem").nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuSet">
<div class="menuItem">Domů</div>
</div>
<div class="menuSet">
<div class="menuItem">O nás</div>
</div>
<div class="menuSet">
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Projekční činnost</div>
</div>
<div class="menuSet">
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Kontakty</div>
</div>

As you are selecting all the menuItem's with class and than filtering from there, wrapAll will wrap your whole collection.
To solve this, one way would to be use $.each() and iterate through the menuItems and than wrap them.
$(".menuItem").each(function (index) {
$(this).nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
});
JSFiddle Demo.

Categories

Resources