jquery - Inline textarea filling remaining width -
i'm trying make element editable when user clicks on it, i'm having difficulties placing new textarea properly.
here's work far:
$.fn.replacewithpush = function(a) { var $a = $(a); this.replacewith($a); return $a; }; $(document).ready(function(){ $(".editable").click(function(event){ event.preventdefault(); switchtotextarea($(this)); }); function switchtotextarea(element) { var mnxx = element.height(); var replaced = element.replacewithpush('<textarea name = "' + element.attr('id') + '" class = "editable" rows = "1" columns = "26">' + $(element).text() + '</textarea>'); $(replaced).css({"min-height": (mnxx + 20) + "px"}); $(replaced).focus(); $(replaced).parent().addclass('editable'); $(replaced).focusout(function(){ var data = {id: author }; data[$(replaced).attr('name')] = $(replaced).val(); $.ajax({ method: "post", url: templatedir.concat('/updatedetails.php'), data: data }) switchback($(this), element.clone().wrap('<div>').parent().html()); return false; }); $(replaced).blur(function(){ switchback($(this), element.clone().wrap('<div>').parent().html()); }); } function switchback(element, previous) { var replaced = element.replacewithpush(previous).text( $(element).val()); $(replaced).click(function(event){ event.preventdefault(); switchtotextarea($(this)); }); $(replaced).parent().removeclass('editable'); } });ul textarea { position: relative; border-radius: 5px; width: 100%; line-height: 1.2em; margin: 0px; text-indent: 0px; border: 1px solid rgba(93, 173, 226, 0); -webkit-animation: borderin 0.5s forwards; animation: borderin 0.5s forwards; display: inline-block; padding: 0.25em; } ul { position: relative; border-top: 1px solid #dcdcdc; color: #000; font-weight: normal; list-style: none; } ul a.call { color: #6ab4e4; } { color:inherit; text-decoration: none; } ul.editable:after { position: absolute; width: 25px; height: 25px; right: -12px; top: -12px; background-color: #5dade2; content: '\2714'; border-radius: 50%; z-index: 1; color: #fff; text-align: center; line-height: 25px; cursor: pointer; -webkit-animation: fadein 0.5s forwards; animation: fadein 0.5s forwards; } @-webkit-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } }<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <br/> <li><i class="fa fa-phone-square"></i> <a href = "#" class = "call editable" id = "phone">call agent @ <?php echo get_user_meta(get_the_author_meta( 'id' ), 'lc_phone', true); ?></a></li> <li><i class="fa fa-envelope-square"></i> <a href="mailto:someone@example.com?subject=hello%20again" target="_top">michaelnewman@gmail.com</a></li> <li><i class="fa fa-facebook-square"></i> <a href = "#">michael newman</a></li> <li><i class="fa fa-google-plus-square"></i> <a href = "#">michael newman</a></li> <li><i class="fa fa-twitter-square"></i> <a href = "#">michael newman</a></li> <br/> </ul>http://jsfiddle.net/off89dmh/1/
what tried eliminating width: 100% textarea's style , fill remaining width jquery, want textarea fill remaining width pure css.
in jsfiddle, if click on 'call agent at', you'll notice textarea gets placed 1 line below, want textarea fill remaining width, inline icon.
the reason is, have both width , padding set. please use border-box box-sizing property:
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; and give property too:
width: 90%; fiddle: http://jsfiddle.net/off89dmh/3/
Comments
Post a Comment