How to set active state on page load with Angular - javascript

I have the following set of Bootstrap nav pills in my navigation bar. As you can see from my Angular 'ng-init' code I'm setting 'dateState to 'past' on page load. My problem is that my 'Past Events' nav pill is not highlighted on page load. I have to explicitly click the nav pills to get their 'active' highlight. How would I set whichever pill I have set in 'ng-init' to also show its active state on page load (there's a chance I'll be changing ng-init to 'future' or 'live' in the future so I don't want to just hard code the 'active' state)?
<ul class="nav nav-pills pull-right" ng-init="dateState='past'">
<li><a href ng-click="dateState = 'live'">Live!</a></li>
<li><a href ng-click="dateState = 'past'">Past Events</a></li>
<li><a href ng-click="dateState = 'future'">Future Events</a></li>
</ul>

I was able to achieve what I was aiming for by changing my above code to the following:
<ul class="nav nav-pills pull-right" ng-init="dateState='past'">
<li><a href ng-click="dateState = 'live'" ng-class="{'activeDate': dateState=='live'}">Live!</a></li>
<li><a href ng-click="dateState = 'past'" ng-class="{'activeDate': dateState=='past'}">Past Events</a></li>
<li><a href ng-click="dateState = 'future'" ng-class="{'activeDate': dateState=='future'}">Future Events</a></li>
</ul>
The class now becomes 'activeDate' whenever an 'li' item is active. I added the following very basic styling to test this:
a.activeDate {
background-color: white;
}

Related

i have bootstrap Sidebar menu in my admin panel, when i click and fetch a link then two items are active , like in picture, why?

I have bootstrap Sidebar menu in my admin panel, when I click and fetch a link then two items are active, like in the picture, why?
Check the li tag to see if the tag contains active option in distributor's package page. You need active on current page only & not on distrubutor's page when you are on dp page
Adding more to that answer,
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
Keeping a list item 'active' would mean, that item would be always selected. Check the list item class for this.

Adding a navigation link to single page bootstrap website

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>

How not to trigger the Bootstrap tab click on click?

I am trying not to trigger bootstrap tab click in asp.net. Here is my HTML
<div class="addNewTab">
<ul class="nav nav-tabs tabs" data-tabs="tabs">
<li id="li1" class="deactiveLink"><a href="#tabBasicInfo" onclick="return getit();"
data-toggle="tab">Step 1: Details<span> </span></a></li>
li id="li2" class="deactiveLink"><a href="#tabAdditionalInfo" onclick="return getit();"
data-toggle="tab">Step 2: Photos<span></span></a></li>
<li id="li3" class="deactiveLink"><a href="#tabAdditionalFeature"
onclick="return getit();" data-toggle="tab">Step 3:Add. Info <span></span></a>
</li>
<li id="li4" class="deactiveLink"><a href="#tabPreview" onclick="return getit();"
data-toggle="tab">Step 4: Preview<span></span></a></li>
</ul>
</div>
and here is my javascript function
function getit() {
return false;
}
I have tried this in getit()
$('.addNewTab >.nav-tabs > li:nth-child(5)').find('a').trigger('click');
I am new to Bootstrap therefore I am unable to do my task. I do not want to use divs for that. I want to use tab which cannot be clicked. Am I missing something here in my code? What do I need to do?
According to bootstrap 3 docs http://getbootstrap.com/javascript/#tabs you can active the tabs either manually be javascript or by adding data-toggle="tab" or data-toggle="pill" on an element.
So you can not add the data-toggle="tab" or data-toggle="pill" but rather active them with javascript when you need it.
As already mentioned in the comments you can remove the href from <a> elements to prevent browser's attemts to navigate to a given url on click, or assign onclick handler to these a elements and use event.preventDefault()

jQuery getting attribute of a tab

I am using bootstrap tabs in my application and on change of a dropdown, i want to find out what tab is currently active and from that, get an attribute from the active tab.
So far I have this: $("ul#depts li.active").text(); which gets me the text of the active tab.
However, when I try something like ("ul#depts li.active").attr('departmentid') nothing is returned.
<ul id="depts" role="tablist" class="nav nav-tabs">
<li class=""><a data-toggle="tab" role="tab" href="#Disputes" departmentid="2" name="switchDepartment" class="switch">Disputes</a></li>
<li class="active"><a data-toggle="tab" role="tab" href="#ICA" departmentid="5" name="switchDepartment" class="switch">ICA</a></li>
</ul>
What am I missing?
as per your posted HTML, you have set attribute in anchor tag not in li, so change to:
("ul#depts li.active > a").attr('departmentid');
Two basic corrections:
Your're missing $ sign in: ("ul#depts li.active").attr('departmentid')
Deptid is attribute of <a> element inside that li so it'll be
$("ul#depts li.active a").attr('departmentid')
DEMO

How to I let the clicked nav-pill stays active using bootstrap?

Below is how I created a menu links of my website using Bootstrap 3.1.0. I want the selected nag-pill to stay active/select while the link is clicked. Currently, the defined hover-colour is gone after the link is clicked. Is there a way to let the pill stay active after clicking?
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li>one</li>
<li><a id="menu_text">two</a></li>
<li><a id="menu_text">three</a></li>
</ul>
===Update===
I'm just new to JS and web development. The code that I'm trying to follow Twitter Bootstrap tutorial is here: http://jsfiddle.net/Dy9e6/
I just want the clicked nag-pill to show as 'selected' or 'highlighted' after user click on one of the pill/tab.
First you need to add default class="active" to the first element.
Second you need to add data-toggle="tab" to the <a /> element. See the docs
Your code becomes:
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li class="active">one</li>
<li>two</li>
<li>three</li>
</ul>
Demo

Categories

Resources