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
  • …
 
<html>
 <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <title>PanelSKY (beta)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></scripst>
  <script>
  $(document).ready(function(){
    $('button#1').attr("id"){
      $("object#cgi").attr('data','http://www.google.com')};
   $('button#2').attr("id"){
      $("object#cgi").attr('data','http://www.bing.com')};
    $('button#3').attr("id"){
      $("object#cgi").attr('data','http://www.yahoo.com')};
});
 
  </script>
 </head>
 <body>
  <h3>
   Panel <font class="beta">(alfa)</font>
   <br />
   Choose
  </h3>
​
 <table align="center" width="100%">
  <tr>
  <td width="15%"><b>What?</b></td>
  <td width="85%"><b>Done?</b></td>
  </tr>
  <tr>
   <td class="mleft">
    <button class="mleft" id="1">Google</button><br />
    <button class="mleft" id="2">Bing</button><br />
    <button class="mleft" id="3">Yahoo</button><br />
   </td>
   <td height="700px">
     <object id="cgi" border="0" data="http://yahoo.com" width="100%" height="100%"></object>
   </td>
  </tr>
 </table>
 </body>
</html>
​
 
body {
        background-color: white;
}
​
table {
        border: 1px solid black;
        padding: 1px;
        margin: 1px;
        text-align: center;
}
​
td {
        border: 1px solid red;
        padding: 1px;
}
​
img {
        border: 0px;
}
​
h3 {
        text-align: center;
}
​
font.beta {
        vertical-align: super;
        font-size: 10px;
        color: red;
}
​
button.mleft {
        font-weight: bold;
        width: 150px;
}
​
td.mleft {
        vertical-align: top;
        padding-top: 15px;
        text-align: center;
}
​
 
​
Output

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

Dismiss x
public
Bin info
Greyerpro
0viewers