I have an ejs sidebar partial
<div class="col-3 flex-nowrap">
<nav id="sidebar">
<!-- Sidebar Header -->
<div class="sidebar-header text-center">
<h1 id="notification">Notification</h1>
</div>
<!-- Sidebar Links -->
<ul class="nav-list">
<li class="active">Edit Profile</li>
<li>Privacy & Security</li>
<li>Payment Setting</li>
<li>Transaction History</li>
<li>Trust & Verfication</li>
<li>My Education Blog</li>
<li>Promotions</li>
</ul>
<ul id="cancel"><a><strong>Cancel Account</strong></a></ul>
</nav>
and in my notifcation.ejs I include that partial this way
<%-include("./partials/sidebar.ejs")%>
Since I want to reuse my sidebar partial I want the header in that sidebar to be distinct on every page.
ex: in the notification.ejs page it is already set to have notification in that sidebar header. But in promotions.ejs I want that header to say promotions instead.
How do I specify in each link of the sidebar which sidebar header to use?
What you are trying to archive is to pass variables inside partial.
Here is a link to documentation, in Includes section you can find the info about this case.
For example your partial can look like
<!-- Sidebar Header -->
<div class="sidebar-header text-center">
<h1 id="notification"><%= title %></h1>
</div>
And when you are using your partial, you can define it with variable
<%-include("./partials/sidebar.ejs", { title: title })%>
Related
So i'm building a small website on gh-pages and i'm using a gh-pages markdown theme.
To implement a navigation bar i've slightly modified the "default.html" file to also feature a bar inside the header.
Now i'd like to link or navigate between pages while still keeping the theme, header and such. But when using
Another Page
it reloads an entire new blank page.
But when first visiting https://myPersonalPage.github.io/ it loads up just fine and it does load index.md properly.
So in short, I'd like to change the content of a gh-page without changing the header and I don't know how.
In the default.html file my links look like this:
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<h1 id="project_title">MyProjects</h1>
<div id="navbar">
<ul>
<li>HOME</li>
<li>PROJECTS</li>
<li>ABOUT ME</li>
</ul>
</div>
</header>
</div>
And in the default.html file the content-load looks like this:
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
{{ content }}
</section>
</div>
Alright, i figured it out. Instead of projects.md, i had to link on projects.html and everything works out fine.
I use KendoTabStrip and KendoGrid to create my page. There're several tabs in my TabStrip, each tab's content is a grid. I put each grids in a separate html file and use contentUrl to load them, like this
http://demos.telerik.com/kendo-ui/tabstrip/ajax
But it looks like if I bind angular controller in each files doesn't work. The code for tab content looks like this:
<div class="k-content" ng-controller="testCtrl">
<div class="data-grid" id="testGrid">
</div>
</div>
The controller seems doesn't been binded. Anyone can help?
Try this
<div ng-controller="MyCtrl">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">First tab</li>
<li>Second tab</li>
</ul>
<div style="padding: 1em">
This is the first tab
</div>
<div style="padding: 1em">
This is the second tab
</div>
</div>
</div>
Context: I have created a top-bar menu using Foundation 6 (following the docs), with it displayed horizontally on large screens, and as a responsive vertical menu on medium and down. There is one item with children which is displayed as a dropdown on large screens, and as a drilldown menu on medium screens and below.
I created the site using the Zurb 'Yeti Launch' app, so as far as I can tell, I have all js libraries included.
Issue: Nothing happens when either the dropdown parent or any of the child items are clicked. Any help getting to the bottom of this is much appreciated!
My markdown for the menu is as follows:
<div class="top-bar" id="main-menu">
<div class="row">
<div class="large-12 columns">
<div class="top-bar-left">
<ul class="menu vertical large-horizontal" data-responsive-menu="drilldown large-dropdown">
<li>Home</li>
<li>What's On</li>
<li>Listen Again</li>
<li>Community</li>
<li>
About
<ul class="menu vertical">
<li>Presenters</li>
<li>Volunteers</li>
<li>The Board</li>
</ul>
</li>
<li>Get Involved</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
Did you added the init code?
$(document).foundation();
The CodePen example with the same HTML as you provided worked.
http://codepen.io/shoaibik/pen/PNravB
Update:
It look likes you can called Foundation JS and jQuery second time in app.js file, Please remove once instance and confirm again.
Have been looking around for a solution/plugin that handles. navigation, menu highlighting and hash change (both on scroll and menu click) but can't really find one. I have this markup of sections for a one page site and i want to implement the bow mentioned in a nice way.
so basically
- change hash on scroll and menu click (menu also needs highlighting). Both on scroll and when clicked.
EDIT: exactly like this but i need the hash to change on scroll as well.
http://callmenick.com/2013/04/22/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation/
html
<nav id="main-nav">
<ul>
<li>
product
</li>
<li>
process
</li>
<li>
testimonials
</li>
<li>
contact
</li>
</ul>
</nav>
<section class="main-section" id="product">
</section>
<section class="main-section" id="process">
</section>
<section class="main-section" id="testimonials">
</section>
<section class="main-section" id="contact">
</section>
You can update your URI by calling history.pushState('/myPage#MyNewURI')
That won't reload the page, just change the URI.
I want bootstrap to show several elements inside tab header button, currently it breaks into multiple buttons...
Consider example jsFiddle:
<ul class="nav nav-tabs">
<li class="allmembers">
The first
tab
</li>
<li class="additional">
The second
tab
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
In example above it would show four tabs instead of two, but I need bootstrap to be able to render complex html, something like:
<ul class="nav nav-tabs">
<li class="all members">
<div>
Any type of content displayed inline here
The first
tab
</div>
</li>
<li class="additional">
<div>
Any type of content displayed inline here
The second
tab
</div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
How can
You can use all inline elements inside a tab header, you just need to wrap them inside an anchor, like this:
<a href="#additional" data-toggle="tab">
The second <br/>
Any type of content displayed inline here <br/>
<span>Span</span>
</a>
The reason is that bootstrap style for panel header is placed on anchor, if you need more complex structures you might need to change bootstrap and place the styles on li instead.
your demo: http://jsfiddle.net/zd1368yu/3/