html - Drying Up JQuery Button Code -


just wondering if codepen, i've tried drying code using jquery .each method no joy, it's lines 1 7.

here code:

html:

<section class="top-bar cf">   <div class="container">     <div class="left">         left     </div><!-- .left -->      <div class="right">       <span href="#" class="button darkblue toggle-tester">         tester       </span><!-- .button .toggle-tester -->         <div class="tester">         <div class="triangle"></div><!-- .triangle -->           <div class="test-box">             hello, i'm box, yo!           </div><!-- .test-box -->       </div><!--  .tester -->         <span href="#" class="button blue toggle-login">         login       </span><!-- .button .toggle-login -->         <div class="login">         <div class="triangle"></div><!-- .triangle -->         <form>           <div class="field-title">email:</div><!-- .field-title -->           <input type="email" placeholder="email address" />           <div class="field-title">password:</div><!-- .field-title -->           <input type="password" placeholder="password" />           <input type="submit" value="login" />         </form>       </div><!--  .login -->     </div><!-- .right -->   </div><!-- .container --> </section><!-- .tob-bar --> 

css:

@import url(http://fonts.googleapis.com/css?family=open+sans:400, 600,700);  body{   background: #fff;   font-family: 'open sans',sans-serif;   font-size: 13px;   margin: 0;   color: #272727; }  .top-bar {   background: #272727;   color: #fff; }  .container {   width: 1000px;   margin: auto; }  .left, .right {   float: left;   width: 50%;   position: relative; }  .button{   color: #fff;   cursor: pointer;   float: right;   padding: 10px;   text-align: center;   transition: background .3s;   width: 80px;   -webkit-transition: background .3s; }  .blue {   background: #338fe0; }  .blue:hover{   background: #257ac4; }  .darkblue {   background: #014fbc; }  .darkblue:hover{   background: #2672d6; }  .login{   display:none;   margin-bottom: 2%;   margin-top: 42px;   position: absolute;   right: 0;   margin-right: 100px;   width: 260px; }  .tester{   display:none;   margin-bottom: 2%;   margin-top: 42px;   position: absolute;   right: 0;   width: 260px; }  .triangle{   border-right: 12px solid transparent;   border-bottom: 12px solid #338fe0;   border-left: 12px solid transparent;   margin-left: 200px;   width: 0; }  form, .test-box {   background: #272727;   border-top: 6px solid #338fe0;   color: #fff;   padding: 16px 12px; }  input[type="email"],input[type="password"]{   background: #fff;   border: none;   box-sizing: border-box;   color: #555;   margin-bottom: 12px;   padding: 8px;   width: 100%; }  input[type="submit"]{   background: #338fe0;   border: 0;   color: #fff;   cursor: pointer;   font-weight: 600;   padding: 10px 0;   text-transform: uppercase;   width: 100%; }  input[type="submit"]:hover{   background: #2288bb; }  /* #browser clearfix –––––––––––––––––––––––––––––––––––––––––––––––––– */ .cf:before, .cf:after {     content: " "; /* 1 */     display: table; /* 2 */ }  .cf:after {     clear: both; }  /** ie 6/7 - include rule trigger haslayout , contain floats. **/ .cf {     *zoom: 1; } 

jquery:

$('.toggle-login').click(function(){   $('.login').toggle(); });  $('.toggle-tester').click(function(){   $('.tester').toggle(); });    $(document).mouseup(function (e){     var container = $(".login, .tester");     if (!container.is(e.target)         && container.has(e.target).length == 0)      {         container.fadeout();     } }); 

here link current codepen: http://codepen.io/nickelse/pen/ppwmzo

thanks lot guys,

nick

how this? hard-coded though. perhaps, it's better assign corresponding target class button attribute. data-target.

$('.toggle-login, .toggle-tester').click(function(){    $(this).next().toggle();  });      $(document).mouseup(function (e){      var container = $(".login, .tester");      if (!container.is(e.target)          && container.has(e.target).length == 0)       {          container.fadeout();      }  });
@import url(http://fonts.googleapis.com/css?family=open+sans:400, 600,700);    body{    background: #fff;    font-family: 'open sans',sans-serif;    font-size: 13px;    margin: 0;    color: #272727;  }    .top-bar {    background: #272727;    color: #fff;  }    .container {    width: 1000px;    margin: auto;  }    .left, .right {    float: left;    width: 50%;    position: relative;  }    .button{    color: #fff;    cursor: pointer;    float: right;    padding: 10px;    text-align: center;    transition: background .3s;    width: 80px;    -webkit-transition: background .3s;  }    .blue {    background: #338fe0;  }    .blue:hover{    background: #257ac4;  }    .darkblue {    background: #014fbc;  }    .darkblue:hover{    background: #2672d6;  }    .login{    display:none;    margin-bottom: 2%;    margin-top: 42px;    position: absolute;    right: 0;    margin-right: 100px;    width: 260px;  }    .tester{    display:none;    margin-bottom: 2%;    margin-top: 42px;    position: absolute;    right: 0;    width: 260px;  }    .triangle{    border-right: 12px solid transparent;    border-bottom: 12px solid #338fe0;    border-left: 12px solid transparent;    margin-left: 200px;    width: 0;  }    form, .test-box {    background: #272727;    border-top: 6px solid #338fe0;    color: #fff;    padding: 16px 12px;  }    input[type="email"],input[type="password"]{    background: #fff;    border: none;    box-sizing: border-box;    color: #555;    margin-bottom: 12px;    padding: 8px;    width: 100%;  }    input[type="submit"]{    background: #338fe0;    border: 0;    color: #fff;    cursor: pointer;    font-weight: 600;    padding: 10px 0;    text-transform: uppercase;    width: 100%;  }    input[type="submit"]:hover{    background: #2288bb;  }    /* #browser clearfix  –––––––––––––––––––––––––––––––––––––––––––––––––– */  .cf:before,  .cf:after {      content: " "; /* 1 */      display: table; /* 2 */  }    .cf:after {      clear: both;  }    /** ie 6/7 - include rule trigger haslayout , contain floats. **/  .cf {      *zoom: 1;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <section class="top-bar cf">    <div class="container">      <div class="left">          left      </div><!-- .left -->        <div class="right">        <span href="#" class="button darkblue toggle-tester">          tester        </span><!-- .button .toggle-tester -->           <div class="tester">          <div class="triangle"></div><!-- .triangle -->            <div class="test-box">              hello, i'm box, yo!            </div><!-- .test-box -->        </div><!--  .tester -->            <span href="#" class="button blue toggle-login">          login        </span><!-- .button .toggle-login -->           <div class="login">          <div class="triangle"></div><!-- .triangle -->          <form>            <div class="field-title">email:</div><!-- .field-title -->            <input type="email" placeholder="email address" />            <div class="field-title">password:</div><!-- .field-title -->            <input type="password" placeholder="password" />            <input type="submit" value="login" />          </form>        </div><!--  .login -->      </div><!-- .right -->    </div><!-- .container -->  </section><!-- .tob-bar -->


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -