I have Category list sidebar and I want to make it sortable up and down, also remove one list of them with bottom.
Here is image:
example
HTML CODE:
<div class="side-nav-categories">
<div class="title"><strong>Category</strong></div>
<ul id="category-tabs">
<li> Web Applications<i class="fa fa-minus"></i>
<ul class="sub-category-tabs">
<li>HTML</li>
<li>CSS</li>
<li>SCSS</li>
</ul>
</li>
</ul>
<ul id="category-tabs">
<li>Script<i class="fa fa-minus"></i>
<ul class="sub-category-tabs">
<li>Javascript</li>
<li>jQuery</li>
<li>Angular JS</li>
</ul>
</li>
</ul>
<ul id="category-tabs">
<li>Server Script<i class="fa fa-minus"></i>
<ul class="sub-category-tabs">
<li>C#</li>
<li>PHP</li>
<li>ASP.Net</li>
</ul>
</li>
</ul>
</div>
You can grab the element from its id:
document.getElementById(**yourId**).innerHTML = 'Realtime';
The above line just changed the value inside an element in realtime, using JavaScript. Keep in mind though, that you don't need to use innerHTML, you can use any JavaScript attribute that you want.
Related
I have a 5 step checkout and what I am trying to achieve is putting a checkmark in the previous steps after they have been completed.
I tried some javascript but it seems to me that I am using a wrong function
here is the html of the elements:
so basically when you move forward the previous steps will be highlighted as completed
edit: here is the code:
<ul class="checkout-steps steps-5">
<li class="cart">
<a href="https://www.eyerim.sk/checkout/cart/">
<small>Krok</small>
<em>Môj Košík</em>
</a>
</li>
<li class="address">
<a href="https://www.eyerim.sk/stepcheckout/step/address/">
<small>Krok</small>
<em>Adresa</em>
</a>
</li>
<li class="active payment">
<span>
<small>Krok</small>
<em>Spôsob platby</em>
</span>
</li>
<li class="review">
<span>
<small>Krok</small>
<em>Spolu</em>
</span>
</li>
<li class="success">
<span>
<small>Krok</small>
<em>HOTOVO</em>
</span>
</li>
</ul>
and here is the code of the currently
active step
<li class="active payment">
<span>
<small>Krok</small>
<em>Spôsob platby</em>
</span>
</li>
Icon change on click in JS, change the icon as per requirement.
JS
function change (iconID){
if(document.getElementById(iconID).className=="fa fa-chevron-up"){
document.getElementById(iconID).className = "fa fa-chevron-down";
}else{
document.getElementById(iconID).className = "fa fa-chevron-up";
}
}
HTML
<i id="icon1" onclick="change('icon1')" class="fa fa-chevron-up" aria hidden="true">
I have my index calls from other HTML pages using the library CSI.js
my index:
<div class="col-6 col-md-2" id="nav">
<div data-include="./views/menu/sticky-menu.html"></div> <!-- menu -->
</div>
in menu page:
<div class="sticky-menu" id="sticky-menu">
<div class="sticky-menu-header">
<img class="logo" src="./img/logo-branco.svg" />
</div>
<ul>
<li class="active"><i class="fa fa-home"></i>Home </li>
<li><i class="fa fa-glass"></i>Eventos </li>
<li><i class="fa fa-file-image-o"></i>Alertas <span class="sticky-menu-label">4 </span></li>
<li><i class="fa fa-cog"></i>Indicadores
<ul class="submenu">
<li>Teste</li>
<li>Teste </li>
<li>
Teste
<ul class="submenu">
<li>Teste </li>
</ul>
</li>
<li>Consulting </li>
</ul>
</li>
<li>
<i class="fa fa-suitcase"></i>Grafana
<ul class="submenu">
<li>Item 0 </li>
<li>Item 1 <span class="sticky-menu-label">10 </span></li>
</ul>
</li>
</ul>
</div>
submenu have dropdown animation with jquery:
jQuery(document).ready(function() {
jQuery("#sticky-menu").jqueryAccordionMenu();
});
On the menu page (sticky-menu.html) it works fine, like this:
https://i.stack.imgur.com/oAPds.png
Notice that the + sign appears when clicked:
https://i.stack.imgur.com/9OJIu.png
However, not index.html, menu (jquery) does not work:
https://i.stack.imgur.com/tvBRR.png
When I enter the code in the console:
jQuery(document).ready(function() {
jQuery("#sticky-menu").jqueryAccordionMenu();
});
it works: https://i.stack.imgur.com/YZe8y.png
I've included the js code on both pages, I think it's silly, but I really can not. Thank you for your help.
EDIT:
I noticed that my sticky-menu.html is wearing after the script. How to solve?
https://i.stack.imgur.com/j1Pzu.png
EDIT 2 :
I solved with requireJS.
You could run some code as follows
function waitForElement(id, callback){
var checkForElement = setInterval(function(){
if(document.getElementById(id)){
clearInterval(checkForElement);
callback();
}
}, 100);
}
waitForElement("idOfElementToWaitFor", function(){
alert("element is loaded.. do stuff");
});
Where your id for your element would be #sticky-menu and your callback function would be jQuery("#sticky-menu").jqueryAccordionMenu();
Here is the code of the sidebar :
$('.sidebar-nav-menu,sidebar-nav-submenu').click(function(){
$(this).toggleClass('open');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-alt">
<div class="sidebar-content">
<ul class="sidebar-nav">
<li>
<i class="fa fa-dashboard sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Dashboard</span>
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Advanced Settings</span>
<ul>
<li>
Site Settings
</li>
<li>
Appearance
</li>
<li>
Login & Registration Settings
</li>
<li>
Session Settings
</li>
<li>
Mailer Settings
</li>
</ul>
</li>
<li class="active">
<i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-rocket sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">User Interface</span>
<ul>
<li>
Widgets
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Elements
<ul>
<li>
Blocks & Grid
</li>
<li>
Typography
</li>
<li>
Buttons & Dropdowns
</li>
<li>
Navigation & More
</li>
<li>
Progress & Loading
</li>
<li>
Tables
</li>
</ul>
</li>
<li>
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Forms
<ul>
<li>
Components
</li>
<li>
Wizard
</li>
<li>
Validation
</li>
</ul>
</li>
<li class="active">
<i class="fa fa-chevron-left sidebar-nav-indicator"></i>Icon Packs
<ul>
<li>
Font Awesome
</li>
<li>
Glyphicons Pro
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
WHAT I WANT
On clicking the a tag having class 'sidebar-nav-menu' it adds the 'open' class to the a tag and shows the first level of ul.
On clicking the a tag having class 'sidebar-nav-submenu' it adds the 'open' class to the a tag and shows the second level of ul.
Now i want to close all other second level 'sidebar-nav-submenu' if i open one second level 'sidebar-nav-submenu'.
Also if i open 1st level 'sidebar-nav-menu' then it should hide all other 'sidebar-nav-menu'
Any idea?
If I understand correctly, you can check to see if the (sub)menu is already open and if it is not then remove the class open from all other (sub)menus.
Edited the click submenu
$('.sidebar-nav-menu,.sidebar-nav-submenu').click(function() {
if (!$(this).hasClass('open')) {
if ($(this).hasClass('sidebar-nav-menu')) {
$('.sidebar-nav .sidebar-nav-menu .sidebar-nav-submenu.open').removeClass('open');
$('.sidebar-nav .sidebar-nav-menu.open').removeClass('open');
} else if ($(this).hasClass('sidebar-nav-submenu')) {
$('.sidebar-nav .sidebar-nav-submenu.open').removeClass('open');
}
}
$(this).toggleClass('open');
});
Let me know if this helps.
How can I add another level to this menu structure from the HTML at the bottom of the page?
Current
Test
--->a
--->b
what I'm trying to do
Test
--->a
--->1
--->2
--->b
--->1
--->2
html
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<i class="glyphicon glyphicon-circle"></i> Facebook
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
<ul>
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<a data-target="#submenu" data-toggle="collapse" href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a>
<ul class="list-unstyled collapse" id="submenu">
<li> 1 </li>
<li> 2</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
</ul>
I believe you just need to create another collapse element with a unique Id. using the <a> element as your toggle.
Below is my Html code
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}}
<a class="fa fa-pencil-square-o" href="{{li.stateh}}"></a>
</li>
</ul>
</li>
I want the edit icon to be adjacent to F/R production Report. Not below Production Report.
P.S. I tried display: inline-block; display: inline; but both are not working.
Have you triend to simply place the tag inside the previous tag?
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}} <a class="fa fa-pencil-square-o" href="{{li.stateh}}"> </a>
</li>
</ul>
</li>