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 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.
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.
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
});
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
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/