I have a sidebar menu in HTML:
assets/partials/menu.html
<div class="sidebar" id="sidebar">
<div class="sidebar-inner slimscroll">
<div id="sidebar-menu" class="sidebar-menu">
<ul>
<li class="active">
<i class="la la-dashboard"></i> <span>Dashboard</span>
</li>
<li class="submenu">
<i class="la la-phone"></i> <span> Users</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>Manage Users</li>
</ul>
</li>
<li>
<i class="la la-rocket"></i> <span>Projects</span>
</li>
<li>
<i class="la la-tasks"></i> <span>Tasks</span>
</li>
<li class="submenu">
<i class="la la-phone"></i> <span> Health Conscious</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>Manage Programs</li>
<li>Manage Quix / Tests</li>
<li>Broadcast Message</li>
<li>Google Play Settings</li>
<li>iTunes Settings</li>
</ul>
</li>
<li>
<i class="la la-book"></i> <span>Contacts</span>
</li>
<li>
<i class="la la-tachometer"></i> <span>Employee Dashboard</span>
</li>
<li class="submenu">
<i class="la la-user"></i> <span> Employees</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>All Employees</li>
<li>On Board New Employee</li>
<li>Employee Reports</li>
</ul>
</li>
<li>
<i class="la la-ticket"></i> <span>Tickets</span>
</li>
<li>
<i class="la la-calendar"></i> <span>Events</span>
</li>
<li>
<i class="la la-at"></i> <span>Email</span>
</li>
<li>
<i class="la la-comments"></i> <span>Chat</span> <span class="badge badge-pill bg-primary float-right">5</span>
</li>
<li>
<i class="la la-object-ungroup"></i> <span>Assets</span>
</li>
<li>
<i class="la la-question"></i> <span>Knowledgebase</span>
</li>
<li>
<i class="la la-file-pdf-o"></i> <span>Policies</span>
</li>
<li>
<i class="la la-bell"></i> <span>Activities</span>
</li>
<li>
<i class="la la-user-plus"></i> <span>Users</span>
</li>
<li class="submenu">
<i class="la la-pie-chart"></i> <span> Reports </span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li> User Report </li>
<li> Invoice Report </li>
</ul>
</li>
<li>
<i class="la la-cog"></i> <span>Settings</span>
</li>
<li class="submenu">
<i class="la la-share-alt"></i> <span>Multi Level</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li class="submenu">
<span>Level 1</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li><span>Level 2</span></li>
<li class="submenu">
<span> Level 2</span> <span class="menu-arrow"></span>
<ul style="display: none;">
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>
<span>Level 2</span>
</li>
</ul>
</li>
<li>
<span>Level 1</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
What I would like to do is, simply insert this html from my index page.
I tried following the tutorial on components, and all I got was a blank space where the menu was supposed to go.
Can anyone show me how to insert HTML from an external file, using knockout or not.
Thank you.
John
Related
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>
I have a html code below, the jsfiddle link is https://jsfiddle.net/Debra321/b0d4Lupn/
<html>
<body>
<div class="side-collapse in" id="site-navigation-navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/" target="_self">
Home
</a>
</li>
<li class="dropdown dropdown-hover open">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Store <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a class="itemlistChange" data-url="/store/products" target="_self">
All Products
</a>
</li>
<li class="">
<a class="itemlistChange" data-url="/store/cart" target="_self">
My Cart
</a>
</li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/promotions">Promotions</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/patches">Patches</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/skincare">Skin Care</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/maintenancekits">Maintenance Kits</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/salestools">Sales Tools</a></li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Commissions <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/commissions" target="_self">
Commissions
</a>
</li>
<li class="">
<a href="/rank" target="_self">
Rank Advancement
</a>
</li>
<li class="">
<a href="/volumes" target="_self">
Volumes
</a>
</li>
<li class="">
<a href="/commissions/myearnings" target="_self">
Earnings
</a>
</li>
<li class="">
<a href="/commissions-earnings" target="_self">
Commissions Earnings
</a>
</li>
<li class="">
<a href="/commissions/incomestatement" target="_self">
Income Statement
</a>
</li>
<li class="">
<a href="/commissions/commissionspaycard" target="_self">
Commissions Pay Card
</a>
</li>
<li class="">
<a href="/volume-maturity-calendar" target="_self">
Volume Maturity Calendar
</a>
</li>
<li class="">
<a href="/carry-over-volume-calendar" target="_self">
Carry Over Volume Calendar
</a>
</li>
<li class="">
<a href="/commissions/matchingbonus" target="_self">
Bonus Qualification
</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Organization <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/app/enrollmentredirect" target="_blank">
<i class="fa-plus"></i>
Enroll new...
</a>
</li>
<li class="">
<a href="/prepopulatedcartlist" target="_self">
Pre Populated Cart Builder
</a>
</li>
<li class="">
<a href="/personally-enrolled-team" target="_self">
Personally Enrolled Team
</a>
</li>
<li class="">
<a href="/upcoming-promotions" target="_self">
Upcoming Rank Promotions
</a>
</li>
<li class="">
<a href="/new-distributors" target="_self">
New Distributors List
</a>
</li>
<li class="">
<a href="/recent-activity" target="_self">
Recent Activity List
</a>
</li>
<li class="">
<a href="/retail-customers" target="_self">
Retail Customers
</a>
</li>
<li class="">
<a href="/preferred-customers" target="_self">
Preferred Customers
</a>
</li>
<li class="">
<a href="/reps" target="_self">
Reps
</a>
</li>
<li class="">
<a href="/binary-tree-viewer" target="_self">
Binary Tree Viewer
</a>
</li>
<li class="">
<a href="/organization/enrollertreeviewer" target="_self">
Enroller Tree Viewer
</a>
</li>
</ul>
</li>
<li>
<a href="/events" target="_self">
Events
</a>
</li>
<li>
<a href="/AutoOrder" target="_self">
Monthly Subscription Orders
</a>
</li>
<li>
<a href="/orders" target="_self">
Orders
</a>
</li>
<li>
<a href="/resources/resourcelist" target="_self">
Resources
</a>
</li>
<li class="visible-xs">
<a href="/logout" target="_self">
Sign out
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
I expect to select Organization>Binary Tree Viewer, but cannot do that successfully. Since Organization is the direct 3rd child of the ul, I try to retrieve it by
document.querySelector('#site-navigation-navbar-collapse ul > li:nth-child(3)')
But what I got is always "Promotions" in "Store". How to select the Binary Tree Viewer by CSS selectors? Any suggestions are appreciated.
<div class="navbar-fixed">
<nav class="nav-wrapper indigo ">
<img src="images/logo.png" class="responsive-img logo ">
<a href="#" class="sidenav-trigger" data-target="side-link">
<i class="material-icons white-text">menu</i>
</a>
<ul class="navigation hide-on-med-and-down right">
<li>
<strong class="white-text text-lighten-1 active">Home</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Facts</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Symtoms</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Statistics</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Precautions</strong>
</li>
<li>
<strong class="white-text text-lighten-1 active">Myths</strong>
</li>
</ul>
</div>
</nav>
<ul class="sidenav indigo" id="side-link">
<li>
Home
</li>
<li>
Symtoms
</li>
<li>
Statistics
</li>
<li>
Precautions
</li>
<li>
Facts
</li>
<li>
myths
</li>
</ul>
</header>
$(document).ready(function() {
$('.sidenav').sidenav();
});
How can I add another level to this menu structure from the HTML at the bottom of the page?
Current
Test
--->a
--->b
what I'm trying to do
Test
--->a
--->1
--->2
--->b
--->1
--->2
html
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<i class="glyphicon glyphicon-circle"></i> Facebook
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
<ul>
<li class="nav-header">
<a data-target="#menu5" data-toggle="collapse" href="#">
<h3>test</h3></a>
<ul class="list-unstyled collapse" id="menu5">
<li>
<a data-target="#submenu" data-toggle="collapse" href="#"><i class="glyphicon glyphicon-circle"></i> Facebook</a>
<ul class="list-unstyled collapse" id="submenu">
<li> 1 </li>
<li> 2</li>
</ul>
</li>
<li>
<i class="glyphicon glyphicon-circle"></i> Twitter
</li>
</ul>
</li>
</ul>
I believe you just need to create another collapse element with a unique Id. using the <a> element as your toggle.
<div class="comments_container clearfix">
<hr />
<ul class="comment_struct">
<li class="commenter_pic">
<img src="images/im.jpg" alt="picture"/>
<span class="button blue square likes">9 Likes</span>
</li>
<li class="comment_data">
<ul class="post_info_options">
<li class="commenter_name">Abc</li>
<li class="comment"><p>hello how are you doing</p></li>
<li class="time">
<span class="comment_time">12 June 2012<>
<span class="time_elapsed">7 hours ago</span>
</li>
<li class="options">
<span>Once More</span>
<span>Comment</span>
<span>Like</span>
</li>
<li>
</li>
</ul>
</li>
<li class="delete_comment"><img src="images/Cancel.png" alt="delete_post"/></li>
</ul>
<br/>
<ul class="comment_struct">
<li class="commenter_pic">
<img src="images/im.jpg" alt="picture"/>
<span class="button blue square likes">9 Likes</span>
</li>
<li class="comment_data">
<ul class="post_info_options">
<li class="commenter_name">Abc</li>
<li class="comment"><p>hello how are you doing</p></li>
<li class="time">
<span class="comment_time">12 June 2012<>
<span class="time_elapsed">7 hours ago</span>
</li>
<li class="options">
<span>Once More</span>
<span>Comment</span>
<span>Like</span>
</li>
<li>
</li>
</ul>
</li>
<li class="delete_comment"><img src="images/Cancel.png" alt="delete_post"/></li>
</ul>
<br/>
<ul class="comment_struct">
<li class="commenter_pic">
<img src="images/im.jpg" alt="picture"/>
<span class="button blue square likes">9 Likes</span>
</li>
<li class="comment_data">
<ul class="post_info_options">
<li class="commenter_name">Abc</li>
<li class="comment"><p>hello how are you doing</p></li>
<li class="time">
<span class="comment_time">12 June 2012<>
<span class="time_elapsed">7 hours ago</span>
</li>
<li class="options">
<span>Once More</span>
<span>Comment</span>
<span>Like</span>
</li>
<li>
</li>
</ul>
</li>
<li class="delete_comment"><img src="images/Cancel.png" alt="delete_post"/></li>
</ul>
<br/>
I have html structure as above .. so starting from $('.comments_container') how can i traverse to the last span in the DOM with class 'comment_time'. Help would be appreciated.
traversing using children() is possible. But i want to know is there any simpler way
You can use :last selector:
var mySpan = $('.comments_container span.comment_time:last');