Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="main-target" style="position: relative">
  <textarea class="text-area">This text can be anything... how to insert a div when i type start typing @... </textarea>
    
  <div id="target"><span></span></div>
  <div class="dropdown placeholder-list">
  <ul class="dropdown-menu show" role="menu" aria-labelledby="dropdownMenu">
    <li><a>One</a></li>
    <li><a>two</a></li>
    <li><a>three</a></li>
    <li><a>four</a></li>
    <li><a>five</a></li>
    
  </ul>
  </div>
​
    
    
  </div>
</body>
</html>
 
var flag = false;
​
​
$("#main-target").keydown(function(e) {
  if(e.which === 50 && e.shiftKey === true ){
      if(flag === true){
        flag = false;      
        $('.dropdown-menu').removeClass('show').addClass('hide');
        return;
      }      
      flag = true;
    
​
  var mainDiv = $('#main-target'),
      textAreaDiv = $('.text-area'),
      dropdownDiv = $('.placeholder-list'),
      tempDiv = $('#target span:first-child');
     tempDiv.text(textAreaDiv.val().substr(0, textAreaDiv[0].selectionStart));
   
  var rects = tempDiv[0].getClientRects(),
      lastRect = rects[ rects.length - 1 ],
      top = lastRect.top - textAreaDiv[0].scrollTop - mainDiv.offset().top,
      left = lastRect.left + lastRect.width  - mainDiv.offset().left
;
console.log(lastRect);
    dropdownDiv.css({left : left, top: top });
$('.dropdown-menu').removeClass('hide').addClass('show');
      
    } 
 
​
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers