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>Panzoom Bug Report</title>
    <script type="text/javascript" src="https://timmywil.com/panzoom/demo/panzoom.js"></script>
​
</head>
<body>
  <div class="buttons">
    <button id="zoom-in">Zoom in</button>
    <button id="zoom-out">Zoom out</button>
    <button id="reset">Reset</button><br/><br/>
    Press reset before testing wheel events <br/><br/>
    <button id="sim-normal-wheel">Normal Wheel Events</button>
    <button id="sim-fast-wheel">Fast Wheel Events</button>
  </div>
    <div class="panzoom-parent">
        <div id="panzoom">
          <img src="https://timmywil.com/panzoom/demo/awesome_tiger.svg" width="400" />
          <div id="expected-zoom" class="zoom-location"></div>
        </div>
            <div id="zoom-location" class="zoom-location"></div>
​
    </div>
</body>
</html>
 
.buttons {
  padding: 30px 0;
}
​
.panzoom-parent {
    position: relative;
    border: 1px solid;
    width: 400px;
}
​
.zoom-location {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  background-color: red;
  left: 50px;
  top: 50px;
}
​
#expected-zoom {
  background-color: blue;
}
​
#panzoom {
  position: relative;
}
#panzoom img {
  display: block;
  margin: 0 auto;
}
Output

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

Dismiss x
public
Bin info
dermitzospro
0viewers