CODEWITHSUNDEEP
javascripthtmlcsstilemetro-ui-css
Fish
Fish

Reputation: 165

metro ui css tile element-selected doesn't work

Visual Studio 2013, ASP.NET web form, metro UI CSS 3.0

I'm trying to create a tile element-selected that looked like the one in this site http://metroui.org.ua/tiles.html

<div class="tile bg-green fg-white element-selected" data-role="tile">
   <div class="tile-content iconic">
      <span class="icon mif-home"></span>
      <div class="tile-label"></div>
   </div>
</div>

enter image description here

my code create a tile like this one above, with the tick icon checked, but when I press the tile, the tick icon doesn't uncheck as it should be !

The thing i want here is to create a tile that will display a tick icon when user click it, and will uncheck when user click it again.

Hope somebody can help me !

Upvotes: 3

Views: 1254

Answers (2)

Nicolas Candela
Nicolas Candela

Reputation: 31

In my case, I dont know why, the tile clik make a second click.

I use:

$('.class').mousedown(function(event) {$(this).toggleClass("selected")})

And it´s works.

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

This is how I made the select and deselect work:

$("[data-role='tile']").click(function(){
    if($(this).hasClass("element-selected")){
        $(this).removeClass("element-selected");
    }else{
        $(this).addClass("element-selected");
    }
});

Here is the link to the JSFiddle demo

Upvotes: 2

Related Questions