routes/map.js
model() {
return this.store.findAll('entity');
},
setupController(controller, model) {
var self = this;
controller.set('lat', 39.000000000000000);
controller.set('lng', 25.000000000000000);
controller.set('zoom', 3);
},
this my template
<div class="menu-btn ">☰</div>
<nav class="pushy pushy-left">
<div class="profile">
<div class="avatar"><img src="{{rootURL}}/assets/img/avatar/ava_16.jpg" alt="#"><span>5</span></div>
<h3>Ananew Matvey</h3>
</div>
<ul class="side_menu">
<li><i class="fa fa-bookmark-o"></i>Promo page</li>
<li><i class="fa fa-map-marker"></i>Map</li>
<li><i class="fa fa-list"></i>Place list</li>
<li><i class="fa fa-th"></i>Place grid</li>
<li><i class="fa fa-building-o"></i>Place</li>
<li><i class="fa fa-user"></i>User profile</li>
<li><i class="fa fa-book"></i>Blog</li>
<li><i class="fa fa-file-powerpoint-o"></i>Open post</li>
</ul>
</nav>
when i remove the model hook
the navbar work good but if i use hook model function it doesn't do any thing
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
I wish to fade in a share link when clicked on a share icon, but the problem am having is that they are many of them, it is like a post and am using a common class to fade in the links, when i click on one icon all the share link fades in, is there any way to fade in the link per each post, am trying to keep my code dry.
<div class="first-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
<div class="second-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
$('.fire-share').click(function(){
$('.shareo').fadeToggle()
})
I have tried using .each() but it still throws up the same problem, if i use different classes or id's it works fine but a post of many numbers, its not dry
$('.fire-share').click(function(){
$('.shareo').each(function(i,obj){
$(this).fadeToggle()
})
})
Use this context to tell the clicked element
Use find to search for the specific element that is within the parent element
$('.fire-share').click(function(){
$(this).find('.shareo').fadeToggle()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
<div class="second-post">
<li class="fire-share"><i class="fa fa-share-alt"></i>
<ul class="shareo">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</li>
</div>
<!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?
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>