when i click on the treeview other treeviews needs to be closed, tried allot but couldn't solve it can anybody help me please.
http://7revolution.com/captain/captain/empty.html
$('.sidebar-menu .treeview').on('click', function(){
if($(this).hasClass("active")) {
$('.sidebar-menu').find('.treeview .treeview-menu').removeClass('active');
$(this).find(".treeview.active").removeClass("active");
e.preventDefault();
}
else{
$('.sidebar-menu').find('.treeview-menu').attr('display', 'block');
}
<ul class="sidebar-menu">
<li class="active">
<a href="index.html">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li>
<a href="pages/widgets.html">
<i class="fa fa-th"></i> <span>Widgets</span> <small class="badge pull-right bg-green">new</small>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-bar-chart-o"></i>
<span>Charts</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-angle-double-right"></i> Morris</li>
<li><i class="fa fa-angle-double-right"></i> Flot</li>
<li><i class="fa fa-angle-double-right"></i> Inline charts</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-angle-double-right"></i> General</li>
<li><i class="fa fa-angle-double-right"></i> Icons</li>
<li><i class="fa fa-angle-double-right"></i> Buttons</li>
<li><i class="fa fa-angle-double-right"></i> Sliders</li>
<li><i class="fa fa-angle-double-right"></i> Timeline</li>
</ul>
</li>
</ul>
When i click on the treeview other treeviews needs to be closed, tried allot but couldn't solve it can anybody help me please.
when i click on the treeview other treeviews needs to be closed, tried allot but couldn't solve it can anybody help me please.
Try this:
Javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('.sidebar-menu .treeview').on('click', function () {
$('.treeview').removeClass('active');
$(this).addClass('active');
});
});
</script>
CSS:
<style>
.sidebar-menu .treeview-menu{ display: none; }
.active .treeview-menu {
display: block;
}
.treeview-menu {
display: none;
}
</style>
This might help out a little: http://jsfiddle.net/qh8vz4y4/
JS
$('.sidebar-menu .treeview').on('click', function () {
$(this).addClass('active');
$('.treeview').not(this).removeClass('active');
});
CSS
.active .treeview-menu {
display: block;
}
.treeview-menu {
display: none;
}
Related
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.
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
<!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?
I'm using single navigation file for all web pages, so i need to add or remove class based on click function. but somehow it's not working fine. any help would be appreciated.
$(function() {
$("li").on("click", function() {
$("li.active").removeClass("active");
$(this).addClass("active");
});
});
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li style="cursor: pointer;" onclick="window.location='new-patient.php';">
<a><i class="fa fa-plus-square"></i>New Patient</a>
</li>
<li style="cursor: pointer;" onclick="window.location='returning-patient.php';">
<a><i class="fa fa-plus-square"></i>Returning Patient</a>
</li>
</ul>
</div>
</div>
$('#menu li a').on('click', function(){
$('#menu li a.current').removeClass('current');
$(this).addClass('current');
});
JSFiddle
You can use following script on every page to set this.
var pageName = (function () {
var a = window.location.href,
b = a.lastIndexOf("/");
return a.substr(b + 1);
} ());
$("#menu-content a").each(function () {
if ($(this).attr('href') == pageName) {
$(this).parents("li").addClass('active');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="new-patient.php">
<i class="fa fa-plus-square"></i>New Patient
</a>
</li>
<li>
<a href="returning-patient.php">
<i class="fa fa-plus-square"></i>Returning Patient
</a>
</li>
</ul>
</div>
</div>
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>