Adding a navigation link to single page bootstrap website - javascript

I used a free template to create a small single paged bootstrap website now i need to add an addition navigation link(called events) to that website, but i cannot do it since the editing the html is not enough for complete change.
Therefore can you guys help me on how to add this extra navigational link.
The place I want to add the navigational link
the only place i could find related to these links index.html
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="menu active" href="#home" >Home</a></li>
<li><a class="menu" href="#about">about us</a></li>
<li><a class="menu" href="#service">our services </a></li>
<li><a class="menu" href="#events">Events</a></li>
<li><a class="menu" href="#team">our team</a></li>
<li><a class="menu" href="#contact"> contact us</a></li>
</ul>
</div>
</div>
apart from index.html files theres style.cs, smoothscrol.js, bootsrap.js,custom.js, mordernizer.js etc etc..
please help me to a dd a new link....

Its very easy to add a new link that scrolls to a section on the page, I would consider doing a html course because this is very basic stuff add this to your code
<li><a class="menu" href=" #YOURNEWID "> YOUR NEW LINK NAME </a></li>
So change were I've put "#YOURNEWID" to ID of the section of the page you want to scroll to for example
<div id="NEWSECTION">
<h1>This is the section I want to scroll to!</h1>
</div>
so the ID in this new section is NEWSECTION so now add NEWSECTION to where ive put #YOURNEWID

The reason why it scrolls below is that you have an id below say "#about". If you wish to give an external link to about you can give like
<li><a class="menu" href="https://www.google.co.in/">about us</a></li>
If you wish to give an internal link, Say for example to a page test.html.Create the page test.html and then do this
<li><a class="menu" href="test.html">about us</a></li>

Related

Set class active on click navigation link

I need help setting a link as active upon clicking on my html top nav bar.
The nav bar looks like this
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
Clients <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Add New Client</li></i></a></li>
</ul>
</li>
</ul>
</div>
So when i click Home it must highlight Home when i click on Clients it must highlight Clients. I really don't know how to achieve this so any help will be very much appreciated.
// when any a link click
$('a').click(function(){
// if already any element in active status remove it
$('a').removeClass('active');
// add active status to this one only
$(this).addClass('active');
})
.active{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
Clients <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Add New Client</li></i></a></li>
</ul>
</li>
</ul>
</div>
Setting via JS is pretty pointless, since as soon as it redirects and loads the new page, that setting will be forgotten. What you want to do is have PHP check your current route, and assign a class based on that. This can be done via the request()->is() check:
If navigating to myapp.com/home, use the following:
<li class="{{ request()->is('home') ? 'active': '' }}">
<a href="{{ route('home') }}">
Home
#if(request()->is('home'))
<span class="sr-only">(current)</span>
#endif
</a>
<li>
This demonstrates how to use via a ternary operator (best used for in-line statements) and the #if()#endif blade syntax. Just ensure your is() check is matching your route, so ->is("") for Route::get("/", ...);, etc. etc. and PHP will automatically assign the active class and (current) SR element.
Note; there is likely a way to handle this for named routes (like route('home')), but I haven't used named routes much, so I'm not positive on that. Also, might be best to assign the result of request()->is('home') to a variable to avoid repeating code.

<a href=""> links don't open when I click on it but works when I click "open in new tab"

I am editing a template and links don't respond to left clicks. If you right-click and choose 'Open in New Tab,' they work just fine. When you hover over them, you can see the URL in the status bar at the bottom of the browser.
I will only post the menu section of the index file since the webpage is too long. Please download the template from the following link to see it yourselfClick Here
I am new here so I don't clearly understand the rules of posting a question. let me know if you need other info and please help me out.
`
<nav class="navbar navbar-light">
<ul class="nav navbar-nav single-page-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home <!-- <span class="sr-only">(current)</span> --></a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Products</a>
</li> <!-- this link won't work -->
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>`.
<div class="sigma-content col-lg-6 col-md-6 photo text-center" >
<h2></h2>
VISIT OUR GALLERY
</div>
EDIT: I just learned about browser console and the error is
Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)
at bootstrap.min.js:7
at bootstrap.min.js:7
at bootstrap.min.js:7
How do I fix this.
A quick inspection of the live demo of the linked template shows, at the bottom of the source (the frame source, not the page source) this code
// The actual plugin
$('.single-page-nav').singlePageNav({
offset: $('.single-page-nav').outerHeight(),
filter: ':not(.external)',
updateHash: true,
beforeStart: function() {
console.log('begin scrolling');
},
onComplete: function() {
console.log('done scrolling');
}
});
which looks like it's using this library which states
Clicking on any links within the container will cause an animated scroll down to the element whose ID is identified by that link's "hash" (if it exists)
and then in the options
'filter' - By default, the plugin will be applied to all links within the container, use this to filter out certain links using jquery's built in filter method (e.g. ':not(.external)')
So, since the code on the live demo has filter: ':not(.external)', and I assume you have that on your page as well (and since your <ul> has the single-page-nav class) changing
<a class="nav-link" href="gallery.html">Products</a>
to
<a class="nav-link external" href="gallery.html">Products</a>
should fix your problem

