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.
Related
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
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
I am using MaterializeCSS and React to render a simple dropdown based on whether the user is logged in or not.
The idea is that if the user is logged in, to show the dropdown menu and if they are not, to only show a logout link.
<nav className="transparent black-text" role="navigation">
<ul id="dropdown" className="dropdown-content">
<li>My Profile</li>
<li>My Documents</li>
<li className="divider"></li>
<li>
<a href="/#"> Logout
</a>
</li>
</ul>
<div className="nav-wrapper container">
<a className="brand-logo brand-logo-small" href="/">
<img alt="Logo" id="header-logo" src="../../images/favicon.png"/>
{'My Document'}
</a>
<ul className="right hide-on-med-and-down" id="nav-mobile">
<li>
{this.state.loggedIn == 'true'
? <a className="dropdown-button"
data-activates="dropdown"
data-beloworigin="true"
data-constrainwidth="false"
href="/#">{'User'}
<i className="material-icons right">arrow_drop_down</i>
</a>
: Login
}
</li>
</ul>
</div>
</nav>
In the above snippet, if the loggedIn flag equals true, I expect that the dropdown should be displayed, but it isn't.
However, when I add className="dropdown-button" data-activates="dropdown" attributes to the second <a> tag, the dropdown gets displayed.
Additionally, if I remove the className="dropdown-button" data-activates="dropdown" attributes from the first link, the dropdown is still displayed.
What could I be doing wrong here? Why is the dropdown on the first <a> tag only displayed when I set the attributes on the second <a> tag?
Thanks in advance.
I have been re-building a site with Bootstrap, but I know that many of the links will change as I build the site. It seems the best plan to use HTML templating to produce the links in the navbar.
However, I just can't get it to work at all. I am guessing there may be some issue with the collapsable navbar using javascript, and when each function runs. This is just a guess, I am a beginner.
This is the HTML - (the handlebars link is in the header)
<script id="some-template" type="text/x-handlebars-template">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
About<b class="caret"></b>
<ul class="dropdown-menu">
<li>Intention</li>
<li>Membership</li>
<li>Genealogy</li>
<li>Contact</li>
</ul>
</li>
<li class="dropdown">
Writings<b class="caret"></b>
<ul class="dropdown-menu">
<li>Poetry</li>
<li>Articles</li>
<li>Lectures</li>
<li>Qur’anic Study</li>
<li>Sufi Stories</li>
<li>Thoughts</li>
<li>Book Reviews</li>
<li>Library</li>
</ul>
</li>
<li>Sharib Press</li>
<li>99 Names</li>
<li class="dropdown">
Persian Pages<b class="caret"></b>
<ul class="dropdown-menu">
<li>Hafiz Shirazi</li>
<li>First Line index</li>
<li>Glossary</li>
</ul>
</li>
<li>Ajmer</li>
<li>Konya</li>
<li class="dropdown">
Images<b class="caret"></b>
<ul class="dropdown-menu">
<li>Photos</li>
<li>Art Gallery</li>
<li>Sufi Shrines</li>
</ul>
</li>
</ul>
</nav>
</script>
</div>
<script type="text/javascript" src="script.js"></script>
This is the script file -
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = {
home : "/home.html",
etc.
};
$("#content-placeholder").html(template(data));
I copied this from a tutorial mostly, and the parent div has the correct ID.
Is it even possible to use templating in this case?
OK incase anyone stumbles across this having the same issue, there was only a small issue.
The fact that one of the data names in the script began with a number '99' (i didn't show this in my question as I assumend the data was fine). To solve this I simply put it in quotation marks.
I am trying to figure out how to change a bootstrap navbar dropdown via ajax(without page refresh) after the user logs in. Thanks
<ul class="nav navbar-nav" name= "myNavBar" id="myNavbar">
<li>About</li>
<li>Contact Us</li>
<li>Blog</li>
<li>Store</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Login | Register<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-toggle="modal" data-target="#myOtherModal" href="#log-in">Login</a></li>
<li class="divider"></li>
<li><a data-toggle="modal" data-target="#myModal" href="#log-in">Register</a></li>
</li>
</ul>
I can get it to change but it requires page refresh
from the modal dialog after it appears from clicking the login/reg links, on login button click, you'd just do something like using jquery
$.ajax({ ..... success: { $('.dropdown').hide(); }
then show or append a log out link.
if you've never used jquery ajax, jquery ajax example