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>
<title>My Collection</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js " type="text/javascript"></script>
​
<script type="text/javascript">
​
$(document).ready(function() {
     
   $("#settings").click(function(){
   $(".read").stop(0,1).switchClass("read", "edit", 500, "swing");
   $(".edit").stop(0,1).switchClass("edit", "read", 500, "swing");
   });
   
   $("#colors").click(function(){
     $.effects.animateClass.call(
       $( "body" ),
       { toggle: "white black" },
       { children: true }
     );
   });
​
   $("#backend-width").css("width",($("body").width()*.4));
   $(window).resize(function(){
     $("#backend-width").css("width",($("body").width()*.4));
   });
   
 });
 
</script>
</head>
<body class="read black">
    <div id="frontend" class="read">
    This is the main content.
    <button type="button" id="settings">Settings</button>
    </div>
    <div id="backend" class="read">
    <div id="backend-width">
    Here goes settings.
    <button type="button" id="colors">Color Switch</button>
    </div>
    </div>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers