0

In this website, when you scroll down to the badge section,I have "locked and unlocked" badges.

Issues:

  1. Can I make the locked badges faded. (as in hover effect we see a faded image)

  2. Can we make the unlocked badges appear first and locked badges at the end.

css and js related to the locked and unlocked section: 

$.each($('.Portfolio-box'), function() {
  var count = $(this).children('.has-badge').attr('data-count');
  if (count > 0) {
    $(this).children('ul.locked').hide();
    $(this).children('ul.unlocked').show();
  } else {
    $(this).children('ul.locked').show();
    $(this).children('ul.unlocked').hide();
  }
});
.unlocked li:before {
  content: '\2713';
  display: inline-block;
  color: green;
  margin-left: -65px;
  padding: 0 9px 0 0;
}
.unlocked li {
  list-style-type: none;
  font-size: 1.5em;
  margin: 1px;
  font-weight: bold;
}
.locked li:before {
  content: '\274c';
  display: inline-block;
  color: red;
  margin-left: -65px;
  padding: 0 9px 0 0;
}
.locked li {
  list-style-type: none;
  font-size: 1.5em;
  margin: 1px;
  font-weight: bold;
}

Fiddle link of the entire site :https://jsfiddle.net/dkjz1z4k/1/

halfer
  • 18,701
  • 13
  • 79
  • 158
jane
  • 185
  • 3
  • 29

1 Answers1

1

1.Can I make the locked badges faded. (as in hover effect we see a faded image)

Best practice is to add current status class to the element's container. In your case it could be something like this:

.locked-badge img {
  opacity: 0.7;
}

.locked-badge .badge-img {
  opacity: 0.7;    
}
<div class="Portfolio-box locked-badge">
  <img src="#" class="badge-img"> 
</div>

It's always better to give classes to all elements witch designed in CSS. It will save you many time in the future and prevent some issues.

2.Can we make the unlocked badges appear first and locked badges at the end.

Please check this topic Sort JavaScript object by key. Another alternative is to use lodash orderBy method.

Community
  • 1
  • 1
ArMikael
  • 47
  • 5
  • Thanks for trying.I cannot give a class and provide opacity to an image.The condition here is that ,when the count of a badge,which appears on the upper right side of a badge is '0' - the badge is locked and when greater than '0' its unlocked.That will be changing constantly.So,when its locked with a point count of '0' the image of the badge needs to be faded. – jane Nov 20 '16 at 10:58
  • The images are not static "locked or unlocked." They will basically be locked or unlocked according to the count value on the upper right of the badge. – jane Nov 20 '16 at 11:00
  • I understand that this is dynamic class. After each change in count value you need to check in JavaScript if there are some milestone was achieved and change the locked/unlocked class in HTML accordingly. – ArMikael Nov 20 '16 at 11:03
  • The point is ,if its locked it should have a particular opacity(lets say 0.7 here),else remain as it is.If I change directly in the css with a class ,it wont serve the purpose.Thanks a lot.God bless – jane Nov 20 '16 at 11:08
  • Please check created example to understand what do I mean: – ArMikael Nov 20 '16 at 11:39