hasan maco
Reputation: 21
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"><a href="finance/multipay.aspx" ><i class="fa fa-shopping-cart"></i> Payment</a></li>
<li class="menu-item"><a href="finance/multirecp.aspx" ><i class="fa fa-file-image-o"></i> Receipt</a></li>-->
<li class="menu-item"><a href="finance/Journal.aspx" ><i class="fa fa-caret-square-o-up"></i> Transaction</a></li>
<li class="divde">|</li>
<!--<li class="menu-list "><a href="finance/multipay.aspx" ><i class="fa fa-money"></i> <span> Contra</span> <i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li >
<a href="finance/cashtobank.aspx" ><i class="fa fa-cc-mastercard"></i> Cash To Bank</a></li>
<li >
<a href="finance/banktocash.aspx" ><i class="fa fa-cc-visa"></i> Bank To Cash</a></li>
<li >
<a href="finance/contra.aspx" ><i class="fa fa-paypal"></i> Bank To Bank</a></li>
</ul>
</li>-->
<!--<li class="menu-list "><a href="finance/multipay.aspx" ><i class="fa fa-money"></i> <span>A/C Transaction</span> <i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li>
<a href="finance/purchase.aspx" class="clicloader"><i class="fa fa-shopping-cart"></i> Purchase</a></li>
<li ><a href="finance/sales.aspx" ><i class="fa fa-tags"></i> Sale </a>
</li>
<li ><a href="finance/purchaseR.aspx" class="clicloader"><i class="fa fa-credit-card"></i> Debit Note</a>
</li>
<li><a href="finance/salesR.aspx" ><i class="fa fa-credit-card"></i> Credit Note </a>
</li>
<li><a href="finance/ImportPurchase.aspx" ><i class="fa fa-credit-card"></i> Import Purchase</a>
</li>
</ul>
</li>-->
<li class="menu-list "><a href="finance/suppVen.aspx" ><i class="fa fa-wrench"></i> <span> General Setting</span> <i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<li >
<a href="finance/acgps.aspx" ><i class="fa fa-users"></i> Group Ledger</a></li>
<li>
<a href="finance/gennewac.aspx" ><i class="fa fa-users"></i> General Ledger</a></li>
<li >
<a href="finance/suppVen.aspx" ><i class="fa fa-user-plus"></i> Create Ledger</a></li>
<li >
<a href="finance/suppVenEdit.aspx" ><i class="fa fa-user-plus"></i> Modify Ledger</a></li>
<li>
<a href="finance/NewCustomer.aspx" ><i class="fa fa-user-secret"></i> Customer</a></li>
<li>
<a href="finance/NewSupplier.aspx" ><i class="fa fa-user-secret"></i> Supplier</a></li>
<li>
<a href="finance/Sales_person.aspx" ><i class="fa fa-user-secret"></i> Sales Person</a></li>
<li>
<a href="finance/SACcode.aspx" ><i class="fa fa-code"></i> SAC Code</a></li>
<li>
<a href="finance/hsncode.aspx" ><i class="fa fa-code"></i> HSN Code</a></li>
<li>
<a href="finance/FirmSignatory.aspx" ><i class="fa fa-pencil"></i> Firm Signatory</a></li>
<!--<li>
<a href="finance/Currency.aspx" ><i class="fa fa-inr"></i> Currency</a></li>
<li>
<a href="finance/Currency-rate.aspx" ><i class="fa fa-dollar"></i> Currency Conversion</a></li>-->
<li>
<a href="finance/AdminWork.aspx" ><i class="fa fa-unlock-alt"></i> Lock Entries</a></li>
<li>
<a href="finance/ClosingStock.aspx" ><i class="fa fa-lock"></i> Closing Stock</a></li>
<!--<li>
<a href="finance/securityf.aspx" ><i class="fa fa-server"></i> Server Utility</a></li>-->
</ul>
</li>
<li class="divde">|</li>
<li class="menu-list "><a href="finance/srvtax.aspx" ><i class="fa fa-wrench"></i> <span>Base Setting</span> <i class="fa fa-angle-down pull-right"></i></a>
<ul class="sub-menu-list">
<!--<li >
<a href="finance/srvtax.aspx" ><i class="fa fa-money"></i> Service Tax / Charge</a></li>
<li >
<a href="finance/roe.aspx" ><i class="fa fa-male"></i> ROE</a></li>
<li >
<a href="finance/agentdetail.aspx" ><i class="fa fa-male"></i> New Agent / Vendor</a></li>
<li >
<a href="finance/Tds_basedetails.aspx" ><i class="fa fa-info-circle"></i> TDS Base Details</a></li>
<li >
<a href="finance/Section_tds.aspx" ><i class="fa fa-user"></i> Section Master</a></li>-->
<li >
<a href="finance/invoicedetail.aspx" ><i class="fa fa-cog"></i> Invoice Setting</a></li>
<li >
<a href="finance/vch_no.aspx" ><i class="fa fa-cogs"></i> Voucher Setting</a></li>
<li >
<a href="finance/Cost_center.aspx" ><i class="fa fa-money"></i> Cost Center</a></li>
<li>
<a href="finance/newUser.aspx" ><i class="fa fa-user"></i> User List</a></li>
<li>
<a href="finance/ClientUpdate.aspx" ><i class="fa fa-building-o"></i> Company Profile</a></li>
<li>
<a href="serveruti.aspx" ><i class="fa fa-television"></i> Server Utility</a></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><a href="stock/PriceType.aspx"><i class="fa fa-rupee"></i>Price Type</a></li>
<li><a href="stock/EnterItem.aspx"><i class="fa fa-tags"></i>Department & Brand</a></li>
<li><a href="stock/rowmat.aspx"><i class="fa fa-tags"></i>Item Master</a></li>
<li><a href="finance/itempurchase.aspx"><i class="fa fa-shopping-cart"></i>Item Purchase</a></li>
<li><a href="finance/batchsale.aspx"><i class="fa fa-shopping-cart"></i>Item Sale </a>
</li>
<li><a href="finance/itempret.aspx"><i class="fa fa-shopping-cart"></i>Debit Note</a>
</li>
<li><a href="finance/batchsret.aspx"><i class="fa fa-shopping-cart"></i>Credit Note
</a></li>
<!--<li><a href="finance/itemsale.aspx" ><i class="fa fa-credit-card"></i> Sale(Others) </a>
</li>-->
<!--<li><a href="finance/itemsret.aspx" ><i class="fa fa-credit-card"></i> Debit Note(Others) </a>
</li>
-->
<li><a href="stock/batchledger.aspx"><i class="fa fa-bar-chart"></i>Stock Ledger </a>
</li>
<!--<li><a href="stock/stockledger.aspx" ><i class="fa fa-file-text-o"></i> Weighted Average </a></li>
<li><a href="stock/FIFOstockledger.aspx" ><i class="fa fa-file-text-o"></i> FIFO Method</a></li>-->
<li><a href="stock/stockrpt.aspx"><i class="fa fa-line-chart"></i>Stock Report</a></li>
<li><a href="stock/GRNList.aspx"><i class="fa fa-area-chart"></i>Sale Report</a></li>
<li><a href="stock/unitmaster.aspx"><i class="fa fa-balance-scale"></i>Measurement Unit</a></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><a href="track_reports/salerept.aspx"><i class="fa fa-book"></i>Subd. Book</a></li>
<li><a href="track_reports/selledger.aspx"><i class="fa fa-file-text-o"></i>Ledger View</a></li>
<li><a href="track_reports/LedgwNarr.aspx"><i class="fa fa-print"></i>Ledger Print</a></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><a href="track_reports/BLSheet.aspx"><i class="fa fa-file-text-o"></i>B/L Sheet</a></li>
<li><a href="track_reports/PLSheet.aspx"><i class="fa fa-file-text-o"></i>P/L Statement</a></li>
<!--<li >
<a href="track_reports/ServiceTaxD.aspx" > <i class="fa fa-file-text-o"></i> Service Tax Report</a></li>
<li >
<a href="track_reports/DSR.aspx" > <i class="fa fa-file-text-o"></i> Daily Sale Report</a></li>-->
<!--<li>
<a href="track_reports/TDS_form.aspx"><i class="fa fa-file-text-o"></i> TDS Report</a></li>-->
<li><a href="track_reports/debt_age.aspx"><i class="fa fa-file-text-o"></i>Debtor Aging</a></li>
<li><a href="track_reports/cashflow.aspx"><i class="fa fa-money"></i>Cash Flow</a></li>
<!--<li>
<a href="track_reports/dvat.aspx" > <i class="fa fa-file-image-o"></i> Dvat</a></li>
<li>
<a href="track_reports/dvatsale.aspx" > <i class="fa fa-file-code-o"></i> Dvat Sale</a></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><a href="GST/GSTR1.aspx"><i class="fa fa-file-text-o"></i>GSTR-1</a></li>
<li><a href="GST/GSTR2.aspx"><i class="fa fa-file-text-o"></i>GSTR-2</a></li>
<li><a href="GST/FormGstr_3.aspx"><i class="fa fa-file-text-o"></i>GSTR-3</a></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><a href="finance/gen_purchase.aspx"><i class="fa fa-file-text-o"></i>General Purchase</a></li>
<li><a href="finance/gen_Sale.aspx"><i class="fa fa-file-text-o"></i>General Sale</a></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><a href="finance/ExcelDistRel.aspx"><i class="fa fa-paypal"></i>General Ledger</a></li>
<li><a href="finance/BankStatementUpload.aspx"><i class="fa fa-paypal"></i>Transaction</a></li>
<!--<li >
<a href="ExcelUploadrent.aspx" ><i class="fa fa-paypal"></i> rent</a></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.
Upvotes: 2
Views: 4584
Answers (2)
Gratus D.
Reputation: 877
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?
Upvotes: 2
Svela
Reputation: 639
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');
}
});
Upvotes: 3
Related Questions
- Add class for interior iframe html elements using Jquery
- Adding HTML to iFrame using jQuery and finding class
- Append class name to an iframe id that is included under a div class
- How to Select iFrames, Based on SRC, and Add a Class
- if div with specific class has an iframe add another class to the div
- Changing class based on iframe src
- jQuery how to add class to the next iframe?
- Javascript - apply a class to iframe with two different type of sources
- Make jQuery on page add CSS class to div within iframe?
- Adding a class to an element in an iframe using jQuery