Currently, I am hiding a sidebar with javascript (When I click a button the menu hides, click it again, it appears back)
I did some research on localStorage and nothing prevailed. I am wondering if I am able to set a simple user preference using this method. All the JS does is change the elements display property. Sorry the code is in the same section (The big break indicates HTML after)
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
<div class="col-sm-2">
<i id="collapse" class="fa fa-bars fa-lg" onclick="toggle_visibility('communitiesWrapper');" style="position:absolute;"></i>
<div id="communitiesWrapper">
<div id="communitiesHeader">
<center><h4 style="font-weight: 700;">Communities & Teams</h4></center>
</div>
<div id="communitiesMenu">
<ul class="listofcommunities">
<li><i class="fa fa-code" aria-hidden="true"></i>PCMasterRace</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Steam</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Corsair</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Web development</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Font Awesome</li>
</ul>
<hr>
<ul class="listofteams">
<li><i class="fa fa-code" aria-hidden="true"></i>Project A</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Project B</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project C</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project A</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project B</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project C</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project A</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project B</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project C</li>
<li><i class="fa fa-code" aria-hidden="true"></i></i>Project A</li>
</ul>
</div>
</div>
</div>
Cheers,
Yes, you can use localStorage.setItem and localStorage.getItem methods. You have to bind a function to the side bar (onClick) to store user's preference. If the used hides the side bar, the function should do:
localStorage.setItem("showSideBar", "no");
and set it to yes if the opposite.
And then whenever you load the page, check for this value to decide whether to show the side bar or not:
var show = localStorage.getItem("showSideBar");
if show == "yes":
#show the side bar
else:
#hide the side bar
Related
I have the following html with two lists, and I want to press a button and swap the ul's, li´s elements between the two
<ul class="list-group" id="lines">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
I have tried to accomplish this with the following jquery code
$("#swaplists").click(function () {
var $temp1 = $("#lines").children.clone;
var $temp2 = $("#columns").children.clone;
clearLinesAndColumns();
$temp2.appendTo("#lines");
$temp1.appendTo("#columns");
});
the expected result would be
<ul class="list-group" id="lines">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
But I get the error
Uncaught TypeError: Cannot read property 'appendTo' of undefined
How can I achieve this functionality with jquery and why is children.clone undefined?
Instead of cloning and appending, you can simply get the html() and insert in other:
$("#swaplists").click(function() {
var linesHtml = $("#lines").html();
var columnsHtml = $("#columns").html();
$("#lines").html(columnsHtml);
$("#columns").html(linesHtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" id="lines">
<li class="list-group-item"> 1 <i class=" fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item"> 3 <i class=" fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<button id="swaplists">Swap</button>
$("#swaplists").click(function () {
var $temp1 = $("#lines").children().clone();
var $temp2 = $("#columns").children().clone();
clearLinesAndColumns();
$temp2.appendTo("#lines");
$temp1.appendTo("#columns");
});
You forgot to put '()' after calling 'children' and 'clone'...those are methods.
Here is the sample code:
$("#swaplists").click(function() {
var $temp1 = $("#lines li");
var $temp2 = $("#columns li");
$temp2.appendTo("#lines");
$temp1.appendTo("#columns");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" id="lines">
<li class="list-group-item"> 1 <i class="fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item"> 3 <i class=" fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<button id="swaplists">SWAP LISTS</button>
I need to append to the nested list under ARTCC. Here is an excerpt from the body of the document:
<div id="GUI" class="sidenav">
<section id='list' class="ladder tree">
<ul>
<li><a id="ARTCC" href="."><i class="fa fa-cube"></i> <i class="fa fa-check-square"></i> ARTCC</a>
<ul>
<li><a id ="ZAB" href="#"><i class="fa fa-check-square"></i> ZAB</a></li>
<li><i class="fa fa-check-square"></i> ZAU</li>
<li><i class="fa fa-check-square"></i> ZBW</li>
</ul>
</li>
</ul>
</section>
</div>
Here is the funciton that appends items to the list:
for(var i = 0; i < added.length; i++) {
var entityId = added[i].name.toLowerCase();
if(entityId.includes("z")){
$("#ARTCC ul").append("<li><a id=" + added[i].id + " class=ARTCC href='#'><i class='fa fa-check-square'</i>" + added[i].name + "</a></li>");
}
}
When I use $("#ARTCC ul").append nothing is added to the list.
However, $("#list ul ul").append does place the items in the correct location but also appends the items to the other list items and it causes a function that relies on $("a.ARTCC").dblclick() to not execute on a double click.
From what I have read "#ARTCC ul" seems to be the correct way to get the result I am looking for but it is currently not working. Am I missing something here?
The end result would add this last element to the list:
<li><a id="ARTCC" href="."><i class="fa fa-cube"></i> <i class="fa fa-check-square"></i> ARTCC</a>
<ul>
<li><a id ="ZAB" href="#"><i class="fa fa-check-square"></i> ZAB</a></li>
<li><i class="fa fa-check-square"></i> ZAU</li>
<li><i class="fa fa-check-square"></i> ZBW</li>
//new item
<li><i class="fa fa-check-square"></i> NEW ITEM</li>
</ul>
</li>
ARTCC doesn't have any ul below it in the document tree. The query selector you have listed is first trying to find an element with the id of "ARTCC", then selecting all ul elements that are within it. It sounds like you're looking to add to this ul:
<ul>
<li><a id ="ZAB" class="ARTCC" href="#"><i class="fa fa-check-square"></i> ZAB</a></li>
<li><i class="fa fa-check-square"></i> ZAU</li>
<li><i class="fa fa-check-square"></i> ZBW</li>
</ul>
To do that, change <ul> to <ul id="someId">, then in jQuery you can do $('#someId').append(someElement);
Unless you're trying to append to the class ARTCC in which you'd do $('.ARTCC') but it doesn't look like that's what you're trying to do.
Change $("#ARTCC ul") to $("#ARTCC+ul"). This is prev + next selector.
I'm not sure what's wrong with my code, but when I click the icons it doesn't redirect to the href links.
<ul class="nav navbar-nav navbar-right social">
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-soundcloud"></i></li>
<li><i class="fa fa-lg fa-youtube"></i></li>
<li><i class="fa fa-lg fa-twitter"></i></li>
</ul>
Here is the URL - http://blindthreatshc.mycoffeeshopdemosite.com/
You have the following code in your HTML:
$(".navbar a, footer a[href='#myPage']").on('click', function(event){ event.preventDefault()});
This prevents your clicks from continuing.
If you change it to the following, you can exclude your social links:
$(".navbar:not(.social) a, footer a[href='#myPage']").on('click', function(event){ event.preventDefault()});
You are missing this tag target="_blank"
<li><i class="fa fa-lg fa-facebook"></i></li>
I am using a jQuery menu plugin from http://mmenu.frebsite.nl/
Everything is working fine, but when I select the sub menu, it never shows the active state. It keeps on sending to the main page after page loads. See the screenshot for more information.
I am doing this:
<div id="menu">
<ul class="listview-icons">
<li>
<a>
<form method="post" action="{$site_url}/tracking.html" name="trak_now_homepage" id="trak_now_homepage">
<div class="form-group texttransform">
<input type="text" class="form-control" id="shipment_track_num" name="track_num" placeholder="Enter the booking ID">
<span id="shipment_alert" class="alert" style="color:#CF0"></span>
<BR />
<input name="news_go" type="submit" value="Track now" class="com_buton" id="send" onclick="return valid_shipment_tracking_form(document.trak_now_homepage);" />
</div>
</form>
</a>
</li>
<li><i class="fa fa-home"></i> HOME</li>
<li>
<span><i class="fa fa-file-text-o"></i> SEND</span>
<ul>
<li><i class="fa fa-file-text-o"></i> DOCUMENTS</li>
</ul>
</li>
<li>
<span><i class="fa fa-plane"></i> SERVICES</span>
<ul>
<li><i class="fa fa-map-marker"></i> SAME DAY DELIVERY</li>
</ul>
</li>
<li>
<span><i class="fa fa-user"></i> ABOUT US</span>
<ul>
<li><i class="fa fa-info-circle"></i> ABOUT US</li>
<li><i class="fa fa-info-circle"></i> FAQ</li>
<li><i class="fa fa-info-circle"></i> HOW IT WORKS</li>
<li><i class="fa fa-info-circle"></i> PACKAGING ADVICE</li>
<li><i class="fa fa-info-circle"></i> REVIEWS</li>
<li><i class="fa fa-info-circle"></i> TERMS</li>
<li><i class="fa fa-info-circle"></i> POLICIES</li>
<li><i class="fa fa-info-circle"></i> VOLUME CALCULATOR</li>
</ul>
</li>
<li><i class="fa fa-phone"></i> CONTACT US</li>
<li><i class="fa fa-fw fa-shopping-cart"></i>ITEMS</font></li>
<li><i class="fa fa-fw fa-user"></i> my account</li>
</ul>
</div>
How to fix this? The working demo is at www.matchcouriers.com
I have solved it, using smarty condition as i am using smarty as a template and the class that need to be used from mmenu is mm-seleced
<li class="mm-selected"><i class="fa fa-home"></i> HOME</li>
By default mmenu uses the css class Selected (note the capital S) on the current li for the current selected item.
selected menu have a dark background
You must define your own li.Selected style, I don't think you have done this.
sub-menu panel should stay as it is, but after selecting menu and page load, main-menu appear no the selected sub-menu panel
This is actually not automatic. You need to add Selected class to the relevant li on your pages. For example, in the About Us page, you would do this:
<li class="Selected"><i class="fa fa-info-circle"></i> ABOUT US</li>
References:
Styling Lists
Menu Items not selected after page load
I have a class applied to the "sub-menu-click" div when a sub menu is opened. When another sub menu is opened, the script closes the previous one but I need it to also remove the "sub-menu-open" class applied to the previous sub-menu-click but without removing the class to the new sub-menu opened.
$('.sub-menu-click').click(function(){
$(this).next(".sub-menu").slideToggle(250);
$(this).addClass("sub-menu-open");
$(this).parent().parent().children().children().not($(this)).next('.sub-menu').slideUp(250);
return false;
});
<ul id="nav">
<li>
Dashboard
</li>
<li>
<div class="sub-menu-click">Clients</div>
<ul class="sub-menu">
<li><i class="fa fa-angle-right"></i>Lookup Clients</li>
<li><i class="fa fa-angle-right"></i>Create a Client</li>
</ul>
</li>
<li>
<div class="sub-menu-click">Properties</div>
<ul class="sub-menu">
<li><i class="fa fa-angle-right"></i>Lookup Properties</li>
<li><i class="fa fa-angle-right"></i>Create a Property</li>
</ul>
</li>
<li>
<div class="sub-menu-click">Appointments</div>
<ul class="sub-menu">
<li><i class="fa fa-angle-right"></i>Lookup Appointments</li>
<li><i class="fa fa-angle-right"></i>Book an Appointment</li>
</ul>
</li>
<li>
<div class="sub-menu-click">Inventories</div>
<ul class="sub-menu">
<li><i class="fa fa-angle-right"></i>Lookup Inventories</li>
<li><i class="fa fa-angle-right"></i>Create an Inventory</li>
</ul>
</li>
<li>
<div class="sub-menu-click">Check-Ins</div>
<ul class="sub-menu">
<li><i class="fa fa-angle-right"></i>Lookup Check-Ins</li>
<li><i class="fa fa-angle-right"></i>Create a Check-In</li>
</ul>
</li>
<li>
<div class="sub-menu-click">Check-Outs</div>
<ul class="sub-menu">
<li><i class="fa fa-angle-right"></i>Lookup Check-Outs</li>
<li><i class="fa fa-angle-right"></i>Create a Check-Out</li>
</ul>
</li>
</ul>
Try this
$('.sub-menu-click').click(function(){
$(this).next('.sub-menu').slideToggle(250);
$(this).toggleClass('sub-menu-open');
});
It will toggle the class and the slide to achieve the result
Try this:
$('.sub-menu-click').click(function(){
$('.sub-menu-click').next(".sub-menu").slideUp(250);
$('.sub-menu-click').removeClass('sub-menu-click');
$(this).next(".sub-menu").slideToggle(250);
$(this).addClass("sub-menu-open");
});
$('.sub-menu-click').click(function(){
$("sub-menu-open").removeClass("sub-menu-open");
$(this).next(".sub-menu").slideToggle(250);
$(this).addClass("sub-menu-open");
$(this).parent().parent().children().children().not($(this)).next('.sub-menu').slideUp(250);
return false;
});