CODEWITHSUNDEEP
jqueryhtmlcsszooming
me9867
me9867

Reputation: 1599

Using zoom on a specific div only

We have a seatplan that when on mobiles would be handy to have a zoom function on the setaplan only. At the moment when you zoom in using pinch on an Andoid mobile it will zoom in, but you have to pinch out fully to maintain the responsive look of the page.

Here is an example of the #seats div I wish to zoom in on https://jsfiddle.net/ohaumyxj/

Is this something that can be achieved with plain CSS or does jQuery come into the mix here? I am looking for the type of thing you get with Google Maps on a contact page of a site or perhaps a bit better with a tap zoom function.

.container {
  margin: 0 auto;
}
#bmessage {
  padding: 1px 3px;
  height: 20px;
  font-size: 14px;
  background: #ddf;
  color: #080;
  font-weight: bold;
}
#seats:before {
  content: '';
  display: block;
  padding: 50%;
}
#seats {
  margin: 10px 0;
  padding: 10px 0;
  position: relative;
  background-image: url(https://s21.postimg.org/qd8mqgh07/seatplan11.gif);
  background-repeat: no-repeat;
  background-size: contain;
}
#seats div {
  position: absolute;
  width: 1.5%;
  height: 1.5%;
}
#seats .green {
  background: url('https://s12.postimg.org/93ugmrvb1/seatg.gif') no-repeat center;
  background-size: cover;
  margin:0 !important;
}
<div id="theatre">
  <div class="container">
    <div id="bmessage">Select the seats that you need.</div>
    <div id="seats">
      <div class="avail std green" si="332" title="Y1" style="top: 8.7%; left: 10.2%; border: none; margin: 3px 1px;"></div>
      <div class="avail std green" si="333" title="Y2" style="top:8.7%; left:13%;"></div>
      <div class="avail std green" si="334" title="Y3" style="top:8.7%; left:16.2%;"></div>
      <div class="avail std green" si="335" title="Y4" style="top: 8.7%; left: 18.8%; border: none; margin: 3px 1px;"></div>
      <div class="avail std green" si="336" title="Y5" style="top: 8.7%; left: 21.5%; border: none; margin: 3px 1px;"></div>
      <div class="avail std green" si="337" title="Y6" style="top:8.7%; left:24.2%;"></div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 3542

Answers (2)

RonyLoud
RonyLoud

Reputation: 2426

Please refer to the fiddle

HTML

<div id="theatre" class="zoomViewport">
        <div class="container zoomContainer">
            <div id="bmessage">Select the seats that you need.</div>
            <div id="seats" class="zoomTarget">
                <div class="avail std green" si="332" title="Y1" style="top: 8.7%; left: 10.2%; border: none; margin: 3px 1px;"></div>
                <div class="avail std green" si="333" title="Y2" style="top:8.7%; left:13%;"></div>
                <div class="avail std green" si="334" title="Y3" style="top:8.7%; left:16.2%;"></div>
                <div class="avail std green" si="335" title="Y4" style="top: 8.7%; left: 18.8%; border: none; margin: 3px 1px;"></div>
                <div class="avail std green" si="336" title="Y5" style="top: 8.7%; left: 21.5%; border: none; margin: 3px 1px;"></div>
                <div class="avail std green" si="337" title="Y6" style="top:8.7%; left:24.2%;"></div>
            </div>
        </div>
    </div>

Jquery:

 $(document).ready(function () {
            $("#seats").click(function (evt) {
                $(this).zoomTo({ targetsize: 0.75, duration: 600 });
                evt.stopPropagation();
            });
        });

Upvotes: 0

N. Smeding
N. Smeding

Reputation: 394

Like this?

var zoomable = document.getElementById('seats'),
    zX = 1;
window.addEventListener('wheel', function (e) {
    var dir;
    if (!e.ctrlKey) {
        return;
    }
    dir = (e.deltaY > 0) ? 0.1 : -0.1;
    zX += dir;
    zoomable.style.transform = 'scale(' + zX + ')';
    e.preventDefault();
    return;
});

Upvotes: 2

Related Questions