How can I maintain collapse-state of side bar after page refresh? - javascript

In my Sidebar I have included a collapse button to show/hide tabs. Now I want to maintain the collapse-state when refreshing the page: If the form was un-collapsed before refreshing the page, it must stay like this after the refresh. I am new to js. Below is my HTML:
<div class="sidebar">
<li class="mb-1">
<button class="btn btn-toggle align-items-center fa fa-database" data-bs-toggle="collapse"
data-bs-target="#button-1-collapse" aria-expanded="true">
Button-1
</button>
<div class="collapse" id="button-1-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ">
<li> example-1</li>
<li> example-2</li>
<li> example-3</li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center fa fa-file-code-o" data-bs-toggle="collapse"
data-bs-target="#button-2-collapse" aria-expanded="true">
Button-2
</button>
<div class="collapse" id="button-2-collapse" style="">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 ">
<li> example-1</li>
<li> example-2</li>
<li> example-3</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
Thanks for your help!

After some research, i have what i required. Attaching code part herewith which maybe beneficial to others.
$(function () {
const buttonCollapse1 = $("#button-1-collapse");
const buttonCollapse2 = $("#button-2-collapse");
buttonCollapse1.on("shown.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse1", "show");
});
buttonCollapse2.on("shown.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse2", "show");
});
buttonCollapse1.on("hidden.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse1", "hide");
});
buttonCollapse2.on("hidden.bs.collapse", function () {
sessionStorage.setItem("buttonCollapse2", "hide");
});
const button1 = sessionStorage.getItem("buttonCollapse1");
if (button1 === "show") {
buttonCollapse1.collapse("show");
} else {
buttonCollapse1.collapse("hide");
}
const button2 = sessionStorage.getItem("buttonCollapse2");
if (button2 === "show") {
buttonCollapse2.collapse("show");
} else {
buttonCollapse2.collapse("hide");
}
});

Related

I got somes problems with v-bind, it's not working

I am learning VueJs but I kinda confused about v-bind! I have 4 buttons I want to have active class in the specific button when I click on that button but when I clicked on the button it looks like the method was not called! Example, If i click on home button the home button will have active class which will be changed to red. If i click on watch button the home button goes back to black and the watch button will be changed to red. But when I clicked on watch button everthing went to black. How can I fix it? Sorry for my english.
here is my vue.js file
new Vue({
el: "#center-element",
data: {
homeActive: true,
watchActive: false,
groupActive: false,
gameActive: false,
},
methods: {
homeActiveMethod: function () {
this.homeActive = true;
this.watchActive = false;
this.groupActive = false;
this.gameActive = false;
},
watchActiveMethod: function () {
this.homeActive = false;
this.watchActive = true;
this.groupActive = false;
this.gameActive = false;
},
groupActiveMethod: function () {
this.homeActive = false;
this.watchActive = false;
this.groupActive = true;
this.gameActive = false;
},
watchActiveMethod: function () {
this.homeActive = false;
this.watchActive = false;
this.groupActive = false;
this.gameActive = true;
},
},
});
html
<ul class="navbar-nav nav nav-tabs mx-auto text-center" id="center-element">
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button v-on:click="homeActiveMethod" class="btn" v-bind:class="{active: homeActive}"
id="center-btn-nav">
<i class="fas fa-home"></i>
</button>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button v-on:click="watchActiveMethod" class="btn" v-bind:class="{active: watchActive}"
id="center-btn-nav">
<i class="fas fa-play"></i>
</button>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button class="btn" id="center-btn-nav">
<i class="fas fa-users"></i>
</button>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" style="border: none;">
<button class="btn" id="center-btn-nav">
<i class="fas fa-gamepad"></i>
</button>
</a>
</li>
</ul>
css
.active{
color: red;
border-bottom: 5px;
border-bottom-style:solid;
border-bottom-color: red;
}
In Vue, you do not need to use <a> tags. Remove them and it will probably work.
By the way, you could significantly reduce the amount of code in your Vue component by using a single variable for currently active link:
data: {
activeLink: ""
},
methods: {
setActiveLink(activeLink) {
this.activeLink = activeLink;
}
},
<button v-on:click="setActiveLink('home')" class="btn" v-bind:class="{active: activeLink === 'home'}" id="center-btn-nav">
I would also suggest generating your <li> tags using a v-for directive.

