javascript - How can I get li items to slide and/or fade into view on this jQuery list? -
okay, have input textarea when hit enter on it, list item word appears. when hit x on list item, slides out of view (i able figure out).
but can't figure out how make list items slide down view when hit enter -- instead, appear suddenly, think looks bad.
how make list items gracefully slide view when hit enter?
http://jsfiddle.net/mlynn/vxzc6z6y/
html
<!doctype html> <!-- --> <html lang="en"> <head> <link type="text/css" rel="stylesheet" href="css/styletime.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/init.js"></script> </head> <body> <section id="heady"> <div style="width:1000px;margin-left:auto;margin-right:auto;"> <div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:28px;"><b><a href="index.html"></b></a></p></div> <div style="text-align: right;padding:25px 00px;display:inline-block;float:right;"> <!--<a href="profile.html">home</a> | <a href="index.html">generic</a> | <a href="index.html">elements</a> | --> </div> </div> </section> <section id="wrapper"> <br><br> <!--<img src="images/blacksquare.png" width="525" height="197"></img>--> <div style="float:left;padding:0px 0px;font-size:14px;">left...</div> <div style="float:right;padding:0px 0px;font-size:14px;">...right</div> <br><br> <div class="leftpanel"> <div style="vertical-align:top;display:inline-block;float:left;"> <ul class="navbar cf"> <!-- <li><a href="#">item 2</a></li> --> <li style="width:200px;"> <a href="#" class="activelistitem">category</a> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> </ul> </li> </ul> </div> <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;"> <form action=""> <input type="text" class="clearable" placeholder="type task , hit enter..." autocomplete="off"> </form> <!-- <ul class="active"> <li>work <a href="">x</a></li> <li>sleep <a href="">x</a></li> <li>repeat <a href="">x</a></li> </ul> --> </div> <div class="interestcontainer mousescroll"> <div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 0px;"> <ul class="active"> <!-- <li>work <a href="">x</a></li> <li>sleep <a href="">x</a></li> <li>repeat <a href="">x</a></li> --> </ul> </div> </div> </div> <div class="rightpanel"> <div style="float:right;vertical-align:top;width:450px;height:400px;background:white;border-color:#ccc;border-width:1px;border-style:solid;border-radius:4px;"> new div goes here?? </div> </div> </section> <section id="feety"> footer </section> </body> </html> css
/*adder*/ @import url(http://fonts.googleapis.com/css?family=open+sans:400, 300, 600); * { padding:0; margin:0; } html { background:#ffffff; /*back colors*/ } body { /*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/ } { color: #34495e; text-decoration: none; } a:active, a:hover { text-decoration: underline; } #heady { text-align: center; width:100%; height:75px; background-color:#ffffff; /*back colors*/ font-family: tahoma; font-size: 16px; color:#000000; position:relative; /*background:url('http://wallpaperupdate.com/images/product/plaid-wallpaper-kxeo-l.jpg');*/ } #wrapper { text-align: center; width:1000px; height:1000px; margin-left:auto; margin-right:auto; background-color:#ffffff; /*back colors*/ font-family: tahoma; font-size: 16px; position:relative; } #feety { text-align: center; width:100%; height:100px; background-color:darkslateblue; /*back colors*/ font-family: tahoma; font-size: 16px; color:white; position:relative; } .leftpanel{ float:left; width:465px; } .rightpanel{ float:right; width:465px; } .interestcontainer{ height:374px; width:460px; background:none; vertical-align:top; /*border-color:#000; border-width:1px; border-style:solid; border-radius:4px;*/ } .mousescroll { overflow-x:hidden; overflow-y:auto; } /* .mousescroll { overflow:hidden; } .mousescroll:hover { overflow-y:scroll; }*/ /* clearfix */ /** * modern browsers * 1. space content 1 way avoid opera bug when * contenteditable attribute included anywhere else in document. * otherwise causes space appear @ top , bottom of elements * clearfixed. * 2. use of `table` rather `block` necessary if using * `:before` contain top-margins of child elements. */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } .cf { * zoom: 1; } ul.navbar { background:white; border-style:solid; border-color:#ccc; border-width:1px; width: 130px; /*widthchanger1*/ border-radius: 4px; margin-left:0px; margin-right:0px; font-size:14px; height:33px; } .activelistitem:after { content: "\25bc"; /*carat , spaces \00a0*/ float:right; font-weight:900; padding: 0px 0px; font-size:100%; line-height:17px; /*keeps carat in center of text*/ } ul.navbar li a.activelistitem { background:white !important; color:black !important; padding:3px 5px !important; font-weight:normal !important; margin-left:10px; /*widthchanger2, got activeitem centered list text way*/ margin-right:0px; margin-top:5px; margin-bottom:6px; width:100px; /*kinda messes width of text*/ } ul.navbar li { position: relative; width:130px; /*changes width of actual list*/ } ul.navbar li { display: block; color: white; padding:10px 5px; text-decoration:none; transition: .2s ease-in; } ul.navbar li a:hover, ul.navbar li:hover > { background:#dadfe1; color: #34495e; font-weight:900; } ul.navbar li ul { margin-top: 0px; /*controls space listdropdown listchooser*/ position: absolute; background: #222; font-size: 14px; /* min-width: 200px; */ display: none; z-index: 99; box-shadow: inset 0 2px 3px rgba(0,0,0,.6), 0 5px 10px rgba(0,0,0,.6); } ol, ul { list-style: outside none none; } .hidden { display: none; } /*lister*/ .container { } form { } .lister input { border-radius: 5px; width:278px; /*width of todo input box*/ height:33px; padding-left:10px; padding-right:10px; border: 1px solid #ccc; float:left; margin-bottom:20px; font-size:14px; font-family:"tahoma"; } .lister ul { /*list-style: square inside;*/ padding: 10px; /* padding outside area of list*/ /* what's visible when not in use*/ width:419px; background: #eee; border-radius: 5px; /* width: 100%; */ font-family:"tahoma"; } .active { border: 1px solid #ccc; } .inactive { display: none;} .lister li { padding: 10px; /*controls height of list items*/ font-size:16px; /*font size of list items*/ font-weight: 600; color: #34495e; text-align:left; } .lister li:nth-child(odd) { background: #dadfe1; border-radius: 5px; } .lister li > { float: right; text-decoration: none; color: #22313f; font-weight: bold; transition: .2s ease-in-out; } .lister li > a:hover { font-size: 110%; color: #c0392b; } /*.lister li:before { content: ""; float:right; font-weight:900; padding: 0px 0px; font-size:100%; line-height:20px; } .categoryicon { float:right; color:red; padding:40px 40px; } */ /*clearable*/ .clearable { background: #fff; background:url(http://s3.amazonaws.com/redditstatic/award/1_year_club-40.png); background-repeat: no-repeat; background-size: 10px 10px; background-position:right -15px center; transition: background 0.4s; } .clearable.x { background-position: right 5px center; } .clearable.onx { cursor: pointer; } js
// sub menus identification $(function() { $('.navbar ul li a').click(function(){ $('.navbar > li:first-child > a').text($(this).text()); $('.navbar > li > ul').addclass('hidden'); $('.navbar li ul').slidetoggle(100); }); $('.navbar > li').mouseenter(function(){ $(this).find('ul').removeclass('hidden'); }); $('.activelistitem').click(function(){ $('.navbar li ul').slidetoggle(300); }); }); //newlist $(document).ready(function() { var ul = $('.lister ul'), input = $('input'), categoryicon; input.focus(); $(document).on('click', 'input.onx', function() { //alert(1); if (input.val() !== '') { var inputval = input.val(), activenumber = $('.activelistitem').text(); if (activenumber == "1") { categoryicon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_itunes.png" width="15" height="15"></img>'; } else { categoryicon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-icon-round-question_mark.jpg" width="15" height="15"></img>'; } ul.append('<li>' + categoryicon + " " + inputval + '<a href="">x</a></li>'); if (ul.hasclass('inactive')) { ul.removeclass('inactive') .addclass('active'); } }; input.val(''); return false; }); $('form').submit(function () { if (input.val() !== '') { var inputval = input.val(), activenumber = $('.activelistitem').text(); if (activenumber == "1") { categoryicon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_itunes.png" width="15" height="15"></img>'; } else { categoryicon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-icon-round-question_mark.jpg" width="15" height="15"></img>'; } ul.append('<li>' + categoryicon + " " + inputval + '<a href="">x</a></li>'); if (ul.hasclass('inactive')) { ul.removeclass('inactive') .addclass('active'); } }; input.val(''); return false; }); ul.on('click', 'a', function (e) { e.preventdefault(); $(this).parent().slideup(); if (ul.children().length == 0) { ul.removeclass('active') .addclass('inactive'); input.focus(); } }); }); //clearable jquery(function($) { // ///// // clearable input function tog(v){return v?'addclass':'removeclass';} $(document).on('input', '.clearable', function(){ $(this)[tog(this.value)]('x'); }).on('mousemove', '.x', function( e ){ $(this)[tog(this.offsetwidth-18 < e.clientx-this.getboundingclientrect().left)]('onx'); }).on('click', '.onx', function(){ $(this).removeclass('x onx').val('').change(); }); }); thank you.
instead of appending li calling append on th ul:
ul.append('<li>' + categoryicon + " " + inputval + '<a href="">x</a></li>'); you can select new li jquery object, hide it, append ul , call slidetoggle:
$('<li>' + categoryicon + " " + inputval + '<a href="">x</a></li>').hide().appendto(ul).slidetoggle(1000);
Comments
Post a Comment