блокировки и разблокировки в соответствии с условием

-1

В этом сайте: website блокировки и разблокировки в соответствии с условием

кода участвуют:

/* 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> 
 
\t \t \t \t \t \t \t \t \t <div class="badgesize"> 
 
       \t <a href="#"><img src="img/66.png" alt=""></a> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t   </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> 
 
\t \t \t \t \t \t \t \t \t \t <div class="badgesize"> 
 
\t     \t <a href="#"><img src="img/11.png" alt=""></a> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t   </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> 
 
\t \t \t \t \t \t \t \t \t \t <div class="badgesize"> 
 
\t     \t <a href="#"><img src="img/22.png" alt=""></a> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t   </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> 
 
\t \t \t \t \t \t \t \t \t \t <div class="badgesize"> 
 
\t     \t <a href="#"><img src="img/1.png" alt=""></a> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t   </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> 
 
\t \t \t \t \t \t \t \t \t \t <div class="badgesize"> 
 
\t     \t <a href="#"><img src="img/2.png" alt=""></a> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t   </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> 
 
\t \t \t \t \t \t \t \t \t \t <div class="badgesize"> 
 
\t     \t <img src="img/7.png" alt=""></a> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t   </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> 
 
\t \t \t \t \t \t \t \t \t \t <div class="badgesize"> 
 
\t \t \t \t \t \t \t \t \t \t <img src="img/ltd1.png" alt=""></a> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t </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> 
 
\t \t \t \t \t \t \t \t \t \t <div class="badgesize"> 
 
\t     \t <img src="img/ltd2.png" alt=""></a> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t   </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'); 
 
     /* 
 
\t \t \t if you don't want to use the easing effects: 
 
\t \t \t $('html, body').stop().animate({ 
 
\t \t \t \t scrollTop: $($anchor.attr('href')).offset().top 
 
\t \t \t }, 1000); 
 
\t \t \t */ 
 
     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>

У меня есть два условия для бейджей (ниже двух значков)

Издание:

, когда счетчик (который появляется на верхней правой стороне значка, как «10» и «0» здесь) больше, чем «0», а затем «разблокирован с галочкой» должны отображаться иначе «запертый с крестом» должен быть рассеян, и он должен быть бледным, как при наведении, который мы видим обычно.

Это довольно сложно для меня. Помогите, если кто-нибудь может. Спасибо большое. Благослови.

источник

2016-11-18 jane

Ваш код в сниппет уже отображает ошибки ... – Nytrix

, что является отношение к PHP здесь? так как вы помечены как таковые. Нет релевантности/кода, тогда его нужно удалить. Пожалуйста, не отправляйте спам. –

код является ошибкой free.the сайт работает нормально, если вы идете по ссылке наверху. Я не мог дать весь код, так как не было места. Я дал все html css и js, связанные с значком, о котором я говорю здесь. Anyways, Thanks.God благословить – jane

Вы можете перебирать все Portfolio-box, проверьте, когда они имеют поверочного значок с данными подсчета> 0, то показать/скрыть блокировки/разблокировки

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

И в вашем HTML заменить

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

для

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

Другой вариант вы могли бы сделать, это использовать PHP, чтобы не генерировать HTML п или заблокирован/разблокирован на основе вашего бизнес-правила, что-то вроде:

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

источник

2016-11-18 19:18:10

Звучит здорово. Спасибо тоннелю. Я пройду через него и вернусь. God Bless – jane

@ Felippe Я попробовал то, что вы сказали. Код выглядит идеально, но пока не повезло. Посмотрите этот https://jsfiddle.net/ dkjz1z4k /. У меня есть js в html.Kindly help.thanks много. – jane

Plz игнорирует изображения. Блокировка и разблокировка видны в скрипке. Спасибо большое. @Felippe – jane

блокировки и разблокировки в соответствии с условием

ответ

Смежные вопросы