I'm using ReactJS along with a Bootstrap Nav Bar. Bootstrap uses an <a> tag for the navigation buttons. I want the buttons to be able to scroll down to a different component on the page without using an href. I have a scrollFunction to scroll to a section depending on what was pressed. If I use the <a> tag and change it to a button type, the format is totally different and I lose the "active" page style along with the pointer when I hover over the button.
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Education <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
If I change the Education <a> tag to:
<button class="nav-link" type="button" onClick={()=>scrollFunc("education")} style={{background:"transparent", border:"none"}}>Education</button>
Then I will get this output.
Finally, if I change the Education to:
<a class="nav-link" type="button" onClick={()=>scrollFunc("education")} style={{background:"transparent", border:"none"}}>Education <span class="sr-only">(current)</span></a>
I will get this output:
I would like to get the output of the first picture, without the href. Also when I hover over I want the mouse icon to be a pointer like shown here:
Please help me do this, I am relatively new to Web Development.
Thank you #mega12345mega for the answer:
<a class="nav-link" onClick={()=>scrollFunc("education")} style={{cursor:"pointer"}}>Education <span class="sr-only">(current)</span></a>
Related
I have a strange problem. In my PHP/HTML program I am able to use JQUERY, but I cannot use JQUERY to modify attributs of elements.
The click, val and submit functions work fine, but the addClass, removeClass and attr functions don't!
$('#mVote').click(function() {
alert("Vote");
$("a.active").each(function() {
$(this).removeClass("active");
})
$('#mVote').addClass("active");
$('#mVote').attr("test", "test");
$("#mMode").val("vote");
$("#menu").submit();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Abstimmung</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form id="menu" method="POST">
<input type="hidden" id="mMode" name="mode">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a id="mVote" class="nav-link mItem" aria-current="page" href="#">Abstimmung</a>
</li>
<li class="nav-item">
<a id="mLogout" class="nav-link mItem" aria-current="page" href="#">Abmelden</a>
</li>
<li class="nav-item">
<a id="mUser" class="nav-link mItem" aria-current="page" href="#">Benutzerdaten</a>
</li>
<li class="nav-item">
<a id="mCharts" class="nav-link mItem" aria-current="page">Edit Charts</a>
</li>
<li class="nav-item">
<a id="mUpdSong" class="nav-link mItem" aria-current="page">Update Song DB</a>
</li>
<li class="nav-item">
<a id="mUpdImg" class="nav-link mItem " aria-current="page">Update Covers</a>
</li>
<li class="nav-item">
<a id="mTest" class="nav-link mItem" aria-current="page">Test</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</form>
</div>
</div>
</nav>
I am using bootstrap 5.1.3 and JQUERY 3.6.0
In a small test program the addClass, removeClass and attr functions work fine!
Has anybody any idea what the problem could be?
Thanks for your support!
Edit
I made a big thinking problem.
The functions are working, but they are useless!
Due to the folling submit a POST is executing and is overriding the changes!
Due to the fact, that PHP is only running on the server which sends the HTML code to the client, I have to use a POST parameter to set the active class name to the active menu item.
Changes should be made in your JS code line 3
From:
$('."navbar-brand').addClass("active");
To:
$('.navbar-brand').addClass("active");
It's throwing an error and blocking the rest of the code from executing.
I have the following bootstrap button in a nav bar.
<button type="button" onclick="loginfunction()" class="btn btn-secondary">Login</button>
The corresponding javascript function (placed beneath it) is:
<script>
function loginfunction() {
windowalert("Login functionality is under development.");
}
</script>
I know how to call a function from a button, for instance the following would work:
<!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
but in this case the error is to do with the additional existing code I had in and I wasn't sure of the syntax.
For this snippet of code:
<button type="button" onclick="loginfunction()" class="btn btn-secondary">Login</button>
DO I have to remove button type="button" and directly code ? I have tried a few things but keep getting an error.
For instance, I tried this, with no desired result,also doing this removes the bootstrap styling as I removed the class information.
<button type="onclick"=loginfunction() class="btn btn-secondary">Login</button>
The whole code in context, if useful is below. This shows the nav bar and you'll note the login button toward the bottom with the script for the loginfunction onclick event underneath the button html.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><Vsiteclass="tk"></VSite></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>f
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Symptom checker</a>
</li>
</ul>
<span class="navbar-text">
<button type="onclick"=loginfunction() class="btn btn-secondary">Login</button>
<script>
function loginfunction() {
windowalert("Login functionality is under development.");
}
</script>
<button type="button" class="btn btn-danger">Signup</button>
</span>
</div>
</div>
</nav>
I want it to remain a bootstrap button with the class style, so need to keep the:
<button type="button"
Figured it out:
Had an error in the script (window.alert not windowalert)
<script>
function loginfunction() {
window.alert("Login functionality is under development.");
}
</script>
And I was missing a semicolon ...
<button type="button" onclick="loginfunction();" class="btn btn-secondary">Login</button>
The positioning of the JavaScript did not matter that is it could be above or before the button and it still worked.
I want to include a navbar that I copied from the bootstrap example page in views of my asp.net application. The navbar is as follows,
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" asp-controller="Home" asp-action="Index">Bata</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
</li>
#if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a class="nav-link" asp-action="ListUsers" asp-controller="Admin">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="ListPurchases" asp-controller="Purchase">Purchases</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="ListCurrencies" asp-controller="Admin">Currency Management</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="List" asp-controller="unitItem">Inventory Management</a>
</li>
}
<li class="nav-item">
<a class="nav-link" asp-controller="Contact" action="Index">Contact</a>
</li>
</ul>
#await Component.InvokeAsync("CheckoutSummary")
#await Html.PartialAsync("LoginPartial")
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
The navbar displays properly but it will not collapse when the button is clicked. The button is getting the click event you can tell since the button turns orange.
I have bundled my bootstrap and js files like this and include the vendor files in the view.
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css.map",
"node_modules/bootstrap/dist/css/bootstrap.css.map",
],
"minify": { "enabled": true }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map",
"node_modules/jquery/dist/jquery.min.js"
],
"minify": { "enabled": false }
}
]
Is there something I could be missing why the collapse button is not working?
It sounds like you are trying to copy the functionality of the last example on the navbar page. If so, it looks like you are missing some of their classes. try including them.
Here is the code from their example. For testing you could try starting with their example and slowly incorporate what you want to be in the navbar. This will help you figure out what you are missing.
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
https://getbootstrap.com/docs/4.0/components/navbar/#external-content
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
So I just recently started practicing HTML and CSS on my own time. I just started building a website using bootstrap and I'm having trouble with this navigation bar: navbar You can find it on this webstie: https://getbootstrap.com/docs/4.0/components/navbar/
and scroll down to "Nav" (i dont know how to include HTML code here)
What I want to do is have the items "Home" "Features" "Pricing" and "Disabled" "Search" (A search bar that I will implement) floating to the right. Eventually I will have something like:
NavBar-----------------------------------------------------------------Home Features Pricing Disabled #Search
But I can't seem to do it. I've tried to use span tags, ul tags, I've tried to remove some div elements but nothing is working. Any help?
Also I have a question. If I put:
"Navbar"
inside a div, then it is still inline with the rest of the nav elements (Home, Pricing etc...) which are in a different div. How is that possible?
Aren't divs block elements?
Learn and use FlexBox
It is a very powerful css layout library that is supported by most browsers.
Check out an example here for the Nav Bar. There are many ways you can right align. One way is to have an empty element just to the left of the nav elements that takes up remaining space which pushes the elements all the way to the right.
To achieve this for the Bootstrap example
All I did was add
<div style="flex-grow: 1;"></div>
Right below
<div class="collapse navbar-collapse" id="navbarSupportedContent">
And right above
<ul class="navbar-nav mr-auto">
If you're only looking to use Bootstrap features, you can achieve this by wrapping your links with this:
<ul class="nav navbar-nav navbar-right">
<links>
</ul>
Without using bootstrap:
.align-left { float: left }
.align-right { float: right }
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="align-left">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse align-right" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
<div style="clear: both;"></div>
</nav>
You can use the class mr-auto to fix the elements to the right.
Your code will become :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
I'm trying to figure out how to have a top navbar in bootstrap 4 and then when the user scrolls down a little on the page have the navbar fade in I can currently get the navbar to show up using the below script, however, it doesn't fade in it just immediately shows up very fast and awkwardly.
<script>
$(document).scroll(function(e){
var scrollTop = $(document).scrollTop();
if(scrollTop > 200){
$('.navbar').removeClass('static-top').addClass('fixed-top');
} else {
$('.navbar').removeClass('fixed-top').addClass('static-top');
}
});
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav><!--./nav-->
I'm looking for a navbar effect like this http://bootstraplovers.com/assan-v3.6/classic-template/html/index.html
$('.navbar').removeClass('static-top').addClass('fixed-top');
before calling .removeClass() you need to call .toggle() or other similar jquery effects. Refer to the documentation
.toggle() would hide the navbar, so maybe you want to post your question in the relevant stackoverflow section (jquery), think about how you want to build this animation and search the jquery documentation...