How to give the spinner for tabs while data is loading

function happening(){
$(".spinner").show();
$.ajax({
type: "POST",
url: "<?=base_url()?>timeline/timeline_v2_ajax",
async:false,
cache:false,
error: function() {
console.log('Something is wrong');
},
success: function(msg){
$(".spinner").hide();
$('#default-tab-1').html(msg);
App.init();
FormPlugins.init();
}
});
}
var LandingPage = function() {
"use strict";
return {
init: function() {
$('#default-tab-1').html('<span class="spinner"></span>');
happening();
}
}
}()
$(document).ready(function() {
LandingPage.init();
WhattodoPage.init();
});
<div class="content">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active">
<a href="#default-tab-1" data-toggle="tab" aria-expanded="true">
<span class="semi-bold">What is happening ?</span>
</a>
</li>
<li class="" id="what-to-do">
<a href="#default-tab-2" data-toggle="tab" aria-expanded="false">
<span class="semi-bold">What to do ?</span>
</a>
</li>
</ul>
<span class="spinner"></span>
<div class="tab-content">
<div class="tab-pane fade active in" id="default-tab-1"></div>
<div class="tab-pane fade" id="default-tab-2"></div>
</div>
</div>
</div>
I have two tabs, here i want to display the spinner for the body of the tab while data is loading in both tabs. above is my code, in that i have included the spinner in script but it's not working. can anyone please help me. any help could be appreciated.
I think you should check the ".spinner" class first. i.e. is this class has proper attributes to display anything or not.

How to select all elements in the DOM with same class?

Im trying to implement multilanguage support to a website and for that I need to select all elements that have class="lang" attribute. This is how my Js code looks like
$(function(){
var language = localStorage.getItem('language');
if(language !== null){
//this does not work
$(document).find('.lang').each(function (index, element) {
if($(this).attr('placeholder')!=null){
//change placeholder text
}
$(this).text(arrLang[language][$(this).attr('key')]);
});
}
//this works
$(document).on('click','.translate',function () {
var lang = $(this).attr('id');
$(document).find('.lang').each(function (index, element) {
if($(this).attr('placeholder')!=null){
//change placeholder text
}
$(this).text(arrLang[lang][$(this).attr('key')]);
localStorage.setItem('language',lang);
});
});
});
And this is the html code where Im trying to test this out
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<img alt="brand" src="../img/th-logo.png" height="25px" width="60px" href="Startsite.jsp">
</div>
</div>
<div class="navbar-brand">Studienlaufplan </div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../Startsite.jsp" class="lang" key="tasks" >Aufgaben</a> </li>
<li><a href="../Account.jsp" class="lang" key="account" >Konto</a> </li>
<li>Kanäle </li>
<li>Einstellugen </li>
<li class="dropdown">
Sprache
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>English</li>
</ul>
</li>
<li>Abmelden</li>
</ul>
</div>
</div>
</div>
Im confused about jquery selectors and actually dont know how to use them well. Any help will be appreciated
To get all elements with the specified class name, Try document.getElementsByClassName:-
var x = document.getElementsByClassName("className");
The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.
function myFunction() {
var x = document.getElementsByClassName("example");
x[0].innerHTML = "Hello World!";
x[1].innerHTML = "my first code snippet"
}
<div class="example">First div element with class="example".</div>
<div class="example">Second div element with class="example".</div>
<button onclick="myFunction()">Try it</button>
try it yourself here.
This should do the trick:
$(".lang").each(function() {
const $lang = $(this);
// translate this item's text
});

Dropdown submenu selection

My Javascript
var selectmenu = function(index, sub){
$('.main-navigation-menu li:nth-child('+index+')').addclass('active');
}
In my view there are two li tags to select main menu and sub menu; so because of the above JS, it is always selecting a 1st main menu and the 1st sub menu; even when clicking the 2nd sub menu of the 1st main menu... anyone knows how to correct this behavior? Here I wanted to use the 'sub' variable and do something like this:
$('.sub-menu li:nth-child('+index+')').removeClass('active');
$('.sub-menu li:nth-child('+sub+')').addClass('active');
HTML
<ul class="main-navigation-menu ">
#foreach (var menu in mainmenu) {
var sublist = userContext.Menus.Where(m => m.Id == menu.Id);
if (sublist.Count == 0){
<li class="active open">
<a href="#Url.Content(menu.MenuUrl)">
<span class="title"> #menu.Name </span>
<span class="selected"></span>
</a>
</li>
}
else {
<li class="main-menu-selection">
<a href="#menu.MenuUrl">
<span class="title">#menu.Name</span>
<i class="fa fa-chevron-down pull-right"></i>
<span class="selected"></span>
</a>
#if (sublist.Count > 0) {
<ul class="sub-menu">
#foreach (var sub in sublist) {
<li class="sub-menu-selection">
<a href="#Url.Content(sub.MenuUrl)">
<span class="title"> #sub.Name </span>
</a>
</li>
}
</ul>
}
</li>
}
count++;
}
</ul>
Try using stopPropagation:
$('.main-navigation-menu').on('click', '.sub-menu-selection', function(e){
var index;
e.stopPropagation();
$('.min-navigation-menu .active').removeClass('active');
$(e.currentTarget).addClass('active');
});
More info here

Remove dynamic elements that were created after the dom was loaded

I have a series of fieldset elements that are hidden when all of the list items inside them are not visible. The problem is I want to actually remove the field sets after they slide up and are hidden but I'm having trouble getting that to work.
$(document).ready(function () {
$('body').on("click", ".readBtn", function (e) {
var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');
$('#chapter_'+chapterid).slideUp(function () {
if (!$(this).is(":visible")
&& !$(this).siblings("li").is(":visible")) {
// Hide `fieldset`
var parent = $(this).closest("fieldset");
parent.slideUp();
parent.remove();
}
});
});
});
button.readBtn {
margin-left: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 1
</a>
</legend>
<ul>
<li class="chapter" id="chapter_9">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_9">
Mark as Read
</button>
</li>
</ul>
</fieldset>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 2
</a>
</legend>
<ul>
<li class="chapter" id="chapter_10">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_10">
Mark as Read
</button>
</li>
<li class="chapter" id="chapter_12">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_12">
Mark as Read
</button>
</li>
</ul>
</fieldset>
I've read that you can't use the jquery.click call in order to remove an element that was created after page load, so that's why I went with using the on call. But I'm having trouble getting it to work.
Try
$(document).ready(function () {
$('.readBtn').click(function () {
var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');
$('#chapter_'+chapterID).slideUp(function() {
if (!$(this).is(":visible")
&& !$(this).siblings("li").is(":visible")) {
// hide `fieldset`
// remove `fieldset` if all `li` siblings _not_ visible ,
// at `.hide()` `complete` callback
$(this).closest("fieldset").hide(function() {
$(this).remove()
})
}
});
});
});
$(document).ready(function () {
$('.readBtn').click(function () {
var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');
$('#chapter_'+chapterID).slideUp(function() {
if (!$(this).is(":visible")
&& !$(this).siblings("li").is(":visible")) {
// hide `fieldset`
$(this).closest("fieldset").hide(function() {
$(this).remove()
})
}
});
});
})
button.readBtn {
margin-left: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 1
</a>
</legend>
<ul>
<li class="chapter" id="chapter_9">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_9">
Mark as Read
</button>
</li>
</ul>
</fieldset>
<fieldset class="story">
<legend>
<a href="#" target="_blank">
Title 2
</a>
</legend>
<ul>
<li class="chapter" id="chapter_10">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_10">
Mark as Read
</button>
</li>
<li class="chapter" id="chapter_12">
<a href="#" target="_blank">
Chapter Title
</a>
<button class="readBtn" id="readBtn_12">
Mark as Read
</button>
</li>
</ul>
</fieldset>
This is what I would do:
$(document).ready(function () {
$('body').on("click", ".readBtn", function (e) {
liEl = $(e.currentTarget).parent();
var chapterID = $(e.currentTarget).attr('id').split('_').pop();
$('#chapter_'+chapterID).slideUp(function () {
if (!liEl.is(":visible")
&& !liEl.siblings(":visible").length > 0) {
// Hide `fieldset`
var parent = liEl.closest("fieldset");
parent.slideUp();
parent.remove();
}
});
});
});
http://jsfiddle.net/jplato/zp91wzc0/1/

Categories

Resources