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
Related
I’ve recently started learning and trying to code for personal personal us and also just a new hubby. I wanted to know how to Removing the the drop down home menu in bar and keeping the (HOME ONE) as main page of the website. I’ve watched videos and searched and I followed instructions but the lay out of the bar on the website. any help would be greatly appertained. thank you in advance. here is the code and also it was a sample template i got and trying to work on.enter image description here
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item dropdown active">
Home <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li class="active">Home One</li>
<li>Home Two</li>
</ul>
</li>
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?
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 ''}}">
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.
I have a sample login page which directs to a dashboard. The login page is set as the initial redirect page and this routes to the dashboard. The dashboard contains a dropdown menu with some links. Everytime a link is clicked it keeps redirecting to the login page. However, when the dashboard page is reloaded the dropdown menu works completely fine.
I am thinking of using the "event.preventDefault()" for the links but I hope there is a workaround.
Dashboard Menu - HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-calendar fa-fw"></i> Manage Events<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
Lorem Ipsum
</li>
<li>
Lorem Ipsum
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
Edit: After getting some replies, I would like to clarify my main problem.The problem exists in the link being a null link and that Angular 2 takes it as a null link and causes it to redirect it. If I could find a workaround to tell Angular, don't take this link as a null link it will be ideal.
If you don't want any redirection when clicking on your link(s), check out these solutions:
Different methods to make a null link?
Or you can put <a> tag without href attribute.
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-calendar fa-fw"></i> Manage Events<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
<a [routerLink]="['ManageEvents/LoremIpsum']">Lorem Ipsum</a>
</li>
<li>
<a [routerLink]="['ManageEvents/LoremIpsum']>Lorem Ipsum</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
export const routes: Routes = [
{ path: 'ManageEvents/LoremIpsum', component: ManageEventsLoremIpsum }
];
This works for me!!
link
hope this helps link also working by this way
For me I used the routerLink and set it to empty:
<a [routerLink]="" (click)="onClickPage()">Click me</a>
try to remove href, setting cursor: pointer with css and handle click on th a element like <a (click)=yourFunction()></a>. it should work ;)
Just simply use <a href>Lorem Ipsum</a>.
I had a situation after parent received events from child component, it redirect to homepage. I solved the problem in parent
receiveMessage($event) { //do something this.router.navigateByUrl('/parent-route'); }
even the parent route are supposed to accept parameters.
For me it javascript:void(0); works. Angular 14
Last Page // HTML file