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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
​
</head>
​
<body>
  
  <div class="well centered" id="well">
    <div>
      <form><label>
        <i class="fa fa-search icon" aria-hidden="true" id="magni"></i></label>
        <span id="magniText"></span>
        </form>
    </div>
    
   <br>
    
    <div align="left">
      <p><i class="fa fa-puzzle-piece icon" aria-hidden="true" id="jiggy"></i>
        <span id="jiggyText"></span>
      </p>
    </div>
  </div>
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
 
.formstyle{
  background-color: transparent;
  border-style: none;
  border-bottom: 2px dashed #c9dee8;
  width: 70%;
}
​
.icon{
  padding: 15px;
  font-size: 50px !important;
}
​
.toggleMe{
  width: 30%;
}
​
body { 
  background-image: url(https://scontent-sjc2-1.xx.fbcdn.net/v/t31.0-8/17015684_10155366851512439_600021915085029862_o.jpg?oh=40568a73e302093676ebfb8a1cc73c51&oe=593564D3);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #3d748f;
  background-size: 100% 100%;
}
​
.well {
  border-style: none;
  background-color: rgba(64, 64, 64, 0.75);
  color: #c9dee8;
  font-size: 30px;
  font-family: 'Comfortaa', cursive;
  border-radius: 10px 10px 10px 10px;
  -moz-box-shadow: 1px 2px 3px rgba(64, 64, 64, 0.75);
  -webkit-box-shadow: 1px 2px 3px rgba(64, 64, 64, 0.75);
  box-shadow: 0px 0px 10px rgba(64, 64, 64, 0.75);
}
​
.centered {
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
​
* { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
​
​
 
var toggler = true;
var inputText ='';
var wellToggle = function(){
  $("#well").toggleClass("toggleMe")
  if (toggler === true){
    $("#magniText").append('<input class="formstyle" type="text" name="wikiFind" placeholder="***">')
    $("#jiggyText").text("Random Article")
    $("input").val(inputText);
    toggler = false;
  } else {
    inputText = $("input").val()
    $("input").detach()
    $("#jiggyText").text("")
    toggler = true
  }
};
​
$("#well").hover(wellToggle, wellToggle);
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers