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 class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  #container{
    position:relative;
    margin:0 auto;
    width:300px;
    height:350px;
    background:#e4e4e4;
  }
  .cssInner{
    position:relative;
    float:left;
    width:120px; height:120px;
    background:#ccc;
    margin:15px;
  }
  #clicked_info{
    position:relative;
    float:left;
    width:270px; height:20px;
    margin:15px;
    background:#a12;
  }
</style>
</head>
<body>
  
  <div id="container">
  
    <div id="div1" class="cssInner">Div 1 inner</div>
    <div id="div2" class="cssInner">Div 2 inner</div>
    <div id="div3" class="cssInner">Div 3 inner</div>
    <div id="div4" class="cssInner">Div 4 inner</div>
    
    <div id="clicked_info"></div>
  
  </div>
  
</body>
</html>
 
  $(document).ready(function(){
​
    $('div').each(function(){
      $(this).click(function(){
        $('#clicked_info').html($(this).attr('id'));
        //alert($(this).attr('id')); // try THIS! wow! 
      });
    });
    
  });
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers