I have used bootstrap nav nav-pills nav-justified
and i have 7 of these
<li>Form</li>
I have been able to click on form which will re-direct to the form page, but I can't seem to return to my home page without clicking back on the browser. I want to be able to just click on the Home button which i've included as part of my 7 <li>s I mentioned earlier. Also i would like to be able jump onto each page from the navbar tab.
<div class="header">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li><a href "#">Home</a></li>
<li><a href "#">About</a></li>
<li><a href "#">JavaScript</a></li>
<li><a href "#">JQuery</a></li>
<li>AngularJS</li>
<li><a href "#">API</a></li>
<li>Form</li>
<li><a href "#">Contact</a></li>
</ul>
</div>
</div>
So from that above, when i click on form, im on the form page, but i cannot go back to the homepage(index.html) unless i click back on the browser, i wanna be able to link to all the lists by clicking each other.
Consider using Ajax to load different pages dynamically (with association with jQuery it said to be simpler to use) for the desired behavior or put everything on the single page and show content only when user clicks the link by JS and CSS.
As soon as you use Bootstrap elements you probably have jQuery already included in your project.
Useful links:
jQuery Ajax
Hiding elements with CSS
Check this page jQuery.get there is a very demonstrative example
$.get("demo_test.asp", function(data, status)
{
alert("Data: " + data + "\nStatus: " + status);
});
where data - data received from the server. It should be your html code to replace the content.
To insert data use:
$.('#Content').html(data); //id="Content" is from the comment
if you do this in a local host and you created these files as i find out when you click on the home you get 404 page the only thing that you have to do is to link your homepage file to the home button if i'm wrong comment me and explain your problem more and then i will help you.
Related
I am having trouble getting my mailto link working on this landing page. I have been googling and still have not found an answer why a simple mailto link is not working using Bootstrap.
I am trying to get the "Contact us" link in the top right menu to open a mail window and the "Refer now" link needs to go to an anchor tag lower in the page, code below. Webpage can be viewed at: website code
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active">BENEFITS</li>
<li class="active">REQUIREMENTS</li>
<li class="active">CONTACT US</li>
<li><input type="submit" class='contact-button' value="REFER NOW" onclick="window.location.href='mailto:surveyorhr#carf.org'"></li>
<!-- For external page link -->
<!-- <li>External</li> -->
</ul>
</div>
Any help would be appreciated.
It seems strange to use an input type submit button for a mail link – those certainly are not made for mail links – apart from that any submit button would only work in the context of a form, i.e. inside a form element.
I would recommend to use a regular link and style it as a button using CSS.
(BTW: This has nothing to do with Bootstrap)
Currently you have some js running in main.js that is manipulating click events and preventing default browser behavior. If you remove the class "main-nav" from the div that contains your mailto link it begins to function again. Based on that I would revaluate your use cases in that js file.
the links on the homepage navbar is an easy scroll when click on it it moves the page the the section with id, but i need the user when they are on any other page not the homepage and click on any links on the navbar, it return back to the homepage and move to the section.
This code doesn't work for me.
How we Work
Try to remove the / before your URL
How we Work
This / is going to the root of your folder. I guess your using relative path, so this should fix the issue.
In your webpage you have this code within "tracking.html":
<h2>About Us</h2>
<ul class="discover triangle hover row">
<li class="col-xs-12">About EvisaXpress</li>
<li class="col-xs-12">Our Team</li>
<li class="col-xs-12">How We Work</li>
</ul>
This is linking to the current page, i.e. "tracking.html". Write instead
How We Work
and you should be fine.
The difference is that in your page this is called:
http://evisax.com/tracking.html#how-we-work
whereas this is what you want to call:
http://evisax.com/index.html#how-we-work
Removing scrolling.js from the Tracking.html file and everything works fine.
I'm currently trying to make a website in ASP.NET Core MVC. In my layout page, I'm making a navigation bar to access all of the actions that can be reached through my controllers. I am however unable to create useful links.
<ul>
<li>Home</li>
<li>Index</li>
</ul>
My problem with this is that I still need the controller before the links and if I put the controller in front of the action like this
<ul>
<li>Home</li>
<li>What We've Done</li>
</ul>
When I click on one link and then the other, the link will end up being "myurl/home/home/page".
How can I create the link to only link to the exact page I want to?
You should use the anchor tag helper to build the markup for the link
<a asp-action="index" asp-controller="home">Home</a>
This will generate the correct relative path to the index action as the href property value of the anchor tag.
I'm developing an application using angular JS . I have a menu and when I click on one of the options it becomes active (changes color ) and I include a different html page. for example :
<ul class="nav navbar-nav side-nav">
<li >
</i> Home
</li>
<li >
</i> Profil
</li>
</ul>
........
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div ng-include="subPage.url"></div>
</div>
</div>
that works fine . but when I refresh the page I always get the welcome page with no page included . I tried to initialize the subPage.url :
<div ng-init="subPage.url = 'home.html'">
but this way when I refresh I always get the home.html included .
How to do so that when I refresh I keep having the same page included and refresh it ???
When you refresh the page, the application starts from scratch. All you've stored in memory (i.e. the subPage url) is lost.
You should use a router (ngRoute or ui-router). Clicking on a menu option should change the URL in addition to changing the view. That way, refreshing the page would start the application again, but the router would still see that the URL is the one of a sub page, and would automatically route to that sub page.
You should use a $routeProvider and set your default route ('/') to home.html.
Look here for more info: https://thinkster.io/egghead/routeprovider-api
I have a list of menus as below, every menu link is an anchor. I am experiencing a very strange behaviour from anchor tag i.e., when I click on any menu it opens the requested page correctly. But on second click system duplicates the directory hierarchy and looks for the requested page where hierarchy does not exist. For example there is a page on path "Pages/Contact/test.aspx", 1st click opens the page. When user clicks 2nd time browser tries to open a page at path "Pages/Contact/Pages/Contact/test.aspx" resulting in exception "The resource cannot be found" error is thrown.
<div id="menu">
<ul class="menu">
<li><span>About Us</span>
<div>
<ul>
<li><a href="Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
The problem is because you are using relative paths to your pages.
It works the first time because (I assume) you are in the root directory. So clicking the link takes you to 'Pages/Contact/Phone.aspx'. When in phone.aspx, if you click the link again, it looks for this page: Pages/Contact/Pages/Contact/Phone.aspx.
You need to add a / to the beginning of your URL to make it relative to the root of the site:
<ul>
<li><a href="/Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="/Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
Or alternatively, because you're using ASP.Net, you can use the ResolveUrl() function to ensure all your links are relative to the root of the solution:
<ul>
<li><span>Phone</span></li>
<li><span>Email</span></li>
</ul>
I believe href="" is your problem here.
Try href="#" or href="javascript:;"