Angular Disable Tab - javascript

I wish to apply a class to a tab which will disable it.
For the the CSS I am using
.not-active {
pointer-events: none;
cursor: default;
}
Before seeing the tabbed page, the user is presented with several check boxes. If a check box is not checked, this tab will have the .not-active class applied to it.
For my tabs I have
<nav id='tabs'>
<ul>
<li
ng-repeat='tab in tabs'
ng-class='{"tab-current":isActiveTab(tab.url)}'
ng-click='onClickTab(tab)'>
<a></a>
</li>
</ul>
</
nav>
At the moment I apply the tab-current class when isActiveTab returns true.
However I am a little unsure as what the best approach would be to add the .not-active class based on a checkbox not being selected.
Any guidance would be much appreciated.

I suggest to change the tip property with your checkboxes (for example tip.isDisabled). Then it will be really easy to disable tab in your onClickTab callback, you can do there something like this:
$scope.onClickTab = function(tab){
if (tab.isDisabled) return;
// do something here
}
How to change tip.isDisabled property? Just use appropriate ng-model for your checkbox:
<ul>
<li ng-repeat='tab in tabs'>
<input type=checkbox ng-model='tip.isDisabled'>
</li>
</ul>

You can use the checkbox model as an expression inside the ng-class to apply not-active class conditionally. Like
<nav id='tabs'>
<ul>
<li
ng-repeat='tab in tabs'
ng-class='{"tab-current":isActiveTab(tab.url),'not-active':!checkboxmodel}'
ng-click='onClickTab(tab)'>
<a></a>
</li>
</ul>
</nav>
Where checkboxmodel is the ng-model of your checkbox.

Related

Twitter bootstrap v3+ dropdown : which element class do I need to listen to?

my question is simple but documentation or google is sparse about that...
I have a notification dropdown that I want to reload by ajax each time that exact dropdown is closed.
I just need to know which element do I need to listen to : the .dropdown ? .dropdown-toggle ? Or .dropdown-menu ?
Here is my code sample with IDs to be more specific :
<li class="dropdown" id='notif_drp'>
<a id="notif_toggle" href="#" data-toggle="dropdown" class="dropdown-toggle">Open</a>
<ul id='notif_ul' class="dropdown-menu">
<li>Notification 1</li>
</ul>
</li>
You can bind bootstrap's event, which is shown here.
There are 4 event you can use.
And I made an example. http://jsbin.com/gudevoxara/edit?html,console,output
From twitter bootstrap docs
All dropdown events are fired at the .dropdown-menu's parent element.
So for your example the li tag with class dropdown and id notif_drp
You can see it at codepen

how do I wrap my menu in to sub menu using jquery?

this is my site.
this is how I finally make it look like
I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.
Now, I have been trying to achieve this by
jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");
I have trying this in browser console.
I also tried same above code by using appendTo() instead of after()
But, still no luck.
In your code you're basically doing this:
<ul>
<li>
<div class="new">
<li>
<li>
</div>
<li>
</ul>
which is not a valid markup.
The easiest way to goup <li>s would be to assign different additional css classes to different parts of the list:
<ul>
<li class="group1">
<li class="group1">
<li class="group2">
<li class="group2">
</ul>
Also, have a look at this: Is there a way to group `<li>` elements?

.first() element not working with dynamic generated <li>

I think I am missing some minor concept here, but have done enough googling to find that but no use. Hence posting on this forum seeking some help.
I am generating navigation tab dynamically using this code:
<div class="tabbable">
<ul class="nav nav-tabs" id="testing">
<li ng-repeat="storageOption in gridOptions[$index].ownedJay" class=""><a href="#c{{storageOption.StorageHostname}}" >Data{{storageOption.StorageHostname}}</a></li>
</ul >
In above code, class is left blank. Above code can create many li based on number of elements in storageOption (ng-repeat).
But I want to add class "active" in first li only.
For that I have added following code in the script section of same page:
$(".tabbable ul li").first().addClass("active");
But above code is adding active class in all the li generated.
Can anyone please let me know where I am missing here.
Thanks in advance.
You need to do it in angular way, as angular does provided that option by ng-class that basically need expression like ng-class="{'class': expression}".In ng-class expression you could use $first that tells you its first element of ng-repeat or not, and use ng-href instead of href.
Markup
<li ng-repeat="storageOption in gridOptions[$index].ownedJay" ng-class="{'active': first}">
<a ng-href="#c{{storageOption.StorageHostname}}" >Data{{storageOption.StorageHostname}}</a>
</li>
Alternative
If you want to make active togglable then you could simply maintain one flag that will have the information of which li is selected.
<ul class="nav nav-tabs" id="testing" ng-init="selected=0">
<li ng-repeat="storageOption in gridOptions[$index].ownedJay"
ng-class="{'active': $index == $parent.selected}"
ng-click="$parent.selected == $index">
<a ng-href="#c{{storageOption.StorageHostname}}" >
Data{{storageOption.StorageHostname}}
</a>
</li>
</ul >
In above markup I used $index but you could unique thing if you have it you ng-repeat array.
$(".tabbable").find('li:nth-child(1)').addClass("active");
Try using a different selector to select the first li
FIDDLE
You can use ng-class attribute to check if the $index is 0 then add class active.

How to hide an element after clicking it's child element using JavaScript

I want to hide ul.media-boxes-drop-down-menu area after clicking any menu http://prntscr.com/7j5rmz item. I was tried many times with different different codes. But I was unable to solve it. Any one can help me how may I do it?
Thanks in advance.
Your question is ambiguous. from what i have understood.
<ul id="ul_1">
<li >Some text</li>
</ul>
<ul class="active" id="ul_2">
<li >Some text</li>
</ul>
clicking on ul_1 will hide ul_2, refactor the code according to your need.
$('#ul_1').on('click', function (e) {
$('#ul_2').each(function () {
$(this).removeClass('active');
})
});
you have to give a class to that element you want to hide and then on-click() event you have to search that element inside wrapper main div like:
$('.elementTohode',$(this).parent().parent()).css('display','none')

Navigation with onClick / Javascript not working

I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.

Categories

Resources