var buttons = document.querySelectorAll("button");
$(".list").on("click", "button", function() {
$(this).toggleClass("select");
$(this).siblings(".add").toggleClass("exclude");
});
.select {
background: purple;
color: white;
}
.list {
height: 200px;
}
.exclude {
background: grey;
color: grey;
text-decoration: line-through;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div><input type="text" placeholder="Add New Events"></div>
<div><button class="add"><span><i class="fa fa-trash"></i></span>Eat</button></div>
<div><button class="add"><span><i class="fa fa-trash"></i></span>Workout</button></div>
<div><button class="add"><span><i class="fa fa-trash"></i></span>Sleep</button></div>
<div><button class="add"><span><i class="fa fa-trash"></i></span>Laundry</button></div>
<div><button class="add"><span><i class="fa fa-trash"></i></span>Study</button></div>
</div>
What I am trying to do, I want to make each button is able to toggle a classlist to itself and toggle another classlist to other buttons when it is clicked. Therefore, i am trying to use the siblings selector to select other buttons but it does not work. Can someone tell me why and help me to solve it?
The <button>s are not direct siblings of each other. Each of them is wrapped in a <div>. Therefore the code you need is going to be something like
$(this).parent().siblings().children(".add").toggleClass("exclude");
Related
On load my page or click the button, for some reason html applies some border to the button.
<div class="like-dislike">
<button class="button-like-dislike" id="likebtn24">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</button>
<input class="input-like-dislike" id="likeinput24" value="0" name="">
<button class="button-like-dislike" id="dislikebtn24">
<i class="fa fa-thumbs-down" aria-hidden="true"></i>
</button>
<input class="input-like-dislike" id="dislikeinput24" value="0" name="">
</div>
You should be able to prevent that by setting the outline to 'none' inside the CSS.
OUTLINE
button {
outline: none;
}
Remember to still show the user that the button has successfully been clicked though with :hover or :active😀
HOVER
button:hover {
/*CSS*/
}
ACTIVE
button:active {
/*CSS*/
}
See if removing the outline fixes it. Although, you'll likely want some sort of way to indicate the button is selected/ highlighted for accessibility purposes, such as a slight change in color.
button:focus, button:hover{
outline: none;
}
Try this if its work for you,
.button-like-dislike:hover , .button-like-dislike:focus , .button-like-dislike:active {
outline: none;
}
button button className{
outline: none;
}
I'd like to use the popover to reduce the place taken on my website to delete something.
I created a popover in my view :
<a
class="btn text-muted"
data-toggle="popover"
data-placement="bottom"
tabindex="0"
data-content='
<a
href="#"
class="remove-template {{ index }}"
data-index="{{ index }}"
>
remove template
</a>
'
>
<span class="fa fa-trash"/>
</a>
I try to use it in my javascript code as such
import $ from 'jquery';
import 'bootstrap';
$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
$(".remove-template").click(function (event) {
event.preventDefault();
var index = $(this).data('index');
//for debugging
alert($(this).attr('class'));
alert($(this).attr('data-index');
$("#li-field-"+index).remove();
updateTemplate();
});
});
as an output I get a first alert that shows
remove-template 0
So I know that the {{ index }} variable is set in my view but for the second one I get
undefined
Isn't it possible to set data-x attr on a popover directly in the data-content attr ?
EDIT:
I created a code snippet trying to reproduce the behaviour of my page and of course it work smoothly...
$(document).ready(function () {
$("#pop").popover();
});
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
$('.remove-template').click(function(){
var index = $(this).data('index');
alert("index in the link = "+index);
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="pop" data-content='<a
href="#"
class="remove-template 0"
data-index="1"
>
remove template
</a>'>
<span class="fa fa-trash mr-1"/>
Send to the trash
</button>
</div>
So apparently the problem is somewhere else. In any case as it is not reproductible this question doesn't make sense any more.
Actually, you are using the .click() function which is listening a click javascript event on the given jQuery object.
But like i said before is that jQuery will not be able to listen this event cause you generated this html node after DOM generation.
To fix your problem, you'll need to listen an already existing object (like body) and then watch the html class you want: see example
function addBlock() {
var test = '<div class="foo" data-test="after">X</div>';
$('#container').append(test);
}
$(document).ready(function() {
addBlock();
addBlock();
});
// This will work
$('body').on('click', '.foo', function() {
$('#bodyClickEvent').empty();
if (!$(this).hasClass('staticFoo')) {
$('#clickEvent').html('<span>​</span>');
}
$('#bodyClickEvent').html($(this).data('test'));
});
// This part of code will not work
$('.foo').on('click', function() {
$('#clickEvent').empty();
$('#clickEvent').html($(this).data('test'));
});
.foo {
display: inline-block;
width: 50px;
height: 50px;
background-color: rgb(50, 50, 50);
margin: 5px;
padding: 5px;
color: white;
}
.staticFoo {
background-color: blue;
}
.event {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
padding: 5px;
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="description">
<ul>
<li>Y block are write in the HTML and generated with the DOM generation.</li>
<li>X block are generated with a javascript function.</li>
</ul>
<p>Try to click on different blocks to see what append.</p>
</div>
<div id="container">
<div class="foo staticFoo" data-test="before">Y</div>
<div class="foo staticFoo" data-test="before">Y</div>
</div>
<div class="event">click event data: <b id="clickEvent"></b></div>
<div class="event">body event data: <b id="bodyClickEvent"></b></div>
As mentioned in comments earlier accroding to jquery doc for setting value you have to use:
$( "body" ).data( "foo", 52 );
Then, to get any data value you should use:
$( "body" ).data( "foo" ); // 52
There are 3 buttons in my code.
One is to add more files. (.btn-plus)
One is to remove the one added. (.btn-minus)
One is to reset the file. (.btn-reset)
I could add more input with (.btn-plus) button.
How could I delete only the one I click among every input I add with (.btn-plus)?
$(".btn-plus").click(function(){
$('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>');
return false;
})
$(".btn-minus").click(function(){
$(this).nextUntil('li').remove()
})
$(".btn-reset").click(function(){
$(".board-box__attachments input").value = "";
})
li {
width : 60%;
background : lightblue;
list-style : none;
padding : 0.5em;
border-bottom : 1px solid white;
}
.th {
width : 100px;
float: left;
}
.td {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="board-box__attachments">
<li>
<div class="th">files</div>
<div class="td">
<input type="file">
<button class="btn btn-plus"> + </button>
<button class="btn-reset">Reset</button>
</div>
</li>
</ul>
You have to use on() to attach event to dynamically added element. Then use closest() to find currently clicked element's parent.
$("body").on("click", ".btn-minus", function(){
$(this).closest('li').remove();
})
$(this).nextUntil("li") doesn't match anything. It only searches siblings of this, and the button doesn't have any li siblings. If you want to select the li containing the button, use $(this).closest("li").
You also need to use event delegation to bind an event handler to dynamically-created elements.
$(".btn-plus").click(function(){
$('.board-box__attachments').prepend('<li><div class="th">files</div><div class="td"><input type="file"><button class="btn btn-minus"> - </button></div></li>');
return false;
})
$(".board-box__attachments").on("click", ".btn-minus", function(){
$(this).closest("li").remove()
})
li {
width : 50%;
background : lightblue;
list-style : none;
padding : 1em;
border-bottom : 1px solid white;
}
.th {
width : 100px;
float: left;
}
.td {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="board-box__attachments">
<li>
<div class="th">files</div>
<div class="td">
<input type="file">
<button class="btn btn-plus"> + </button>
</div>
</li>
</ul>
There are 2 issues with you code:
Your element which contains btn-minus is being created dynamically. So the click event would not work instead you need to use on event.
$(".btn-minus").click(function(){
So instead of this you need to use
$(document).on('click', '.btn-minus', function() {
Also you need to use following code to remove element.
$(this).closest('li').remove();
Please see the updated JSFiddle
Here you can creating elements dynamically so once the page is loaded, browser has no knowledge of '.btn-minus'
Try this:
$(document).on('click', '.btn-minus', function(){
$(this).closest('li').remove()
})
Hope this helps!
I want to change display to block by clicking this icon:
<div class="index-navi-frame-box">
<p onclick="expandFunction()">
<i class="fa fa-bars"></i>
</p>
</div>
And this is what it should change
<div class="index-navi-expended"></div>
Css:
.index-navi-expended{
width: 100%;
height: 30%;
background-color: #757575;
position: relative;
display: none;
}
Using jQuery, you can remove the old and add the new class like this:
$(".index-navi-frame-box").on("click", function() {
$(this).removeClass("index-navi-frame-box").addClass("index-navi-expended);
});
However, if possible I would recommend that the new class is just overwriting the styles of the old class, so you can just add the new class without removing the old class.
Try to avoid inline JavaScript (onclick="") and place the code above either in a separate .js file or in <script></script> tags.
Try this:
$(".index-navi-frame-box p").click(function() {
$(".index-navi-expanded").css("display", "block");
});
With pure JavaScript, you can just use the Element.classList property to toggle the classes like this:
var x = document.querySelector(".index-navi-frame-box");
x.addEventListener("click", function(){
this.classList.add("index-navi-expended");
this.classList.remove("index-navi-frame-box");
})
.index-navi-expended{
width: 100%;
height: 30%;
background-color: #757575;
}
<div class="index-navi-frame-box">
<p>
ABCD
<i class="fa fa-bars"></i>
1234
</p>
</div>
You can use toggleClass to alternate between the two classes.
HTML
<div id="index-navi" class="index-navi-frame-box">
<p id="toggleNav"><i class="fa fa-bars"></i></p>
</div>
JS
$('#toggleNav').click(function() {
$('#index-navi').toggleClass('index-navi-frame-box');
$('#index-navi').toggleClass('index-navi-expended');
});
consider follwing code,
<div class="index-navi-frame-box"><p onclick="customfunction()"><i class="fa fa-bars"></i></p></div>
<div class="index-navi-expended" id="index-expandable"></div>
<script>
function customfunction(){
var index_expandable = document.getElementById('index-expandable');
index_expandable.style.display = "block";
}
</script>
i am making an information website for a school assignment, i want to have a button/s to make different information display on the page. how do i go about doing this in HTML or other applicable languages, Thanks
Use JavaScript!
<body>
<input id="button1" type="button" value="click me">
<input id="button2" type="button" value="click me, too">
<p id="output"></p>
<script>
/* Get references to your elements. */
var button1=document.getElementById("button1");
var button2=document.getElementById("button2");
var output=document.getElementById("output");
/* Add click event listeners to your buttons so you can interact with them. */
button1.addEventListener("click",clickButton1);
button2.addEventListener("click",clickButton2);
/* Write functions to handle displaying various content depending on which button you press. */
function clickButton1(event_){
output.innerHTML="You clicked button1!";
}
function clickButton2(event_){
output.innerHTML="You clicked button2!";
}
</script>
</body>
Basically, your click event listeners handle what to display when a button is pressed. I'm just changing the text in a p element, but you could do a lot more than that. For example, store the different html you want to display in hidden divs and only display them when a button is pressed. Hope this helps!
I believe you could do this in CSS as well, the big thing to note in the example is that each <a> has the #(id of div) in the href attribute. Since I don't know the exact context for your predicament, I can't say this would work how you want it to, but I just really dislike using javascript if I don't have to.
.container > div {
display: none
}
.container > div:target {
display: block;
}
ul.nav {
list-style-type: none;
}
ul li {
display: inline-block;
width: 100px;
}
ul li button {
border: 1px solid grey;
border-radius: 2px;
padding-left: 5px;
box-sizing: padding-box;
}
<ul class="nav">
<li>
<button>Tab 1
</button>
</li>
<li>
<button>Tab 2
</button>
</li>
<li>
<button>Tab 3
</button>
</li>
<li>
<button>Tab 4
</button>
</li>
<li>
<button>Tab 5
</button>
</li>
</ul>
<div class="container">
<div id="firstTab">Hello Tab 1</div>
<div id="secondTab">Hello Tab 2</div>
<div id="thirdTab">Hello Tab 3</div>
<div id="fourthTab">Hello Tab 4</div>
<div id="fifthTab">Hello Fifth Tab</div>
</div>