I'm a little confused about how create a menu with raw javascript, pretty similar like bootstrap dropdown with those interactions:
click on button and show dropdown
click again and hide dropdown
lose focus on dropdown and hide it
I was doing a series of tests and I couldn't find how bootstrap do it!
Somebody has any idea of how does it work?
This what I have:
HTML:
<!-- Menu button -->
<div class="flex align-items-center menu-btn">
<i class="material-icons task-more flex justify-content-center align-items-center" data-toggle="hola">more_horiz</i>
</div>
<!-- Menu -->
<div class="task-menu">
<div class="task-menu-item flex align-items-center">
<i class="material-icons">alarm</i>
<span>Alarms</span>
</div>
<div class="task-menu-item flex align-items-center">
<i class="material-icons">edit</i>
<span>Edit</span>
</div>
<div class="task-menu-item flex align-items-center">
<i class="material-icons">delete</i>
<span>Delete</span>
</div>
</div>
JS:
// Show-hie menu
Array.from(container.querySelectorAll('.task-more')).forEach(function(el){
el.addEventListener('click', function(){
let menu = el.parentNode.parentNode.querySelector('.task-menu');
menu.classList.toggle('display-block');
menu.tabIndex = -1;
menu.focus();
});
});
// Hide on blur
Array.from(container.querySelectorAll('.task-menu')).forEach(function(el){
el.addEventListener('blur', function(){
el.classList.remove('display-block');
}, true);
});
Thanks!
<button id="drop" onclick="drop();">Drop down</button>
<div id="menu">
<!-- content here-->
</div>
Script:
var button = document.querySelector('#drop');//or any other selector like getElementBy...
var menu = document.querySelector('#menu');
function drop() {
setTimeout(function() {
menu.style.display="block";
button.setAttribute('onclick', 'hide();');
}, 10);
};
function hide() {};
document.addEventListener('click', function() {
menu.style.display="none";
});
Related
I am trying to delete dynamically added item by clicking on delete button .delete on modal box.
I have one modal and it pops-up when I click on button <i class="fa-solid fa-ellipsis">.
Code:
function showOptions(object) {
if (object.target.matches(".fa-ellipsis")) {
let optionsModal = object.target.querySelector(".optionsModal");
optionsModal.classList.toggle("hide");
}
}
function deletePost() {
// delete specific li-item from the list
}
document.querySelector("body").addEventListener("click", showOptions(event));
document.querySelector(".delete").addEventListener("click", deletePost);
<body>
<ul class="posts-list">
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
</li>
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
</li>
<!-- every li item is added dynamically -->
</ul>
<div class="optionsModal hide">
<p class="delete">Delete</p>
<p class="cancel">Cancel</p>
</div>
</body>
And I have a problem how to pass to deletePost function specific <i class="fa-solid fa-ellipsis"> when I click on them. I was trying to nest one eventListener in another but it doesn't work.
When you open the modal, add a class to the item you clicked on. Then find the item in deletePost.
The modal isn't inside object.target, so you shouldn't use object.target.querySelector() to find it, use document.querySelector().
You shouldn't toggle the hide class when clicking on a list items. That will hide the modal if you click on a different item before cancelling the modal (although if you make it truly modal, you shouldn't be able to click on something else). I just remove the class to display the modal.
function showOptions(object) {
if (object.target.matches(".fa-ellipsis")) {
let optionsModal = document.querySelector(".optionsModal");
optionsModal.classList.remove("hide");
let oldSelected = document.querySelector(".selected");
if (oldSelected) {
oldSelected.classList.remove("selected");
}
object.target.classList.add("selected");
}
}
function deletePost() {
let selected = document.querySelector(".selected");
if (selected) {
selected.closest(".posts-list-item").remove();
}
}
document.querySelector("body").addEventListener("click", showOptions);
document.querySelector(".delete").addEventListener("click", deletePost);
.selected {
background-color: red;
}
.hide {
display: none;
}
<body>
<ul class="posts-list">
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis">Item 1</i>
</div>
</div>
</li>
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis">Item 2</i>
</div>
</div>
</li>
<!-- every li item is added dynamically -->
</ul>
<div class="optionsModal hide">
<p class="delete">Delete</p>
<p class="cancel">Cancel</p>
</div>
</body>
I have this BS navbar that you can collapse, and I want it to save the state when I change page or refresh the current page.
home.php
<!-- Side Navbar -->
<nav class="side-navbar">
<div class="side-navbar-wrapper">
<div class="sidenav-header d-flex align-items-center justify-content-center">
<div class="sidenav-header-inner text-center"><img src="img/marcus_avatar.png" alt="person" class="img-fluid rounded-circle">
<h2 class="h5 text-uppercase"><?php echo $_COOKIE['userName']; ?></h2><span class="text-uppercase">Web Admin</span>
</div>
<div class="sidenav-header-logo"> <strong>S</strong><strong class="text-primary">F</strong></div>
</div>
<div class="main-menu">
<ul id="side-main-menu" class="side-menu list-unstyled">
<li class="active"> <i class="fa fa-home"></i><span>Home</span></li>
<li> <i class="fa fa-users"></i><span>Users</span></li>
<li> <i class="fa fa-upload"></i><span>Upload</span></li>
<li><i class="fa fa-file"></i><span>My Files</span></li>
</ul>
</div>
</div>
</nav>
jsfile.js
$(".side-navbar").on('shown.bs.collapse', function ()
{
var active = $(this).attr('id');
$.cookie(active, "1");
});
$(".side-navbar").on('hidden.bs.collapse', function ()
{
var active = $(this).attr('id');
$.removeCookie(active);
});
$(document).ready(function(){
var panels=$.cookie(); //get all cookies
for (var panel in panels){ //<-- panel is the name of the cookie
if ($("#"+panel).hasClass('shrink')) // check if this is a panel
{
$("#"+panel).collapse("show");
}
}
});
I want it to work like this: http://jsfiddle.net/03u0bfst/3/ but I just can't get it to work for the life of me!
I made a modal dialog with css:visibility hidden and visible.
<div id="myModal">
<a data-toggle="collapse" href = "#spread">
<span class = "caret"></span>Spread
</a>
<div id = "spread" class = "panel-collapse collapse">
...
</div>
</div>
<button onclick = "HideModal()">Hide Modal</button>
Javascript code
HideModal(){
var modal = document.GetElementById("myModal");
modal.style.visibility = "hidden";
}
All things working well but menu with collapse is not working well.
If I open the menu and hide the dialog all things disappear but spread is not disappear.
Is there anyone who have met this kind of issue?
Your problem is in this line
modal.style.visibility = "hidden";
In my experiment with your question, visibility collapse will override visibility hidden.
Solution
Change HideModal() content to
$('#myModal').addClass("hidden");
You need to apply the collapse class to the div you wish to collapse.
<div id="myModal">
<a data-toggle="collapse" href = "#spread" style="display:block">
<span class = "caret"></span>Spread
</a>
<div class="collapse" id="spread">
...
</div>
<button>Hide Modal</button>
</div>
a{display:block}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="myModal">
<a data-toggle="collapse" href = "#spread">
<span class = "caret"></span>Spread
</a>
<div class="collapse" id="spread">
...
</div>
<button>Hide Modal</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I'm newbie in bootstrap and jquery, using the code below to create many bootstrap panels, my problem is that I would like to close the others panels when i click in full size icon of one panel
someone know how can do it?
thank you
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title"> Panel Widget Title
<div class="pull-right"> <i class="fa fa-times"></i> <i class="fa fa-minus"></i> </div>
</h4>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body"> Panel Widget Body </div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title"> Panel Widget Title
<div class="pull-right"> <i class="fa fa-times"></i> <i class="fa fa-minus"></i> </div>
</h4>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body"> Panel Widget Body </div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title"> Panel Widget Title
<div class="pull-right"> <i class="fa fa-times"></i> <i class="fa fa-minus"></i> </div>
</h4>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body"> Panel Widget Body </div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
(function($, window, document){
var panelSelector = '[data-perform="panel-collapse"]';
$(panelSelector).each(function() {
var $this = $(this),
parent = $this.closest('.panel'),
wrapper = parent.find('.panel-wrapper'),
collapseOpts = {toggle: false};
if( ! wrapper.length) {
wrapper =
parent.children('.panel-heading').nextAll()
.wrapAll('<div/>')
.parent()
.addClass('panel-wrapper');
collapseOpts = {};
}
wrapper
.collapse(collapseOpts)
.on('hide.bs.collapse', function() {
$this.children('i').removeClass('fa-minus').addClass('fa-plus');
})
.on('show.bs.collapse', function() {
$this.children('i').removeClass('fa-plus').addClass('fa-minus');
});
});
$(document).on('click', panelSelector, function (e) {
e.preventDefault();
var parent = $(this).closest('.panel');
var wrapper = parent.find('.panel-wrapper');
wrapper.collapse('toggle');
});
}(jQuery, window, document));
(function($, window, document){
var panelSelector = '[data-perform="panel-dismiss"]';
$(document).on('click', panelSelector, function (e) {
e.preventDefault();
var parent = $(this).closest('.panel');
removeElement();
function removeElement() {
var col = parent.parent();
parent.remove();
col.filter(function() {
var el = $(this);
return (el.is('[class*="col-"]') && el.children('*').length === 0);
}).remove();
}
});
}(jQuery, window, document));
});
</script>
JSFIDDLE link
Bootstrap provides collapse.js to do the same.
here is the reference: Bootstrap.
or go to fiddle
you just need to do this:
$('.panel-title a').collapse();
since your question is little vague, I am not clear about your requirement.
please have a look on to this code. I think this might be you a re asking
fiddled here
HTML
//Same as in you code, java script part is not needed
JQUERY
$(document).ready(function () {
$(".panel-heading").click(function () {
$(this).closest(".panel").find(".panel-body").toggleClass("hide");
});
$(".fa.fa-times").click(function(){
$(".panel-body").addClass("hide");
$(this).parent(".panel").find(".panel-body").removeClass("hide");
});
});
EDIT
check updated fiddle
I want to open first tab by default on my accordion. I have been trying different solutions, but nothing worked for me.
Here is my JS and HTML:
$('.accordion').each(function () {
var $accordian = $(this);
$accordian.find('.accordion-head').on('click', function () {
$(this).parent().find(".accordion-head").removeClass('open close');
$(this).removeClass('open').addClass('close');
$accordian.find('.accordion-body').slideUp();
if (!$(this).next().is(':visible')) {
$(this).removeClass('close').addClass('open');
$(this).next().slideDown();
}
});
});
<div class="accordion">
<div class="accordion-head">
Title here <div class="arrow down"></div>
</div>
<div class="accordion-body">
copy goes here
</div>
<div class="accordion-head">
Title here <div class="arrow down"></div>
</div>
<div class="accordion-body">
copy goes here
</div>
<div class="accordion-head">
Title here <div class="arrow down"></div>
</div>
<div class="accordion-body">
copy goes here
</div>
</div>
Please help.