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
Related
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
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>
All,
I am making a login page. Upon successful login, the username of the logged in user should display at the top of the screen. Upon clicking the username, a dropdown list should appear.
So I have an HTML script that will creates an un-ordered list. I want to make a call to an external javaScript function within the HTML. I want this function to edit the title of the un-ordered list with custom input handled in the javascript function, and make the list visible, as it is not displayed by default. How do I edit this script so I can call the function to create a custom title for my un-ordered list?
Javascript
function successfulLogin() {
$("#UserDropdown").show();
document.getElementById("loginMenu").innerHTML = "my stuff";
}
HTML
<script src="~\Scripts\successfulLogin.js" style="display: none"></script>
<div id="dropboxbackground">
<div>
<ul id="dropdown">
<li>
<a id="loginMenu" href="#">title</a>
<ul>
<li>Account Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
<header>
<div id="headerBar"></div>
</header>
Create a label inside the anchor tag and upon clicking the username call the successfulLogin javascript method using href='javascript:successfulLogin()' or depending upon the type of control you have used for displaying the username.
<script src="~\Scripts\successfulLogin.js" style="display: none"></script>
<div>
<ul id="dropdown">
<li>
<a id="loginMenu" href='#'><label id="lbl"> title
</label></a>
<ul>
<li>Account Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
And Write your javascript(jquery) as : This would change the title of the ordered list to "somestuff"
function successfulLogin() {
$("#UserDropdown").show();
$('#lbl').text("somestuff");
}
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help