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.
Related
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 })%>
This question already has answers here:
Moved HTML into a different folder, now it's not linking CSS correctly
(2 answers)
Closed 5 years ago.
I have developed a website with 13 webpages. The majority of them have the same header, footer, right aside, ... I know that I can place a HTML or JSP file that contains the code for the header or footer and include it in all my pages so I do not have to write the same code in all my wepages. This is an example of what I will like to place in file called header.html which I would include in all my webpages:
<header>
<hr id="barraCabecera11">
<hr id="barraCabecera12">
<h1 id="nombreBarberia"> The Notorius Barbershop </h1>
<nav>
<ul>
<li id="indexN">Inicio</li>
<li id="seccion1N" onmouseover="ver(1)" onmouseout="ocultar(1)">
<p id="conocenosN">Conocenos</p>
<div id="subseccion1">
<p>Historia</p>
<p>Filosofía</p>
<p>Barberos/Peluqueros</p>
</div>
</li>
<li id="seccion2N" onmouseover="ver(2)" onmouseout="ocultar(2)">
<p id="eventosN">Eventos</p>
<div id="subseccion2">
<p>Reservar</p>
<p>Contratar</p>
</div>
</li>
<li id="hairstyleN">Hairstyle</li>
<li id="notbarN">The NotBar</li>
<li id="cursosN">Cursos</li>
<li id="contactanosN">Contáctanos</li>
</ul>
<div class="borrar"></div>
</nav>
</header>
The problem is that I have different relative links in the nav of this header, so I cannot include a file with the same content in all my webpages. Is there a standard way of changing these relative links depending on which webpage the header is included?
Please, let me know if I am not explaining myself well.
I'm not sure if this is standard but I would change the href of the elements on each page by altering it in javascript after the page is loaded.
Edit: An example would be,given the following anchor tag:
<a href="google.com" id="anchorTest">
You would do:
document.getElementById('anchorTest').href = 'youtube.com';
I have a page with a horizontal navigation on top and above that is a header img. I'm using fullPage.js as my layout and by default navbar is always on top. I want my header img to appear only on the first section and be hidden everywhere else. I was thinking about a solution in jQuery which would be if I'm on every section but first header margin-top would be [header_img_height] and when I get to section one it would return to margin-top:0px.
My header markup right now:
<header>
<div id="header_banner">
</div>
<ul id="nav_cont">
<li data-menuanchor="section1">
<a id="home_hover" href="#section1">Home</a>
</li>
<li data-menuanchor="section2">
<a id="about_hover" href="#section2/1">About</a>
</li>
<li data-menuanchor="section3">
<a id="gallery_hover" href="#section3">Gallery</a>
</li>
<li data-menuanchor="section4">
<a id="literature_hover" href="#section4">Literature</a>
</li>
<li data-menuanchor="section5">
<a id="contact_hover" href="#section5">Contact</a>
</li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="Home">
<div class="container"></div>
</div>
.
.
.
other sections
This is what I want to end up with:
I would recommend you to do it with CSS directly.
Check out this video tutorial in which you can see how to use the class added to the body element to fire your own CSS changes.
Otherwise, you can also do it using callbacks such as afterLoad or onLeave. You have an example of it available in the fullpage.js files.
You even have an example of how to use them in this Apple demo also available in the files to download.
Would this help? On the first section it adds the class fixed-header to your nav, and on the other sections it will disappear
$(function(){
$(window).scroll(function(){
var section1 = $('#home').offset().top;
var section2 = $('#section2').offset().top;
if($(this).scrollTop()>=section1){
$('#nav_cont').addClass('fixed-header');
}
if($(this).scrollTop()>=section2){
$('#nav_cont').removeClass('fixed-header');
}
});
});
So, my question deals with why my drop down is not working for my navigation bar. It works when all the HTML is in one document but not when I'm using ng-include. I'm not using Bootstrap but MetroUI-CSS.
index.html
<div id="container">
<div id="header" ng-include="'app/templates/header.html'"></div><!-- End header container -->
</div>
partial/header.html
<div id="site_nav_bar">
<nav class="navigation-bar dark fixed-top shadow">
<nav class="navigation-bar-content">
<item class="element"><i class="icon-keyboard" style="padding-right: 1em"></i> Home</item>
<item class="element-divider"></item>
<item class="element">About</item>
<item class="element">Contact</item>
<ul class="element-menu">
<li>
<a class="dropdown-toggle" href="#">Blogs</a>
<ul class="dropdown-menu" data-role="dropdown">
<li>
Programming Blogs
...
</li>
So basically, when I click on Blogs it does not drop down the menu.
Bootstrap evaluates the DOM only when it's ready (ready event), therefore if your dropdown exists at this point, it would work, otherwise if it will be added to the DOM later on (using ng-include for instance) it won't.
Behind the scenes ng-include manipulates the DOM for you and performs an AJAX request to retrieve the HTML you want to include. bootstrap is not aware of that and won't wait for the DOM to be updated.
to avoid that use bootstrap-ui
I have made a Spry 4-tabbed panel from Dreamweaver and customised it to use as a portfolio site.
I want to run 'Flickrshow' as the 3rd tabbed panel content. (Flickrshow is a javascript slideshow that links to a Flickr photo sharing account).
My problem is that the Flickrshow slideshow doesn't display in the 3rd tabbed panel content.
However it does display in the 1st tabbed panel content and it also does display correctly when the code is run independently. I also have another Javascript 'simplegallery' running in the 2nd panel content, which works fine. Is this causing a conflict?
Any suggestions why this won't display?
Thanks!
<script src="http://www.flickrshow.co.uk/static/scripts/flickrshow-7.2.min.js"></script>
<script> var cesc = new flickrshow('cesc', {
autoplay:true,
interval:4200,
hide_buttons: false,
license:null,
tags:'website',
user:'52147781#N05'});</script>
<div id="nav1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">About</li>
<li class="TabbedPanelsTab" tabindex="0">Graphics</li>
<li class="TabbedPanelsTab" tabindex="0">Photos</li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"></div>
<div class="TabbedPanelsContent"><div id="simplegallery1"></div></div>
<div class="TabbedPanelsContent"><div id="cesc"><p>Please enable Javascript to view this slideshow</p></div></div>
<div class="TabbedPanelsContent"><div id="contact"></div>
</div>
</div>