Nested dropdown toggle on Bootstrap not working - javascript

I am trying to use this theme: https://colorlib.com/polygon/sufee/index.html
This is the HTML it is using:
<ul class="nav navbar-nav">
<li class="active">
<i class="menu-icon fa fa-dashboard"></i>Dashboard
</li>
<h3 class="menu-title">UI elements</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown show">
<i class="menu-icon fa fa-laptop"></i>Components
<ul class="sub-menu children dropdown-menu show">
<li><i class="fa fa-puzzle-piece"></i>Buttons</li>
<li><i class="fa fa-id-badge"></i>Badges</li>
<li><i class="fa fa-bars"></i>Tabs</li>
<li><i class="fa fa-share-square-o"></i>Social Buttons</li>
<li><i class="fa fa-id-card-o"></i>Cards</li>
<li><i class="fa fa-exclamation-triangle"></i>Alerts</li>
<li><i class="fa fa-spinner"></i>Progress Bars</li>
<li><i class="fa fa-fire"></i>Modals</li>
<li><i class="fa fa-book"></i>Switches</li>
<li><i class="fa fa-th"></i>Grids</li>
<li><i class="fa fa-file-word-o"></i>Typography</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-table"></i>Tables
<ul class="sub-menu children dropdown-menu">
<li><i class="fa fa-table"></i>Basic Table</li>
<li><i class="fa fa-table"></i>Data Table</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-th"></i>Forms
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-th"></i>Basic Form</li>
<li><i class="menu-icon fa fa-th"></i>Advanced Form</li>
</ul>
</li>
<h3 class="menu-title">Icons</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-tasks"></i>Icons
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-fort-awesome"></i>Font Awesome</li>
<li><i class="menu-icon ti-themify-logo"></i>Themefy Icons</li>
</ul>
</li>
<li>
<i class="menu-icon ti-email"></i>Widgets
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-bar-chart"></i>Charts
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-line-chart"></i>Chart JS</li>
<li><i class="menu-icon fa fa-area-chart"></i>Flot Chart</li>
<li><i class="menu-icon fa fa-pie-chart"></i>Peity Chart</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-area-chart"></i>Maps
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-map-o"></i>Google Maps</li>
<li><i class="menu-icon fa fa-street-view"></i>Vector Maps</li>
</ul>
</li>
<h3 class="menu-title">Extras</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-glass"></i>Pages
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-sign-in"></i>Login</li>
<li><i class="menu-icon fa fa-sign-in"></i>Register</li>
<li><i class="menu-icon fa fa-paper-plane"></i>Forget Pass</li>
</ul>
</li>
</ul>
It is pretty standard. Now I want to add second level of dropdown i.e below Buttons I want to have it's items as Button 1, Button 2, Button 3
so I try to put this HTML there:
<li class="menu-item-has-children dropdown">
<a href="#" class="active" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-puzzle-piece fa-2x"></i> Buttons</a>
<ul class="sub-menu children dropdown-menu">
<li>
<a>Button 1</a>
</li>
<li>
<a>Button 2</a>
</li>
<li>
<a>Button 3</a>
</li>
</ul>
</li>
Button when I click on Buttons to open up it's dropdown it instead closes the parent. What am I doing wrong?
Any help is appreciated.

