I am creating a navigation structure. I tried to use AngularStrap and Bootstrap, but as soon as I injected them into my app, Angular failed. I found this link and constructed my navigation tab-bar. I like how easy it is to customize. My problem is, I don't know how to apply the css for the selected tab in angular. I can't apply an id to an element conditionally, and when I try and break up the css into multiple classes, the tabs don't display the same way.
<ul class="tablist">
<li ng-repeat="tab in tabList" ng-click="setSelected($index);">
{{tab.title}}
</li>
</ul>
vs.
<ul class="tablist">
<li id="selectedTab">Admin</li>
</ul>
What is the best way to apply the selected formatting? See this Fiddle for a more fleshed out example.
Updated: http://jsfiddle.net/dLemh/6/
to have background color change use css important on the class
ng-class="{selected: isSelected(tab)}"
$scope.currentSelectedTab = {};
$scope.setSelectedTab = function(tab){
$scope.currentSelectedTab = tab
}
$scope.isSelected = function(tab){
if(tab == $scope.currentSelectedTab){
return true;
}
return false;
}
Please let me know if anything
I found this SO Post that I was able to use and fix the CSS formatting with regards to their priority.
.tablist li.selectedTab a {
background: none;
border: 2px solid #6B74C6;
border-bottom: 0px;
background-color: #F3F3F3;
color: #0378D9;
text-decoration: none;
}
<ul class="tablist">
<li ng-repeat="tab in tabList" ng-click="setSelected($index);" ng-class="{ selectedTab: $index === selected}">
{{tab.title}}
</li>
</ul>
Related
Is it possible to set a custom style for an individual marker?
I'm trying to set the border color to a custom one for each marker I add, instead of using one single class. Those colors are ones I can't know in advance and I need to set them while the program is running. This is why I can't create a dozen classes and use them for this purpose.
You can use dynamic marker similar to what cloud9 uses here https://github.com/c9/core/blob/2d05ddeb7c0c1f6f3b35e305f60d1ba4f39f0294/plugins/c9.ide.collab/author_layer.js#L41 https://github.com/c9/core/blob/2d05ddeb7c0c1f6f3b35e305f60d1ba4f39f0294/plugins/c9.ide.collab/author_layer.js#L98
Here is one way you can do that: https://jsfiddle.net/sheriffderek/wkwzprfh/
markup
<ul class="marker-type-list">
<li class='marker-type'>
<button class='js-create-marker' data-color='red'>Create red marker</button>
</li>
<li class='marker-type'>
<button class='js-create-marker' data-color='green'>Create green marker</button>
</li>
<li class='marker-type'>
<button class='js-create-marker' data-color='blue'>Create blue marker</button>
</li>
</ul>
<ul class='marker-list'><!-- X --></ul>
script
$('.js-create-marker').on('click', function() {
var color = $(this).data('color');
console.log(color);
$('.marker-list').append('<li class="marker ' + color + '">marker</li>');
});
styles
.marker.red {
color: red;
}
.marker.green {
color: green;
}
.marker.blue {
color: blue;
}
I'm using Bootstrap 3. I have this menu which works ok only when is not a touch (mobile) device:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li>Ayuda</li>
<li>Metodología<span></span>
<div class="nav-sub-menu">
<ul class="text-submenu">
<li style="padding-left=0px">Guía Metodológica</li>
<li style="padding-left=0px">Modelos y Resultados</li>
</ul>
</div>
</li>
<li>Glosario</li>
<!--<li>Link de Interés</li>-->
<li>Contacto</li>
</ul>
</div>
In the css, the hover that give the style to the elements have this code:
.nav li > a {
display: table-cell;
}
.nav>li>a:hover {
background: none;
color: #ff7113;
}
.nav > li > ul {
display:none;
list-style:none;
position:relative;
}
.nav > li:hover > ul {
display:block;
}
I've read some posts about making menus for both desktop and touch without hover, with javascript or even using external libraries. Is there are more simple way to use this menu in mobiles devices?
I made a Jsfiddle with the menú working:
https://jsfiddle.net/esqkx349/
You have to open it in a wide screen to see it, like this:
in case, anyone still finding solution to this problem,
Add onclick="void(0)" in <div class="navbar-collapse collapse"> to make mobile device recognise an element as an element with a hover.
like <div class="navbar-collapse collapse" onclick="void(0)">
Well, I made it:
https://jsfiddle.net/pmiranda/bwkyocpa/1/
I had to put some javascript and css:
function isTouchDevice(){
return typeof window.ontouchstart !== 'undefined';
}
$(document).ready(function(){
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(isTouchDevice()) {
// 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
$(".navbar-nav > li > a").click(function(event) {
// Perform a reset - Remove the "clicked" class on all other menu items
$(".navbar-nav > li > a").not(this).removeClass("clicked");
$(this).toggleClass("clicked");
if ($(this).hasClass("clicked")) {
event.preventDefault();
}
});
}
});
CSS:
.hover-hack {
position: fixed !important;
background-color: rgba(0, 0, 0, 0.7) !important;
}
#media only screen and (max-width:1024px) {
.hover-hack {
background: rgba(0, 0, 0, 1) !important;
z-index: 10;
}
}
And the html:
<li>Metodología<span></span>
<ul class="text-submenu hover-hack">
<li style="padding-left=0px">Guía Metodológica</li>
<li style="padding-left=0px">Modelos y Resultados</li>
</ul>
</li>
<li>Glosario</li>
It's possible to make a clickable dropdown without Js.
The hover method is sketchy because some touch devices will treat the first click like a hover action.
It can be done using a checkbox html element. Then, css can detect wether or not the checkbox is current checked.
I created a component that does the job using this link. It works fairly well on mobile because click events work just fine.
Pure CSS clickable dropdown?
Problem is, this solution is slightly hacky and pure HTML, CSS implementations can't work outside of the HTML heirarchy.(so if your button and your dropdown menu exist in different branches of the html heirarchy it won't work.)
I think the most appropriate solution is to use a little bit of JS and handle the element on click.
Recently when I started to use my own implementation of methodology based on BEM I stuck on modifiers for nested elements.
I want to change link color to red when product-desc-name has class mark.
The following example presents the problem.
What should I do to keep the final style the same but without duplicating class names?
.product-desc {
&-name {
&.mark {
/* this section is ugly */
.product-desc-link {
color: red;
}
}
}
}
<ul class="product-desc">
<li class="product-desc-name">
<a class="product-desc-link">Param1</a>
</li>
<li class="product-desc-name mark"> <!--add class .mark-->
<a class="product-desc-link">Param1</a>
</li>
</ul>
This is a typical weakness of BEM. I have search for long, but do not seen any good solution for this so I make my own.
At first I would change the class name. Because UL element should be call 'product-desc-list'. The LI element 'product-desc', as this is in fact exactly a product description for a product.
The more important is the condition of the product. Therefore the selection of the element should be mentioned first. This allows several blocks to be used for one component.
The first is the component definition. The next define possible states like selected, in progress etc.
Here is an example for illustration
// your product in default definition.
.product-desc {
&--link {
text-decoration: underline;
}
}
// your product in mark state definition
.mark {
.product-description {
&.--link{
font-weight: bold;
}
}
}
<ul class="product-desc-list">
<li class="product-desc">
<a class="product-desc--link">Param1</a>
</li>
<li class="product-desc mark"> <!--add class .mark-->
<a class="product-desc--link">Param1</a>
</li>
</ul>
Is it possible to use wildcard to select data attribute by name with CSS only?
[data-widget-type="*.color"] {
color: orange
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
http://jsfiddle.net/
Yes, it's possible, just not quite the way you've done it. You need to move the delimiter (in your case, the "wildcard" asterisk) outside of your string declaration. There's also a better delimiter for what it looks like you're trying to select. Here's the right attr selector:
li[data-widget-type$="color"] {
color: orange;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
This will select all the li elements with data-widget-type values that end in color, and change their color to orange.
Here's a JSFiddle demo to play around with it yourself.
[data-widget-type*="color"] {
color: red;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
More info about Attribute selectors - https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
li[data-widget-type$=".color"] {
color: orange;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
You can use css selectors for that too.
For specific atribute you can use [] and if you are comparing something in css and want to search at the beginning ^= or if you want to find it at the end $= you can use this.
Also if you don't know where the word is in the comparing word then you can use wildcard * too. So in our case it is li[data-widget-type*=".col"]
As an advice, I like to struct my css files like this.
I always have a css class for colors.
li[class*="red"] {
color: red;
}
So I can also reach it from any other class like any-red, new-red when I don't want to use single red class.
Also don't forget that you can also use li[data-widget-type|="red"] for elements that starting with red. This is an old but good move from CSS2, some browsers may reject it so take care.
So here is the jsFiddle and here is the snippet.
li[data-widget-type$=".color"] {
color: orange;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
I use markup to display a dropdown menu using Twitter Bootstrap.
<ul class="nav pull-right">
<li class="dropdown">
Menu <b class="caret"></b>
<ul class="dropdown-menu">
<li>Menu item 1...</li>
<li class="divider"></li>
<li>Menu item 2...</li>
<li>Menu item 3</li>
</ul>
</li>
</ul>
I want to be able to make menu items appear disabled, i.e. no hover effect and probably a different text decoration to make the disabled state visible to the user.
What is the best way to accomplish this? Is there an exisisting bootstrap css class I can add to the <li> or <a> element?
When outputing the code for a disabled drop down, why not simply use :
<li class='disabled'>
Menu
</li>
You can always add the caret back if you still want it to appear.
Update:
Adding W3Schools Link
You can attach a custom disabled class to your menu link a tag that you want to disable and simply remove the default action by using preventDefault and targetting that class, like so:
$(".disabled-link").click(function(event) {
event.preventDefault();
});
Then you can style all events from the .disabled-link with a grey backdrop or any style you like;
CSS
a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
background-color:#d9d9d9 !important;
color:#aaa !important;
}
Demo
I prefer this (LESS):
/* Disable link */
a.disabled,
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {
color: #999 ;
cursor: default;
}
.dropdown-menu {
a.disabled,
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {
color: #999 ;
cursor: default;
background-color: white;
}
}
To disable the the dropdown use:
$('.dropdown-toggle').addClass('disabled');
To enable it back:
$('.dropdown-toggle').removeClass('disabled');
YES, Bootstrap has a predefined class with all necessary styling you need. You can simply add disabled class to whichever <li> you want
Just to add to Andres answer (don't have enough reputation to add comments :( ). You need to return false from the event handler or it might continue executing other handlers.
$(".disabled-link").click(function(event) {
event.preventDefault();
return false;
});
Similar to above you can use:
li.disabled > a {
color:#aaa !important;
}
This way you are keeping the same bootstrap default class for disabled links and implement the preventDefault() Javascript to disabled the link.
$(".disabled").click(function(event) {
event.preventDefault();
return false;
});
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
**<a class="dropdown-item disabled" href="#">Disabled link</a>**
<a class="dropdown-item" href="#">Another link</a>
</div>
Add .disabled to items in the dropdown to style them as disabled.
Source: www.getbootstrap.com