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!
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 had created a simple chat system using jQuery and ajax, I want the scroll bar to be in the bottom of div in two occasion that is :
_first time loading page.
_New messages has arrived.
the problem is the scroll bar is auto scrolling down all the time.
this is my html and javascript code
function load (){
$.post("action.php",{
Action : "get"
},function(resp){
var scrollTop = $('#shoot').scrollTop();
var clientheight = $('#shoot').height();
var scrollTop = parseInt(scrollTop)+320;
var scrollHeight = $('#shoot').prop("scrollHeight");
$('#shoot ').html(resp);
if (scrollTop < scrollHeight ) {
}else {
$('#shoot').scrollTop() = $('#shoot').prop("scrollHeight");
}
});
}
<div class="row justify-content-center h-100">
<div class="col-md-8 col-xl-6 chat">
<div class="card">
<div class="card-header msg_head">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
<span class="online_icon"></span>
</div>
<div class="user_info">
<span>Chat with Khalid</span>
<p>1767 Messages</p>
</div>
<div class="video_cam">
<span><i class="fas fa-video"></i></span>
<span><i class="fas fa-phone"></i></span>
</div>
</div>
<span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span>
<div class="action_menu">
<ul>
<li><i class="fas fa-user-circle"></i> View profile</li>
<li><i class="fas fa-users"></i> Add to close friends</li>
<li><i class="fas fa-plus"></i> Add to group</li>
<li><i class="fas fa-ban"></i> Block</li>
</ul>
</div>
</div>
<div id="shoot" class="card-body msg_card_body">
<div class="d-flex justify-content-start mb-4">
<div class="msg_cotainer">
Hi, how are you samim?
</div>
</div>
<div class="d-flex justify-content-end mb-4">
<div class="msg_cotainer_send">
Hi Khalid i am good tnx how about you?
</div>
</div>
</div>
Can you first correct this line:
$('#shoot').scrollTop( $('#shoot').prop("scrollHeight") );
/* $('#shoot').scrollTop() = $('#shoot').prop("scrollHeight"); */
and then retry? Because the correct way to change scrollTop position is by passing a parameter to the jQuery function .scrollTop(value) - docs at api.jquery.com
Also, you said "scroll bar is auto scrolling down all the time" - but it is not clear when / how often do you call the load() function. Because, from your code, it seems that after each call, no matter the response, you run a scroll action. If you want to make an auto-scroll only at new messages - then you should for check that. For example, make "action.php" return false if no new messages, and in the load function, don't do any scroll if response is false.
For those who used $("#shoot").animate({ scrollTop: $('#shoot').prop("scrollHeight")}, 1000); this keeps the scroll bar scrolling down all the time , so you must change it to
$('#shoot').scrollTop( $('#shoot').prop("scrollHeight") ); , this is the right way to get to new position of the scroll bar without forcing it to stay at specific position.
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";
});
This is the html for the my ul,and on click of anchor tag data will be loaded from the other file tab2.html .
<ul class="list-unstyled " id="dist-tabs">
<li class="col-xs-3 student item ">
<a href="./tabs/tab2.html #1">
shimla
</a>
</li>
<li class="col-xs-3 staff item">
<a href="./tabs/tab2.html #2">
dharamshala
</a>
</li>
</ul>
<div id="dist-container">
</div>
Following is the content for the tab2.html , which will be loaded through ajax.
<div class="popup-overlay" id="1">
<div class="popup-box">
<h4>Name 1</h4>
<span class="close-btn">x close</span>
</div>
</div>
<div class="popup-overlay" id="2">
<div class="popup-box">
<h4>Name 2</h4>
<span class="close-btn">x close</span>
</div>
</div>
Every thing is working fine, popup opens just fine. But on click of close button with class="close-btn", the popup-box doesn't close
Following is the js i am using for the purpose stated above .
var containerId = '#dist-container';
var tabsId = '#dist-tabs';
$(document).ready(function(){
$(tabsId + ' A').click(function(){
loadTab($(this));
return false;
});
});
function loadTab(tabObj){
if(!tabObj || !tabObj.length){ return; }
$(containerId).addClass('loading');
$(containerId).fadeOut('fast');
$(containerId).load(tabObj.attr('href'), function(){
$(containerId).removeClass('loading');
$(containerId).fadeIn('fast');
});
$(".close-btn").click(function(){
$(containerId).fadeOut('fast');
});
}
I have tried a lot of code for popup through ajax but not successful so far. So please help me out
i want to slideUp the current div that is open(that doesn't work), but when i open another div, the div before must slideup (that works). Maybe anyone can help me.
Here is a jsfiddle with the problem: http://jsfiddle.net/Evolutio/xbsm734f/
my jQuery code looks like this:
$(document).ready(function(){
$('.faq_desc').hide();
$('.faq li.faq_head').click(function(e){
var $i = $('ul.faq i.fa');
$i.removeClass('fa-caret-up').addClass('fa-caret-down');
$(this).find('i.fa').removeClass('fa-caret-down').addClass('fa-caret-up');
if($(this).siblings().hasClass('slided_down')==false) {
$('ul.faq .slided_down').removeClass('slided_down');
}
var $faq_desc = $(this).find('.faq_desc');
if($faq_desc.hasClass('slided_down')) {
$faq_desc.removeClass('slided_down').slideUp();
} else {
$faq_desc.addClass('slided_down').slideDown();
}
$(this).siblings().find('.faq_desc').slideUp();
e.preventDefault();
});
});
my html:
<ul class="faq">
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdaasdasd <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>asdasdasdadasdasdasdasdassdasd</p>
</div>
</li>
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdadasdasdasdasd <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>asdsadadasdasdasdasdadasd</p>
</div>
</li>
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdasdasdasdsa <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>dadsadadaassdasdasdasd</p>
</div>
</li>
<p> </p>
<li class="faq_head">
<h4 class="ff_os_b">asdasdasdasdasdasasdasdasdasdas <i class="fa fa-caret-down"></i></h4>
<div class="faq_desc fs_14 lh_14" style="display: none;">
<p>dasdasdadasdsadsadasdsadasdasd</p>
</div>
</li>
</ul>
You can use .slideToggle()
$(document).ready(function(){
$('.faq_desc').hide();
$('.faq li.faq_head').click(function(e){
$(this).siblings().find('.faq_desc').slideUp().removeClass('slided_down');
$(this).find('.faq_desc').slideToggle().toggleClass('slided_down');
e.preventDefault();
});
});
DEMO
Update
$(document).ready(function(){
$('.faq_desc').hide();
$('.faq li.faq_head').click(function(e){
var $i = $('ul.faq i.fa');
$i.not($(this).find('i.fa')).removeClass('fa-caret-up').addClass('fa-caret-down');
$(this).find('i.fa').toggleClass('fa-caret-down fa-caret-up')
$(this).siblings().find('.faq_desc').slideUp().removeClass('slided_down');
$(this).find('.faq_desc').slideToggle().toggleClass('slided_down');
e.preventDefault();
});
});
DEMO