The only way to solve this issue is to add javascript.
Add this to your js file:
$('.menu-item-has-children .menu-item-has-children a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
Reference:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

As you have not update any fiddle yet. Watching to your code what I have found wrong is with the class attribute which you have mentioned multiple times
<a href="#" class="active" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-puzzle-piece fa-2x"></i> Buttons</a>
on above code you are using two classes remove class="active" and then try Hope it will help

Related

Nav menu starts on page open need it to be closed on page load

I have this nav bar here
It works correctly other than when page first loads it starts the page displaying the entire nav menu and the child items.You can see what I mean in the photo here. After a bit (I think after the rest of the js loads) it closes the menu. But Is there a way to do so?!?
Here is my code for the nav bar also
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse slimscrollsidebar">
<ul class="nav" id="side-menu">
<li class="sidebar-search hidden-sm hidden-md hidden-lg">
<!-- input-group -->
<!-- /input-group -->
</li>
<li>
<i class="linea-icon linea-basic fa-fw" data-icon="v"></i> <span class="hide-menu"> Dashboard <span class="fa arrow"></span> </span>
</li>
<li>
<i data-icon="7" class="linea-icon linea-basic fa-fw"></i> <span class="hide-menu">Option<span class="fa arrow"></span></span>
<ul class="nav nav-second-level two-li">
<li>Option</li>
</ul>
</li>
<li>
<i data-icon=")" class="linea-icon linea-basic fa-fw"></i> <span class="hide-menu">Option <span class="fa arrow"></span></span>
<ul class="nav nav-second-level">
<li>Option</li>
<li>
Option<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li> Option</li>
</ul>
</li>
<li>
Option<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li> Option</li>
</ul>
</li>
<li>
Option <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>Option</li>
</ul>
</li>
<li> Option </li>
<li> Option </li>
<li> Option</li>
<li>
Option <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>Option</li>
</ul>
</li>
</ul>
</li>
<li>
<i data-icon="/" class="linea-icon linea-basic fa-fw"></i> <span class="hide-menu">Option<span class="fa arrow"></span></span>
<ul class="nav nav-second-level two-li">
<li>Option</li>
</ul>
</li>
<li>
<i data-icon="" class="linea-icon linea-basic fa-fw"></i> <span class="hide-menu">Option<span class="fa arrow"></span></span>
<ul class="nav nav-second-level">
<li>Option</li>
</ul>
</li>
<li>
<i data-icon="O" class="linea-icon linea-software fa-fw"></i> <span class="hide-menu">Option<span class="fa arrow"></span></span>
<ul class="nav nav-second-level">
<li>Option</li>
</ul>
</li>
<li>
<i data-icon="" class="linea-icon linea-basic fa-fw"></i> <span class="hide-menu">Option<span class="fa arrow"></span></span>
<ul class="nav nav-second-level">
<li>Option</li>
<li>Option</li>
<li>
Option<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
</li>
<li>Option</li>
<li>
Option<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>Option</li>
</ul>
</li>
<li>Option</li>
</ul>
</li>
<li> <i data-icon="P" class="linea-icon linea-basic fa-fw"></i> <span class="hide-menu">Option</span> </li>
<li>
<i data-icon="F" class="linea-icon linea-software fa-fw"></i> <span class="hide-menu">Option<span class="fa arrow"></span></span>
<ul class="nav nav-second-level">
<li> Option </li>
<li> Option </li>
<li>
Option <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li> Option </li>
<li> Option </li>
<li> Option </li>
<li> Option </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>

How to search side Menu list using jquery/javascript after input?

I have input filed in top of Menu that i want to search list of menu inside all a anchor tag.
I tried a lot but not able to achieve required output. Any one there to help me.
I want to display only all the anchor tag. If the input field is empty the menu should be ni normal state.
<nav class="navbar-default" role="navigation" style="overflow: hidden; width: auto; height: 691px;">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li>
<input type="text" id="txt_search" class="form-control ui-front" placeholder="Search Menu..." autocomplete="off" onkeyup="searchAppMenus();">
</li>
<li class="special_link_pos">
<a>FOOD</a>
</li>
<li class="nav-child">
<i class="fa fa-wrench"></i> <span class="nav-label">SET UP</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Menu Header</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-copy"></i> <span class="nav-label">TRANSACTION</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Sales</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-clipboard-check"></i> <span class="nav-label">REPORT</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Shift Handover</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-clipboard-check"></i> <span class="nav-label">REPORT</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a class="nav-link" onclick="go(this);">
<i class="far fa-circle nav-icon"></i>Accounting Report
<span class="fa fa-arrow-down"></span>
</a>
<ul class="nav nav-third-level collapse">
<li>
<a class="nav-link" onclick="go(this);">
<i class="far fa-dot-circle nav-icon"></i>
Profit and Loss
</a>
</li>
</ul>
</li>
<li class="nav-subchild">
<a class="nav-link" onclick="go(this);">
<i class="far fa-circle nav-icon"></i>Accounting Ledgers
</a>
</li>
</ul>
</li>
<li class="special_link_misc">
<a>MISCELLANEOUS</a>
</li>
<li class="nav-child">
<i class="fa fa-cog"></i> <span class="nav-label">GENERAL</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a onclick="go(this);"> <i class="far fa-circle nav-icon"></i>Group Right</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-cog"></i> <span class="nav-label">UTILITY</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a onclick="go(this);"> <i class="far fa-circle nav-icon"></i>Company</a>
</li>
</ul>
</li>
</ul>
</div>
<script>
function searchAppmenus() {
var input, filter, ul, li, a, i;
input = document.getElementById("txt_search");
filter = input.value.toUpperCase();
ul = document.getElementsByClassName("nav");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
This code is not working. what's wrong with this code.
Please anyone there to Solve this..
Consider the following.
$(function() {
function filterMenu(term) {
var filter, input = term.toUpperCase();
$(".nav a").each(function(i, el) {
filter = $(el).text().toUpperCase();
if (filter.indexOf(input) < 0) {
$(el).parent().hide();
}
});
}
$("#txt_search").keyup(function(event) {
// Show all Items
$(".nav li").show();
// If Empty, do nothing
if ($(this).val() !== "") {
// Filter out items that do not match
filterMenu($(this).val());
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar-default" role="navigation" style="overflow: hidden; width: auto; height: 691px;">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li>
<input type="text" id="txt_search" class="form-control ui-front" placeholder="Search Menu..." autocomplete="off">
</li>
<li class="special_link_pos">
<a>FOOD</a>
</li>
<li class="nav-child">
<i class="fa fa-wrench"></i> <span class="nav-label">SET UP</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Menu Header</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-copy"></i> <span class="nav-label">TRANSACTION</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Sales</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-clipboard-check"></i> <span class="nav-label">REPORT</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a> <i class="far fa-circle nav-icon"></i>Shift Handover</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-clipboard-check"></i> <span class="nav-label">REPORT</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a class="nav-link" onclick="go(this);">
<i class="far fa-circle nav-icon"></i>Accounting Report
<span class="fa fa-arrow-down"></span>
</a>
<ul class="nav nav-third-level collapse">
<li>
<a class="nav-link" onclick="go(this);">
<i class="far fa-dot-circle nav-icon"></i> Profit and Loss
</a>
</li>
</ul>
</li>
<li class="nav-subchild">
<a class="nav-link" onclick="go(this);">
<i class="far fa-circle nav-icon"></i>Accounting Ledgers
</a>
</li>
</ul>
</li>
<li class="special_link_misc">
<a>MISCELLANEOUS</a>
</li>
<li class="nav-child">
<i class="fa fa-cog"></i> <span class="nav-label">GENERAL</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a onclick="go(this);"> <i class="far fa-circle nav-icon"></i>Group Right</a>
</li>
</ul>
</li>
<li class="nav-child">
<i class="fa fa-cog"></i> <span class="nav-label">UTILITY</span><span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li class="nav-subchild">
<a onclick="go(this);"> <i class="far fa-circle nav-icon"></i>Company</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
This answer is offered in jQuery. It iterates all the anchors and looks for the term in the text of the item. If it's not found, it is hidden.

treeview expanding all elements that have children

I have a sidebar that has children on certain li elements, I have written some code in jQuery that should target each method, yet when I click on the list element, it slidetoggles all that have children.
my code:-
//dropdown toggle on treeview
const hasTree = $('.has-treeview'),
treeView = $('.nav-treeview');
$.each(hasTree,function(){
$(this).click(function(){
$(treeView).slideToggle();
});
});
and my html;
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item has-treeview">
<a href="#" class="nav-link" data-toggle="collapse" data-target=".nav-treeview" aria-expanded="false">
<i class="nav-icon fa fa-pie-chart"></i>
<p>
Charts
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>ChartJS</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Flot</p>
</a>
</li>
<li class="nav-item">
<a href="p#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Inline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-tree"></i>
<p>
UI Elements
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Buttons</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Sliders</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-edit"></i>
<p>
Forms
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>General Elements</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Advanced Elements</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Editors</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-table"></i>
<p>
Tables
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Simple Tables</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Data Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-calendar"></i>
<p>
Calendar
<span class="badge badge-info right">2</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-envelope-o"></i>
<p>
Mailbox
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Inbox</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Compose</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Read</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>
Pages
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Invoice</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Profile</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Register</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-plus-square-o"></i>
<p>
Extras
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Error 404</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Error 500</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Blank Page</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Starter Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">MISCELLANEOUS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-file"></i>
<p>Documentation</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
so basically I just want to expand the treeview for the one that was clicked, not all of them. Where am I going wrong?
jsfiddle https://jsfiddle.net/xpvt214o/661999/
Try this:
//dropdown toggle on treeview
const hasTree = $('.has-treeview');
$.each(hasTree,function(){
$(this).click(function(){
$(this).children('.nav-treeview').slideToggle();
});
});
JSFiddle
//dropdown toggle on treeview
const hasTree = $('.has-treeview'),
treeView = $('.nav-treeview');
$(hasTree).click(function(){
$(this).find('.nav-treeview').slideToggle();
});
Only add listeners to elements with hasTree classes and than find their treeview and toggle it.
Change only data-accordion from false to true!
Change from:
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
to
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true">

Add class to iframe inner body when parent body hasclass

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MARA-Web Accounting Solution</title>
<link href="font-awesome-4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/lib/bootstrap/bootstrap.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
<script src="js/scripts.min.js" type="text/javascript"></script>
<script src="js/lib/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script src="js/lib/slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="js/lib/tabdrop/bootstrap-tabdrop.js" type="text/javascript"></script>
<script type="text/javascript" src="js/lib/sparklines/jquery.sparkline.min.js"></script>
<script src="js/jquery.blockUI.js" type="text/javascript"></script>
<!-- <script language="javascript" type="text/javascript">
$(window).load(function () {
$("#divLoading").fadeOut("slow");
});
</script>-->
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Montserrat');
body
{
font-family: 'Montserrat' , sans-serif !important;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.get("sessval.ashx", function (data) {
$("#partyval").text(data);
})
})
</script>
<script type="text/javascript">
$(document).ready(function () {
$("iframe>body").css("background-color", "white");
$("a").not('a#logout').click(function (e) {
e.preventDefault();
var hrf = $.trim($(this).attr("href"));
$(this).parent('li').siblings('li').removeClass('select');
$(this).parent('li').addClass('select');
if (hrf) {
try {
$("iframe.external").attr("src", hrf);
}
catch (ex) {
$get('ifrm').src = hrf;
}
}
});
$('ul.menu li:first').addClass('select');
});
$(document).ready(function () {
$('.clickloader').click(function () {
$.blockUI({ css: {
border: 'none',
padding: '15px',
// backgroundColor: '#000',
// '-webkit-border-radius': '10px',
// '-moz-border-radius': '10px',
opacity: .4,
color: '#fff'
}
});
setTimeout($.unblockUI, 1000);
});
});
function getValu() {
var url = window.location.href;
var qparts = url.split("?");
if (qparts.length == 0) {
return "";
}
var query = qparts[1];
var qry = query.split("&")[0];
var parts = qry.split("=");
if (parts[0] == "usn") {
value = parts[1];
return value;
}
}
</script>
<script src="js/lib/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var aaa = $('body').hasClass("left-side-collapsed");
if (aaa == true) {
$("iframe").contents().find('body').addClass('foo');
}
$('.accordion-toggle').on('click', function (event) {
event.preventDefault();
// create accordion variables
var accordion = $(this);
var accordionContent = accordion.next('.accordion-content');
var accordionToggleIcon = $(this).children('.toggle-icon');
// toggle accordion link open class
accordion.toggleClass("open");
// toggle accordion content
accordionContent.slideToggle(250);
// change plus/minus icon
if (accordion.hasClass("open")) {
accordionToggleIcon.html("<i class='fa fa-minus-circle pull-right'></i>");
} else {
accordionToggleIcon.html("<i class='fa fa-plus-circle pull-right'></i>");
}
});
});
</script>
</head>
<body class="left-side-collapsed">
<div>
<header>
<nav class="navbar navbar-default navbar-transparent">
<div class="container" id="nav-container">
<div class="navbar-header">
<button class="navbar-toggle navbar-toggle-settings" data-target="#top-navbar" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<i class="ion ion-ios7-gear-outline"></i></button>
<a class="navbar-brand logo" href="javascript:;">
<img src="images/logo2.png" alt="logo" />
<Label id="complbl" runat="server" CssClass="compn" Height="22px"></Label>
<label ID="fnylbl" runat="server" class="finy" Height="22px"></Label>
</a>
<div class="navbar-side-menu-toggle">
<button class="toggle-btn" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>
</div>
</div>
<div class="collapse navbar-collapse" id="top-navbar">
<nav id="primary_nav_wrap">
<ul>
<li class="menu-item"><a id="logout" href="startingPage.aspx" target="_self"><i class="fa fa-home"></i> Home
</a></li>
<li class="divde">|</li>
<!--<li class="menu-item"></i> Payment</li>
<li class="menu-item"></i> Receipt</li>-->
<li class="menu-item"></i> Transaction</li>
<li class="divde">|</li>
<!--<li class="menu-list "></i> <span> Contra</span> <i class="fa fa-angle-down pull-right"></i>
<ul class="sub-menu-list">
<li >
</i> Cash To Bank</li>
<li >
</i> Bank To Cash</li>
<li >
</i> Bank To Bank</li>
</ul>
</li>-->
<!--<li class="menu-list "></i> <span>A/C Transaction</span> <i class="fa fa-angle-down pull-right"></i>
<ul class="sub-menu-list">
<li>
<i class="fa fa-shopping-cart"></i> Purchase</li>
<li ></i> Sale
</li>
<li ><i class="fa fa-credit-card"></i> Debit Note
</li>
<li></i> Credit Note
</li>
<li></i> Import Purchase
</li>
</ul>
</li>-->
<li class="menu-list "></i> <span> General Setting</span> <i class="fa fa-angle-down pull-right"></i>
<ul class="sub-menu-list">
<li >
</i> Group Ledger</li>
<li>
</i> General Ledger</li>
<li >
</i> Create Ledger</li>
<li >
</i> Modify Ledger</li>
<li>
</i> Customer</li>
<li>
</i> Supplier</li>
<li>
</i> Sales Person</li>
<li>
</i> SAC Code</li>
<li>
</i> HSN Code</li>
<li>
</i> Firm Signatory</li>
<!--<li>
</i> Currency</li>
<li>
</i> Currency Conversion</li>-->
<li>
</i> Lock Entries</li>
<li>
</i> Closing Stock</li>
<!--<li>
</i> Server Utility</li>-->
</ul>
</li>
<li class="divde">|</li>
<li class="menu-list "></i> <span>Base Setting</span> <i class="fa fa-angle-down pull-right"></i>
<ul class="sub-menu-list">
<!--<li >
</i> Service Tax / Charge</li>
<li >
</i> ROE</li>
<li >
</i> New Agent / Vendor</li>
<li >
</i> TDS Base Details</li>
<li >
</i> Section Master</li>-->
<li >
</i> Invoice Setting</li>
<li >
</i> Voucher Setting</li>
<li >
</i> Cost Center</li>
<li>
</i> User List</li>
<li>
</i> Company Profile</li>
<li>
</i> Server Utility</li>
</ul>
</li>
</ul>
</nav>
<ul class="nav navbar-nav navbar-right">
<!--<li>
<a class="top_link1" href="../help_html/index.html" target="parent">Help</a> </li>-->
<li> <a class="top_link1" href="logoutform.aspx">Log Out</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container" id="content-container">
<div class="content-wrapper">
<div class="row">
<div class="side-nav-content">
<div class="left-side-wrapper">
<div class="left-side sticky-left-side">
<div class="left-side-inner">
<ul class="nav nav-pills nav-stacked custom-nav">
<li class="menu-list "><a href="stock/rowmat.aspx"><i class="fa fa-line-chart"></i><span>
Stock (Inventory)</span> <i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li><i class="fa fa-rupee"></i>Price Type</li>
<li><i class="fa fa-tags"></i>Department & Brand</li>
<li><i class="fa fa-tags"></i>Item Master</li>
<li><i class="fa fa-shopping-cart"></i>Item Purchase</li>
<li><i class="fa fa-shopping-cart"></i>Item Sale
</li>
<li><i class="fa fa-shopping-cart"></i>Debit Note
</li>
<li><a href="finance/batchsret.aspx"><i class="fa fa-shopping-cart"></i>Credit Note
</a></li>
<!--<li></i> Sale(Others)
</li>-->
<!--<li></i> Debit Note(Others)
</li>
-->
<li><i class="fa fa-bar-chart"></i>Stock Ledger
</li>
<!--<li></i> Weighted Average </li>
<li></i> FIFO Method</li>-->
<li><i class="fa fa-line-chart"></i>Stock Report</li>
<li><i class="fa fa-area-chart"></i>Sale Report</li>
<li><i class="fa fa-balance-scale"></i>Measurement Unit</li>
</ul>
</li>
<li class="menu-list"><a href="track_reports/updateTranAcHead.aspx"><i class="fa fa-user-o"
aria-hidden="true"></i><span>A/C Reports</span> <i class="fa fa-angle-down pull-right">
</i></a>
<ul class="sub-menu-list">
<li><a href="track_reports/updateTranAcHead.aspx"><i class="fa fa-file-text-o"></i>Alter
Entries</a></li>
<li><a href="track_reports/updateTranAcHead.aspx?id=Trial Balance"><i class="fa fa-file-text-o">
</i>Trial Balance</a></li>
<li><a href="track_reports/updateTranAcHead.aspx?id=Vr Balance Sheet"><i class="fa fa-file-text-o">
</i>Balance Sheet</a></li>
<li><a href="track_reports/updateTranAcHead.aspx?id=Vr PL Sheet"><i class="fa fa-money">
</i>Profit and Loss</a></li>
<li><i class="fa fa-book"></i>Subd. Book</li>
<li><i class="fa fa-file-text-o"></i>Ledger View</li>
<li><i class="fa fa-print"></i>Ledger Print</li>
<li><a href="track_reports/CustStatement.aspx"><i class="fa fa-file-text-o"></i>Customer
Statement</a></li>
</ul>
</li>
<li class="menu-list "><a href="track_reports/ServiceTaxD.aspx"><i class="fa fa-file-text-o">
</i><span>Other Reports</span> <i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li><i class="fa fa-file-text-o"></i>B/L Sheet</li>
<li><i class="fa fa-file-text-o"></i>P/L Statement</li>
<!--<li >
</i> Service Tax Report</li>
<li >
</i> Daily Sale Report</li>-->
<!--<li>
<i class="fa fa-file-text-o"></i> TDS Report</li>-->
<li><i class="fa fa-file-text-o"></i>Debtor Aging</li>
<li><i class="fa fa-money"></i>Cash Flow</li>
<!--<li>
</i> Dvat</li>
<li>
</i> Dvat Sale</li>
</ul>
</li>-->
<li><a href="track_reports/bankrecon.aspx"><i class="fa fa-bank"></i>
Bank Reconciliation</a></li>
<li><a href="finance/brconsole.aspx"><i class="fa fa-file-o"></i><span>
HO/Br Reconcile</span> </a></li>
<li><a href="track_reports/ConsoleR.aspx"><i class="fa fa-file-o">
</i>Consolidation</a> </li>
<li><a href="track_reports/shorting.aspx"><i class="fa fa-file-text-o">
</i>Query Reporting</a> </li>
<li><a href="finance/LedgerMerge.aspx"><i class="fa fa-file-o"></i>
Merge Ledger</a> </li>
<li><a href="GST/SupplierCnsltedrept.aspx"><i class="fa fa-file-powerpoint-o">
</i>Purchase Report</a> </li>
<li><a href="GST/SupplierCnsltedreptSale.aspx"><i class="fa fa-wpforms">
</i>Sales Report</a> </li>
</ul>
</li>
<!--GST MENU -->
<li class="menu-list "><a href=""><i class="fa fa-wpforms"></i><span>GST Forms</span>
<i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li><i class="fa fa-file-text-o"></i>GSTR-1</li>
<li><i class="fa fa-file-text-o"></i>GSTR-2</li>
<li><i class="fa fa-file-text-o"></i>GSTR-3</li>
<!--GST MENU END -->
</ul>
</li>
<li class="menu-list "><a href=""><i class="fa fa-folder-o"></i><span>General Invoice</span>
<i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li><i class="fa fa-file-text-o"></i>General Purchase</li>
<li><i class="fa fa-file-text-o"></i>General Sale</li>
<!--GST MENU END -->
</ul>
</li>
<li class="menu-list "><a href=""><i class="fa fa-upload"></i><span>Bulk Upload</span>
<i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li><i class="fa fa-paypal"></i>General Ledger</li>
<li><i class="fa fa-paypal"></i>Transaction</li>
<!--<li >
</i> rent</li>-->
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main-content-wrapper">
<iframe name="contentframe" src="mainpage.aspx" class="external left-side-collapsed" scrolling="yes"
width="99.8%" height="600px" style="background-color: #FFFFFF; border: none;"
id="Iframe1"></iframe>
</div>
</div>
</div>
</div>
</div>
<!--<div id='divLoading' style="position:absolute;top:30%;left:40%" >
<div class="loading" align="center" id="divImageLoader">
<img src="images/ajax-loader2.gif" alt="Loading..."/> Loading
</div></div>-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 pull-left">
<ul class="list-inline">
<li>
<strong>
<span id="partyval"></span></strong>
</li>
<li><asp:Label ID="dblbl" runat="server" Font-Bold="True" ForeColor="White" Text="Label"></asp:Label></li>
</ul>
</div>
<div class="col-md-6 pull-right">
<ul class="list-inline" style="text-align:right">
<li><Bold> Powered by Maco Infotech. Ltd. </Bold></li>
<li><asp:Label ID="dblbl" runat="server" Font-Bold="True" ForeColor="White" Text="Label"></asp:Label></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
I want to add class on iframe inner body a class when my parent body hasClass left-side-collapsed I and try this code but it is not work for me any solution please comment. i have paste the code here you can check the code it is .net file .aspx any solution please comment. ------------------------------------
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
As long as the iframe is loaded this should work...
$("iframe").contents().find('body').addClass('foo');
...maybe go the other way around?
in mainpage.aspx:
$(document).ready(function () {
var p = parent;
if(p.$('body').hasClass('left-side-collapsed')){
$('body').addClass('foo');
}
});
Can you try:
var iframe = document.getElementById("myiframe");
var iframe_doc = iframe.contentWindow ? iframe.contentWindow.document : iframe.contentDocument;
You should now be able to find the body on iframe_doc. Jquery might be easier to write - $(iframe_doc).find('body') - and then you can add the class.
See these answers for additional reference:
How can I access iframe elements with Javascript?
How do I add a class to a given element?

jQuery List Toggle Children

My problem is when I click on the #topmenu it conflict's with another menu that I have
I want to open children UL element when li is clicked
Javascript Code:
$("#topmenu").click(function(){
$(".treeview-menu").addClass("treeview-menu open").toggle();
});
HTML
<ul class="sidebar-menu" id="treeview-menu">
<li class="treeview" id="topmenu">
<a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
<i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>Pagamentos</li>
<li><i class="fa fa-circle-o"></i>Relatórios</li>
</ul>
</li>
<li class="treeview" id="topmenu">
<a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
<i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>Pagamentos</li>
<li><i class="fa fa-circle-o"></i>Relatórios</li>
</ul>
</li>
</ul>
You have medley of IDs with same names.
Use classes for common JS behavior.
$(".treeview").click(function(){
$(this).find(".treeview-menu").addClass("open").toggle();
});
Changed the class name and id name of 2nd ul and li tag. Works fine
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<ul class="sidebar-menu" id="treeview-menu">
<li class="treeview" id="topmenu">
<a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
<i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i>Pagamentos</li>
<li><i class="fa fa-circle-o"></i>Relatórios</li>
</ul>
</li>
<li class="treeview1" id="topmenu1">
<a href="#"><i class="fa fa-table"></i><span>Financeiro</span>
<i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu1">
<li><i class="fa fa-circle-o"></i>Pagamentos</li>
<li><i class="fa fa-circle-o"></i>Relatórios</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function(){
$(document).ready(function(){
$("#topmenu").click(function(){
$(".treeview-menu").addClass("treeview-menu open").toggle();
});
$("#topmenu1").click(function(){
$(".treeview-menu1").addClass("treeview-menu open1").toggle();
});
});
</script>
</body>
</html>

Categories