fians/marka

Beautiful transformable icons built for the web.

marka's Issues

Undefined inverted color in Firefox

Marka doesn't work well on Firefox. All inverted background color turned black because value is undefined.

<i data-color="#FF6600" class=" marka marka-set  marka-icon-square-times " data-bg="undefined" id="icon" data-icon="square-times" data-rotate="up">
    <i style="background-color:#FF6600"></i>
    <i style="background-color:#FF6600"></i>
    <i style="background-color:undefined"></i>
    <i style="background-color:undefined"></i>
</i>

hover color issue

Hey Alfiana,

Thanks for a fun and cool library.

I have a little issue I hope you can sort for me.

First off, if I set the color as per instructions m.set('times').color('#ffffff');
.color(); is not doing much. So I'm overwriting the default color in css instead.

The next thing is if I want to change the color when hovering, I'm currently doing this with js bacause 'bars' is a set of children under icon like so:
<i id="icon"> <i class="nav-hover"></i> <i class="nav-hover"></i> <i class="nav-hover"></i> </i>

var elms = document.getElementsByClassName("nav-hover"); var n = elms.length; function changeColor(color) { for(var i = 0; i < n; i ++) { elms[i].style.backgroundColor = color; } } for(var i = 0; i < n; i ++) { elms[i].onmouseover = function() { changeColor("white"); }; elms[i].onmouseout = function() { changeColor("#86A898"); }; }

If I dont do that only the individual bar will change color when hovering not the set of bars.

Is there another way of doing that?

This solution seems to create a lot of lag.

Thanks

Incorrect element child nodes traversal

Consider this code:

applyFunc(this.elements, function(i) {
    for (var a = 0; a < i.childNodes.length; a++) {
        i.childNodes[a].setAttribute('style', 'background-color:'+color);
    }
});

This part of marka thows an error if this.element consists of TextNodes, e.g. even a single space or new line character. TextNodes doesn't have setAttribute methods, which results in the Uncaught TypeError: undefined is not a function.

Here are demos of the error and fixed version.

To fix it one marka should use children collection rather than childNodes. For example, here is the difference between those tho collections explained.

new icon "question mark", "exclamation mark"

Hi there, very cool library :-) Maybe add exclamation mark and question mark, those would be useful

Cheers,
Misha

just inverted filenames

https://github.com/fians/marka/blob/gh-pages/getting-started.html#L60-61 😇

empty icon

Hi Fians,
is it possible to have an empty icon, so that you do not need to delete the marka instance, but animate the actual icon to an empty one.
thanks,

"transparent" inverted color in IE

IE make inverted color into transparent, which make inverted element doesn't appear on icon.

<i class=" marka marka-set  marka-icon-circle-plus " id="icon" data-rotate="up" data-icon="circle-plus" data-bg="transparent" data-color="#FF6600">
   <i style="background-color: rgb(255, 102, 0);"></i>
   <i style="background-color: transparent;"></i>
   <i style="background-color: transparent;"></i>
</i>

new icon 'search'

Hey,

how about something like this:

/* search */
.marka.marka-icon-search i {
  border-radius: 50%;
  -webkit-transform: rotate(0deg) scale(0);
  -moz-transform: rotate(0deg) scale(0);
  -ms-transform: rotate(0deg) scale(0);
  -o-transform: rotate(0deg) scale(0);
  transform: rotate(0deg) scale(0);
}
.marka.marka-icon-search i:nth-child(1) {
  -webkit-transform: rotate(0deg) scale(0.8);
  -moz-transform: rotate(0deg) scale(0.8);
  -ms-transform: rotate(0deg) scale(0.8);
  -o-transform: rotate(0deg) scale(0.8);
  transform: rotate(0deg) scale(0.8);
}
.marka.marka-icon-search i:nth-child(2) {
  -webkit-transform: rotate(0deg) scale(0.65);
  -moz-transform: rotate(0deg) scale(0.65);
  -ms-transform: rotate(0deg) scale(0.65);
  -o-transform: rotate(0deg) scale(0.65);
  transform: rotate(0deg) scale(0.65);
}
.marka.marka-icon-search i:nth-child(3) {
  border-radius: 0px;
  -webkit-transform: rotate(45deg) scale(0.4, 0.1) translate(132%, 0%);
  -moz-transform: rotate(45deg) scale(0.4, 0.1) translate(132%, 0%);
  -ms-transform: rotate(45deg) scale(0.4, 0.1) translate(132%, 0%);
  -o-transform: rotate(45deg) scale(0.4, 0.1) translate(132%, 0%);
  transform: rotate(45deg) scale(0.4, 0.1) translate(132%, 0%);  
}

Api for creating a mark.

Do you plan add api for creating custom marks?

marka.min.js seems to have a merge conflict

https://github.com/fians/marka/blob/master/dist/js/marka.min.js seems to have a merge conflict.

Publish to npm and Commonjs compatible?

I would like to use this library with browserify, could you please add commonjs functionality and add publish to NPM?

Thank you.