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://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <style type="text/css">
#feeds {
  border: 2px solid #333;
  width: 200px;
  height: 200px;
  overflow: hidden;
  padding: 10px;
  margin: 0 auto;
}
.addFeed {
 margin: 0 auto; 
}
.feeds {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: absolute;
  display: block;
  z-index: 3;
  background: #777; /* default background color if not defined below */
  color: #fff;
  font-size: 160px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.active {
 opacity: 1;
 filter: alpha(opacity=1);
}
#feed1 { background: red; }
#feed2 { background: green; }
#feed3 { background: blue; }
#feed4 { background: #f0f; }
#feed5 { background: #ff0; }
#feed6 { background: #0ff; }
​
</style>
<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; }
</style>
</head>
<body>
​
<div id="feeds">
 <div id="feed1" class="feeds active">1</div>
 <div id="feed2" class="feeds">2</div>
 <div id="feed3" class="feeds">3</div>
</div>
<br>
<div align="center">
 (current # of feeds = <span id="num">3</span>)<br>
 <button class="addFeed">Add Feed</button>
</div>  
​
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers