jane jane - 14 days ago 6
jQuery Question

lock and unlock according to a condition

In this website : website

code involved :



/* CSS Document */

/* Float Elements
---------------------------------*/

.fl-lt {
float: left;
}
.fl-rt {
float: right;
}
/* Clear Floated Elements
---------------------------------*/

.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.figure {
margin: 0px;
}
img {
max-width: 100%;
}
a,
a:hover,
a:active {
outline: 0px !important
}
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Primary Styles
---------------------------------*/

body {
background: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
color: #888888;
margin: 0;
}
h2 {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
margin: 0 0 15px 0;
text-align: center;
text-transform: uppercase;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #222222;
font-size: 16px;
margin: 0 0 5px 0;
text-transform: uppercase;
font-weight: 400;
}
h6 {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
margin: 0 0 60px 0;
}
p {
line-height: 24px;
margin: 0;
}
/* Header Styles
---------------------------------*/

.header {
text-align: center;
background: url(../img/pw_maze_black_2X.png) left top repeat;
padding: 280px 0;
}
.logo {
width: 130px;
margin: 0 auto 35px;
}
.header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 50px;
font-weight: 400;
letter-spacing: -1px;
margin: 0 0 22px 0;
color: #fff;
}
.we-create {
padding: 0;
margin: 35px 0 55px;
}
.wp-pic {
margin-bottom: 20px;
}
.we-create li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: #bcbcbc;
text-transform: uppercase;
font-weight: 400;
margin: 0 5px 0 0;
padding: 0 0 0 15px;
}
.we-create li:first-child {
background: none;
}
.start-button {
padding-left: 0px;
}
.start-button li a {
color: #fff;
}
.link {
padding: 15px 35px;
background: #7cc576;
color: #fff !important;
font-size: 16px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
display: inline-block;
border-radius: 3px;
text-transform: uppercase;
line-height: 25px;
margin-bottom: 20px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
text-decoration: none;
color: #7cc576 !important;
background: #fff;
}
.link:active,
.link:focus {
background: #7cc576;
text-decoration: none;
color: #fff !important;
}
/* Navigation
---------------------------------*/

.main-nav-outer {
padding: 0px;
border-bottom: 1px solid #dddddd;
box-shadow: 0 4px 5px -3px #ececec;
position: relative;
background: #fff;
}
.main-nav {
text-align: center;
margin: 10px 0 0px;
padding: 0;
list-style: none;
}
.main-nav li {
display: inline;
margin: 0 1px;
}
.main-nav li a {
display: inline-block;
color: #222222;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height: 20px;
margin: 17px 32px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.main-nav li a:hover {
text-decoration: none;
color: #7cc576;
}
.small-logo {
padding: 0 32px;
}
.main-section {
padding: 90px 0 110px;
}
/* Portfolio
---------------------------------*/

.Portfolio-nav {
padding: 0;
margin: 0 0 45px 0;
list-style: none;
text-align: center;
}
.Portfolio-nav li {
margin: 0 10px;
display: inline;
}
.Portfolio-nav li a {
display: inline-block;
padding: 10px 22px;
font-size: 12px;
line-height: 20px;
color: #222222;
border-radius: 4px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
background: #f7f7f7;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Portfolio-nav li a:hover {
background: #7cc576;
color: #fff;
text-decoration: none;
}
.portfolioContainer {
margin: 0 auto;
padding-left: 15px;
}
.Portfolio-box {
text-align: center;
margin-bottom: 30px;
height: 350px;
width: 350px;
overflow: hidden;
float: left;
padding: 0;
}
.Portfolio-box img {
margin-bottom: 25px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Portfolio-box img:hover {
opacity: 0.6;
}
.Portfolio-nav li a.current {
background: #7cc576;
color: #fff;
text-decoration: none;
}
img {
max-width: 100%;
}
/* no transition on .isotope container */

.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
.main-section.paddind {
padding-bottom: 60px;
}
/* Clients
---------------------------------*/

.client-part {
background: url(../img/section-bg1.jpg) center center no-repeat;
background-size: cover;
padding: 55px 0;
text-align: center;
}
.client-part-haead {
color: #fdfdfd;
font-size: 28px;
line-height: 41px;
margin: 30px 0 10px;
font-family: ''Open Sans',sans-serif';
font-style: italic;
}
.client {
padding: 0;
margin: 20px 0 0;
list-style: none;
text-align: center;
}
.client li {
display: inline;
margin: 0 15px;
}
.client li a {
display: inline-block;
}
.client li a img {
margin-bottom: 15px;
border-radius: 50%;
}
.client li a:hover {
text-decoration: none;
}
.client li a h3 {
color: #ffffff;
}
.client li a span {
color: #f1f1f1;
}
.quote-right {
font-style: normal;
width: 68px;
height: 68px;
margin: 0 auto;
border: 2px solid #7cc576;
border-radius: 50%;
display: block;
line-height: 68px;
text-align: center;
font-size: 27px;
color: #7cc576;
cursor: pointer;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.quote-right:hover {
color: #fff;
border: 2px solid #fff;
}
.c-logo-part {
background: #7cc576;
padding: 25px 0;
filter: alpha(opacity=60);
}
.c-logo-part ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.c-logo-part ul li {
display: inline;
margin: 0 25px;
}
.c-logo-part ul a {
display: inline-block;
margin: 0 20px;
}
.main-section.team {
padding: 85px 0;
}
.main-section.team h6 {
margin-bottom: 40px;
}
.portfolioContainer {
max-width: 1140px;
}
/* Animation Timers
---------------------------------*/

.delay-02s {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.delay-03s {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.delay-04s {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.delay-05s {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.delay-06s {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.delay-07s {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.delay-08s {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
.delay-09s {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
.delay-1s {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.delay-12s {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
span.fa-stack.fa-5x.has-badge {
width: 180px;
height: 180px;
}
#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;
}

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">

<title>Homepage</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">

<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->

<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="contactform/contactform.js"></script>
<link rel="stylesheet" href="css/stylebadge.css">


</head>

<body>
<header class="header" id="header">
<!--header-start-->
<div class="container">
<figure class="logo animated fadeInDown delay-07s">
<a href="#">
<img src="img/logo.png" alt="">
</a>
</figure>
<h1 class="animated fadeInDown delay-07s">Welcome To Knight Studios</h1>
<ul class="we-create animated fadeInUp delay-1s">
<li>We are a digital agency that loves crafting beautiful websites.</li>
</ul>
<a class="link animated fadeInUp delay-1s" href="#">Get Started</a>
</div>
</header>
<!--header-end-->

<nav class="main-nav-outer" id="test">
<!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li><a href="#header">Home</a>
</li>
<li><a href="#service">Services</a>
</li>
<li><a href="#Portfolio">Badges</a>
</li>
<li class="small-logo">
<a href="#header">
<img src="img/small-logo.png" alt="">
</a>
</li>
<li><a href="#client">Clients</a>
</li>
<li><a href="#team">Team</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
</div>
</nav>
<!--main-nav-end-->


<section class="main-section paddind" id="Portfolio">
<!--main-section-start-->
<div class="container">
<h2>Badges</h2>
<h6></h6>
<div class="portfolioFilter">
<ul class="Portfolio-nav wow fadeIn delay-02s">
<li><a href="#" data-filter="*" class="current">All Badges</a>
</li>
<li><a href="#" data-filter=".branding">Salesforce</a>
</li>
<li><a href="#" data-filter=".photography">L & TD</a>
</li>
</ul>
</div>

</div>
<div class="portfolioContainer wow fadeInUp delay-04s">
<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=10>
<div class="badgesize">
<a href="#"><img src="img/66.png" alt=""></a>
</div>
</span>
<h3>Completionist</h3>
<p>Didnot submit timesheet for a week</p>

<ul id="unlocked">
<li>UNLOCKED</li>
</ul>

<ul id="locked">
<li>LOCKED</li>
</ul>
</div>



<div class="Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=15>
<div class="badgesize">
<a href="#"><img src="img/11.png" alt=""></a>
</div>
</span>
<h3>Get A LIFE</h3>
<p>Logged greater than 60 hours for the week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>

<ul id="locked">
<li>LOCKED</li>
</ul>
</div>


<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=2>
<div class="badgesize">
<a href="#"><img src="img/22.png" alt=""></a>
</div>
</span>
<h3>Slogger</h3>
<p>Logged greater than 55 hours for the week</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>

<ul id="locked">
<li>LOCKED</li>
</ul>
</div>


<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=100>
<div class="badgesize">
<a href="#"><img src="img/1.png" alt=""></a>
</div>
</span>
<h3>Into The Game</h3>
<p>Starts Playing the Game</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>

<ul id="locked">
<li>LOCKED</li>
</ul>
</div>


<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=100>
<div class="badgesize">
<a href="#"><img src="img/2.png" alt=""></a>
</div>
</span>
<h3>Hipster</h3>
<p>Branding</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>

<ul id="locked">
<li>LOCKED</li>
</ul>
</div>

<div class=" Portfolio-box branding">
<span class="fa-stack fa-5x has-badge" data-count=20>
<div class="badgesize">
<img src="img/7.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>

<ul id="locked">
<li>LOCKED</li>
</ul>
</div>

<div class=" Portfolio-box photography">
<span class="fa-stack fa-5x has-badge" data-count=0>
<div class="badgesize">
<img src="img/ltd1.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>

<ul id="locked">
<li>LOCKED</li>
</ul>
</div>

<div class=" Portfolio-box photography">
<span class="fa-stack fa-5x has-badge" data-count=200>
<div class="badgesize">
<img src="img/ltd2.png" alt=""></a>
</div>
</span>
<h3>Windmills</h3>
<p>Photography</p>
<ul id="unlocked">
<li>UNLOCKED</li>
</ul>

<ul id="locked">
<li>LOCKED</li>
</ul>
</div>



</div>
</section>
<!--main-section-end-->

<section class="business-talking">
<!--business-talking-start-->
<div class="container">
<h2>Let’s Talk Business.</h2>
</div>
</section>
<!--business-talking-end-->


<script type="text/javascript">
$(document).ready(function(e) {
$('#test').scrollToFixed();
$('.res-nav_click').click(function() {
$('.main-nav').slideToggle();
return false

});

});
</script>

<script>
wow = new WOW({
animateClass: 'animated',
offset: 100
});
wow.init();
</script>


<script type="text/javascript">
$(window).load(function() {

$('.main-nav li a').bind('click', function(event) {
var $anchor = $(this);

$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 102
}, 1500, 'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
})
</script>

<script type="text/javascript">
$(window).load(function() {


var $container = $('.portfolioContainer'),
$body = $('body'),
colW = 375,
columns = null;


$container.isotope({
// disable window resizing
resizable: true,
masonry: {
columnWidth: colW
}
});

$(window).smartresize(function() {
// check if columns has changed
var currentColumns = Math.floor(($body.width() - 30) / colW);
if (currentColumns !== columns) {
// set new column count
columns = currentColumns;
// apply width to container manually, then trigger relayout
$container.width(columns * colW)
.isotope('reLayout');
}

}).smartresize(); // trigger resize to set container width
$('.portfolioFilter a').click(function() {
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');

var selector = $(this).attr('data-filter');
$container.isotope({

filter: selector,
});
return false;
});

});
</script>

</body>

</html>





I have two conditions for badges :(below are the two badges)

unlocked badge
locked badge

Issue :

when the count (which appears on the upper right side of the badge as "10" and "0" here) is greater than "0" then "unlocked with check mark" should be displayed else "locked with cross" should be dispalyed and it should be faded as in hover effect we see normally.

Its quite tricky for me.Kindly help,if anyone can.Thanks a lot.God bless.

Answer

You could iterate all Portfolio-box, check when they have a span badge with data-count > 0, then show/hide the locked/unlocked

$.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();
    }
});

And in your html replace

<ul id="unlocked">
<ul id="locked">

For

<ul class="unlocked">
<ul class="locked">

Another option you could do is to use PHP to not generate the HTML for locked/unlocked based on your business rule, something like:

<?php if($badgeCount >0): ?>
<ul class="unlocked">
....
</ul>
<? else: ?>
<ul class="locked">
....
</ul>
<? endif; ?>
Comments