I am making a website using HTML and I wanted to put one navigation bar on every page so I created a separate HTML for navigation but I don't know how to put it on every page. this is a small part of my navigation HTML code what do I have to do to put it on every page. and I am not meant to use PHP.
<body>
<div id="nav" class="menu">
<ul>
<li class="active"><i class="fa fa-home" aria-hidden="true"></i>Home </li>
<li> <i class="fa fa-user" aria-hidden="true"></i>Profile
<div class="sub-menu-1">
<ul>
<li>Daniel</li>
<li>Robel</li>
<li>Yohanes</li>
</ul>
</div>
</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Interest
<div class="sub-menu-1">
<ul>
<li>Daniel</li>
<li>Robel</li>
<li>Yohanes</li>
</ul>
</div>
I think you should use iframe (tag of HTML)
which shows one HTML page's O/P on other else change only 2nd iframe's O/P
Take only navigation bar in first iframe and all other HTML pages in 2nd iframe
Related
I want the content of a page to change when a link in the sidebar is being clicked and also the url should change without the sidebar reloading.
I have been able to achieve changing the main content of the page without reloading the sidebar but I also need to change the url and make it specific to what sidebar content is being clicked.
How I change the content
HTML - When you click Welcome or Creating account it calls the changeContent() function
<div class=" sidebar-item sidebar-menu">
<ul>
<li class="header-menu">
<span>Get Started</span>
</li>
<li>
<a onclick="changeContent('/docs')"> <span id="welcome-btn" class="menu-text">Welcome</span> </a>
</li>
<li class="sidebar-dropdown">
<a> <span class="menu-text">Setting up</span>
</a>
<div class="sidebar-submenu">
<ul>
<li> <a id="creating-account" onclick="changeContent('/docs/settingUp')">
Creating account</a> </li>
<li> Starting transactions </li>
<li> Resolving transactions </li>
<li> Refund </li>
</ul>
</div>
</li>
</div>
<!-- page-content -->
<div class="main--c">
<%- include ../partials/docs/welcomeDocs.ejs %>
</div>
JAVASCRIPT
function changeContent(url) {
$('.main--c').load(url);
}
My express config
router.get('/docs', (req: Request, res: Response) => {
res.render('pages/docs');
})
router.get('/docs/settingUp', (req: Request, res: Response) => {
res.render('partials/docs/settingUp');
})
This works, it changes the content without reloading the whole page but when you click on Create account I want to also change the url. So that whenever someone enters the url in the browser, It should load the create account page.
I tried add href="docs/settingUp" to the anchor tag but instead it loads only the partial page without the navbar and other styling
there is my html code for switch user to some pages in my php website
<div class="nav">
<ul onChange="showUser(this.value)">
<li class="active">
<div class="fix">
<span class="ico"><img src="image/ico7.png"></span>
<span class="value">manager</span>
</div>
<ul>
<li>chenge pass </li>
<li>search</li>
<li>exit</li>
</ul>
</li>
<li class="active">
<div class="fix">
<span class="ico"><img src="image/ico3.png"></span>
<span class="value">show user</span>
</div>
</li>
</ul>
</div>
it work good but i want to learn how can I transform between pages with ajax code, by click on a list item codes calling from page b and show in page a. so it will be faster than html code
how can i do it?
You can use .load function of jquery to load a page in a div like this
function LoadPage(url){
$('#yourMainDiv').load(url, function (response, status, xhr) {
//you can put you logic here
});
}
Here url will be url of page which you want to load in the div.
You will call it like
LoadPage('chengePass.php');
Or you can do like say in first answer but add href="#" onclick="LoadPage('chengePass.php');return false;"
link
or
<li onclick="LoadPage('chengePass.php');return false;">link</li>
I have these links
<li class=" ">Who are we </li>
<li class=" ">How it Works </li>
<li class=" ">What to expect</li>
My home page url is abcd.com
Home page have some data according to # tag. The # show a scroll down only for home page. when i click on any link then url change in abcd.com/#who-are-we and scroller point that section on home page,
But i want one thing.
When i will go on any other page as like products page or contact us page then the click action of these links go on about us page. Will you please tell me how can i set a conndition for url in php
You should look at the difference between named Anchors and links to other pages.
You can combine the page AND the named anchor like this:
go to contact page to anchor ABC
Here an example:
named-anchors: first 3 <a href>'s point to a location in this document
links: other 2 <a href>'s point to other pages...
That should do the trick.
<ul>
<li>About us:
<ul>
<li class=" ">Who are we </li>
<li class=" ">How it Works </li>
<li class=" ">What to expect</li>
</ul>
</li>
<li>Contact Page</li>
<li>Products Page</li>
</ul>
<a name="who-are-we">
<h2>Who are we</h2>
<p>Blah<br>blah<br>blaah<br>...</p>
<a name="how-it-works">
<h2>how-it-works</h2>
<p>Blah<br>blah<br>blaah<br>...</p>
<a name="what-to-expect">
<h2>what-to-expect</h2>
<p>Blah<br>blah<br>blaah<br>...</p>
I have simple Bootstrap 3 toggle navigation :
<ul class="nav navmenu-nav clearfix" >
<li class="navmenu-brand dropdown clearfix">
<i class="fa fa-home"></i><i class="title"> Menu item 1 </i><span class="fa fa-chevron-left"></span>
<ul class="dropdown-menu" role="menu">
<li class="clearfix">
test 1
</li>
<li class="clearfix">
test2
</li>
</ul>
</li>
<li class="navmenu-brand dropdown clearfix">
<i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span>
<ul class="dropdown-menu" role="menu">
<li class="clearfix">
Test 3
</li>
<li class="clearfix">
Test 4
</li>
</ul>
</li>
</ul>
I need when click on Test 1 and go to that page,to that part of menu be open on that page.Etc, if I click on test 3,url take me on test 3 page ,to have open second part of menu...
I try with similar problems, but no result,when go to page,menu is collapsed.
Bootply Link
I don't have much time but I am going to suggest a procedure for you. so I suggest you save the variable with Jquery using cookies:
you might need to call this: <script src="/path/to/jquery.cookie.js"></script> and on github plugin link is right here: jquery cookie
Now give an id to all of your dropdowns link
<i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span>
add an event listener to get the id of the dropdown link being click:
just like it is done here: get id of item clicked
store the value in a variable known as myVariable
$.cookie('cookieName', 'myVariable');
you can set expiry date
$.cookie('cookieName', 'myVariable', { expires: 1 });//expires after a day
in the other page, you read the cookie and store it in new variable:
newVariable = $.cookie('cookieName');
use that variable for your dropdown to be enabled
$(newVariable).dropdown('toggle');
Other things you might want to check is: send variables -cookies method in javascript, Open a dropdown automatically, store id of a link
I have cloned this template :
http://ironsummitmedia.github.io/startbootstrap-grayscale/
When you scroll-down, notice that the background-color of the header-link(About, Download, contact) on top will change to gray color (depending upon the section where you have scrolled).
I have made some small changes to the header wherien I am including font-awesome icons. The color effect has however stopped working.
<ul class="nav navbar-nav nav-advance-options hide-this-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#flax">
<i class="fa fa-leaf"></i>
</a>
</li>
<li>
<a class="page-scroll" href="#moist">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a class="page-scroll" href="#designs">
<i class="fa fa-paw"></i>
</a>
</li>
</ul>
http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav
I can't tell exactly where your javascript has gone wrong by the assets you've provided, but the issue is that on the font awesome icon version of the site (http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav), the active class is not being added to the menu li elements upon scroll, whereas it is being added to the li elements on the demo site (http://ironsummitmedia.github.io/startbootstrap-grayscale/).
solved the issue by removing the following lines from second ul:
<li class="hidden">
</li>
I don't know why this solves the issue yet. If someone understands, kindly explain