Collapse div only on mobile - Bootstrap AngularJS

I have this code which I want to make it collapse when on mobile but it isn't working. I tried with visible-xs and hidden-xs as shown in the code but it's obviously not working.
What could I possible do to make this happen?
I want to show the <ul>...</ul> in Desktop only and make it collapsible in Mobile view and show only the button which would open after being clicked.
<div>
<button class="visible-xs" ng-click="isCollapsed = !isCollapsed">Collapsible</button>
<ul class="hidden-xs in nav nav-pills nav-stacked uib-collapse="isCollapsed">
<li class="active"><a ng-click="gotoElement('hired')">Hired</a></li>
<li><a ng-click="gotoElement('applied')">Applied</a></li>
<li><a ng-click="gotoElement('connections')">Connections</a></li>
</ul>
</div>
You need to use the ng-init to init the value of the isCollapsed property, if you want to have this logic on the template, but is better if you init all your data in the angular controller. Besides, to show the ul on desktop and hide it in mobile you need to have mobile detection. For example on express you can use: https://www.npmjs.com/package/express-device and use the variable isMobile to init the collapse property
<div>
isCollapsed : {{isCollapsed}}
<button class="visible-xs" ng-init="isCollapsed = isMobile" ng-click="isCollapsed = !isCollapsed">Collapsible</button>
<ul class="nav nav-pills nav-stacked" uib-collapse="isCollapsed">
<li class="active"><a ng-click="gotoElement('hired')">Hired</a></li>
<li><a ng-click="gotoElement('applied')">Applied</a></li>
<li><a ng-click="gotoElement('connections')">Connections</a></li>
</ul>
</div>

Bootstrap Mobile SubMenu Breaking top level Chrome/Android

This is a page I'm working on currently: http://s.codepen.io/moletek/debug/QNeaXq And basically I think the sub-menu breaks when you open and close the parent item. The background will disappear, like it's closing both elements.
I've done some custom stuff, so you can view the src, but here is my standard html:
<div class="collapse navbar-collapse" id="stcs-collapse">
<ul class="nav navbar-nav">
<li class="first active"><a href="welcome" title="welcome" >Welcome</a></li>
<li class="dropdown">About
<ul class="dropdown-menu"><li class="first"><a href="about/our-vision" title="Our Vision" >Our Vision</a></li>
<li><a href="about/our-team" title="Our Team" >Our Team</a></li>
<li><a href="about/church-plants" title="" >Plants</a></li>
<li class="last">Contact Us</li>
</ul>
</li>
</ul>
</div> <!-- A summary of the menu structure with submenu
You can reproduce this in the codepen mentioned above. Or view the GIF below So basically whenever you tap the dropdown parent, it will appear fine. But if you tap the parent again, the entire background will disappear when the child items do.
I'm quite baffled! I appreciate any help.
Thanks!

HTML Website Failing to Switch Between Tabs

I'm very new to the whole web development scene, so what I'm asking may be blisteringly obvious. For an english assessment, I have to create and host a webpage, of a particular text (in my case, I've chosen the Hitchhikers Guide to the Galaxy). Now in the assessment, it is outlined that we are allowed to use code from other websites as a template for our own website, so I do stress, this is not my code. I got the code from 'http://dayzepoch.com/'. So far, I have placeholder information, and customised the webpage, to my needs. Currently, the webpage is hosted at 'http://hiimstring3.hpage.com/' on 'hPage'. Now, my page loads just fine, but when I click on one of the links, it stays on that page for a few seconds, but then loads the original DayZ Epoch website. I believe this is something to do with the below section of code under body:
<ul class="nav nav-tabs" id="myTab">
<li class="active"> Home </li>
<li class=""> Characters </li>
<li class=""> Places </li>
<li class=""> Ships </li>
<li class=""> About </li>
</ul>
Now, I don't know how to change this, so that my website has the same functionality as the original website, but using my url, instead of these ones. If someone could help me out, then I would really appreciate it.
-Michael
Assuming you are http://jqueryui.com/tabs/ then the href you not be including the url of another website.
it should be of the format
<ul class="nav nav-tabs" id="myTab">
<li class="active"> Home </li>
<li class=""> Characters </li>
<li class=""> Places </li>
<li class=""> Ships </li>
<li class=""> About </li>
</ul>

Categories

Resources