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
Post a Comment