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;
}
Related
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 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>
On 3 buttons at the end of each of my post page, I would like to put a hover color when people are clicking on one of them. Here is an example of the 3 buttons:
In my PHP file, these 3 buttons are located here: Post Page
<ul class="tabnav-widget ui-tabs-nav">
<li class="ui-tabs-selected">
<a class="" href="#tab1-widget">written by</a>
</li>
<li>
<a class="" href="#tab3-widget">Related Posts</a>
</li>
<li class="">
<a class="" href="#tab4-widget">In this Category</a>
</li>
</ul>
But I don't know what CSS class I have to modify and which CSS code to add in order to maintain a hovering color when clicking on one of the three buttons.
I thank you in advance, any help is appreciated.
Change this in the CSS
.tabnav li:hover, .tabnav-widget li:hover {
background: #color;
}
Additionally, if you would like to change the color when the button is pressed down, use :active.
Add something like this:
.tabnav li:active, .tabnav-widget li:active {
background: #color;
}
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