1. Zuhause
  2. Frage und Antwort
  3. Schließen und Öffnen nach einer Bedingung

Schließen und Öffnen nach einer Bedingung

2016-11-18 4 views
-1

In dieser Website: websiteSchließen und Öffnen nach einer Bedingung

Code beteiligt: ​​

/* 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>

Ich habe zwei Bedingungen für Abzeichen: (unten sind die beiden Abzeichen)

unlocked badge locked badge

Ausgabe:

, wenn die Zählung angezeigt werden soll, ist größer als „0“ und dann „mit Häkchen entsperrt“ (die auf der oberen rechten Seite des Abzeichens als „10“ und „0“ erscheint hier) andernfalls sollte "mit Kreuz gesperrt" angezeigt werden und es sollte ausgeblendet werden, wie im Hover-Effekt, den wir normalerweise sehen.

Es ist ziemlich schwierig für mich.Kindly Hilfe, wenn jemand kann.Danke viel.Gott zu segnen.

Quelle

2016-11-18 jane

+0

Ihr Code im Snippet bereits zeigt Fehler ... – Nytrix

+0

was ist die Beziehung hier php? da du als solche getaggt hast. Keine Relevanz/Code, dann muss es entfernt werden. Bitte spam nicht tag. –

+0

Code ist fehlerfrei. Die Website läuft gut, wenn Sie auf den Link an der Spitze gehen.Ich konnte nicht den gesamten Code, wie kein Leerzeichen.Ich gab alle HTML-CSS und JS im Zusammenhang mit dem Abzeichen Ich spreche hier. Anyway, Thanks.God bless – jane

Antwort

2

Sie könnten alle Portfolio-box laufen, überprüfen, wenn sie eine Spanne Abzeichen mit Daten-count> 0, dann anzeigen/ausblenden verriegelt/entriegelt

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

Und in Ihrem HTML ersetzen

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

Für

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

Eine weitere Option, die Sie tun können, ist PHP zu verwenden, um nicht die HTML-f zu erzeugen oder gesperrt/entsperrt auf der Grundlage Ihrer Geschäftsregel, so etwas wie:

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

Quelle

2016-11-18 19:18:10

+0

Hört sich super an. Vielen Dank. Ich werde es durchgehen und zurückkommen. Gott segne mich – jane

+0

@ Felippe Ich habe versucht, was du gesagt hast.ur Code sieht perfekt aus, aber kein Glück so weit.Plz siehe https://jsfiddle.net/ dkjz1z4k/.Ich habe die js in der html.Kindly help.thanks viel. – jane

+0

Plz ignorieren Sie die Bilder. Das Sperren und Entsperren ist in der Geige sichtbar. Vielen Dank. @Felippe – jane

Verwandte Themen

 Verwandte Themen