How to add active class in bootstrap with flask? - javascript

my navbar is:
<ul class="nav">
<li class="nav-item ">
<a class="nav-link" href="#SubMenu">
<span class="menu-title">Details</span>
</a>
<div class="collapse" id="SubMenu">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="{{ url_for('Details') }}">Upload Details</a></li>
</ul>
</div>
</li>
My code runs on flask on the server side, I want to dynamically add active class on the <li class="nav-item>, when <a class="nav link"> is selected, I tried various solutions provided on SO, but none is working, if someone could help me figure out, whats happening wrong?
Thankyou.

I hope this menu will be there in all in all the pages. so better create a base file.
Just assume you are in Upload Details page {{ url_for('Details') }}.
In that page, extend this base template, and set a active_page variable.
{% extend 'base.html' %}
{% set active_page = 'upload_page' %}
...
In you base.html
<ul class="nav">
<li class="nav-item {{ 'active' if active_page=='upload_page' else ''}}">

Related

Bootstrap 4.0.0 alpha 6 nav: what causes an active class to be added to a clicked item

I have a template which uses the above version of Bootstrap, complete with matching css and js scripts. The navigation code looks like this:
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
<div class="container">
<button
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
Brand
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Home
</li>
<li class="nav-item">
About Us
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
It works fine with an automatic adding of the 'active' class to whatever menu item is clicked.
I was thinking of customizing the active state of the .nav-item elements and tried to disable the native effect but, despite disabling all the js scripts and all the css scripts it still works ie the active class is still added to the clicked item. How can this be and what is the code that makes it happen?

Sidebar instead of dropdown when clicking hamburger (Bootstrap) [duplicate]

This question already has an answer here:
how to convert bootstrap4 navbar to sidebar for mobile?
(1 answer)
Closed 2 years ago.
When my navbar goes to the mobile type with the hamburger icon I want it to show a sidebar rather than the dropdown type that it does by default. Meanwhile I would like to keep it the top style navbar then on larger screens.
I hope that makes sense.
nav.html
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<div class="container-fluid">
{% load static %}
<a href="{% url 'main:homepage_view' %}"><img class="nav-logo img-fluid"
src="{% static 'img/logos/logo-white.png' %}"></a>
<button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon1"><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url "main:homepage_view" %}">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url "dealers:dealers_view" %}">DEALERS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url "main:contact_view" %}">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url "news:blog_view" %}">NEWS</a>
</li>
</ul>
</div>
</div>
</nav>
AFAIK that's not directly possible. In other words bootstrap does not provide a way to collapse menus into a sidebars. That said, you want to add an event to the harmbuger icon that opens a custom sidebar you added which shows only on mobile.
Take a look:
https://bootstrapious.com/p/bootstrap-sidebar
https://mdbootstrap.com/docs/jquery/navigation/sidenav/
https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp

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.

change login link to say logout | PHP | bootstrap

I've coded a very simple design in bootstrap, the code sits internally where I work so I am unable to publish externally, however it's a simple jobs board design. Coded in bootstrap 4, html and css.
I've separated the header part of the design so that I call it from this file:
<?php include('header/header.php'); ?>
the file header.php includes the very simple nav:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://vacancies.prospect.local/registration/register.php">Register <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://vacancies.prospect.local/registration/register.php">Login</a>
</li>
</ul>
<span class="navbar-text">
<i class="fas fa-sign-out-alt"></i> Return to main Prospect website
</span>
</div>
After a user has logged in (on a simple form on the body), I want the login link header.php file to change to logout. I've read numerous threads with so many variations but I am confused how to apply any of them as my php knowledge is very low. I've read that javascript or Ajax will do the job? I'm ok in bootstrap but I have no programming knowledge and am teaching myself, starting on what I hope are these basics.
I've tried to wrap the login code with php tags and ISSET functions, but I am unable to get what I want working..... any help or advice would be very much appreciated, thanks!
If you can use Session and store session data, you can change the login button to logout based on session data.
<?php
session_start();
//After Login
$_SESSION["user_id"] = 10;
?>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="http://vacancies.prospect.local/registration/register.php">Register <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<?php
if(isset($_SESSION['id'])){?>
<a class="nav-link" href="http://vacancies.prospect.local/registration/logout.php">Logout</a>
<?php }else{?>
<a class="nav-link" href="http://vacancies.prospect.local/registration/register.php">Login</a>
<?php } ?>
</li>
</ul>
<span class="navbar-text">
<i class="fas fa-sign-out-alt"></i> Return to main Prospect website
</span>
</div>
You can also check the link: http://php.net/manual/en/reserved.variables.session.php

<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

Categories

Resources