Difference between revisions of "Template:Cologne-Duesseldorf/js-jquery"

Line 1: Line 1:
 
<html>
 
<html>
 
<body>
 
<body>
 +
 +
<script src="https://http://hammerjs.github.io/dist/hammer.min.js"></script>
 
<!-- jQuery js -->
 
<!-- jQuery js -->
 
<script>
 
<script>
Line 26: Line 28:
 
<script>
 
<script>
 
var myContainer = document.getElementById('container');
 
var myContainer = document.getElementById('container');
−
var mC = new Hammer(myContainer);
 
 
var myOverlay = document.getElementById('overlay');
 
var myOverlay = document.getElementById('overlay');
 +
 +
// create a simple instance
 +
// by default, it only adds horizontal recognizers
 +
var mC = new Hammer(myContainer);
 
var mO = new Hammer(myOverlay);
 
var mO = new Hammer(myOverlay);
  
−
 
+
// listen to events...
 
mC.on("panright", function(ev) {
 
mC.on("panright", function(ev) {
 +
$('#sidebar').addClass('visible');
 +
$('#overlay').addClass('active');
 
$('#container').addClass('inactive');
 
$('#container').addClass('inactive');
−
$('#overlay').addClass('inactive');
+
$('#sidebar-btn').addClass('inactive');
 
});
 
});
  
 
mO.on("panleft", function(ev) {
 
mO.on("panleft", function(ev) {
 +
$('#sidebar').removeClass('visible');
 +
$('#overlay').removeClass('active');
 
$('#container').removeClass('inactive');
 
$('#container').removeClass('inactive');
−
$('#overlay').removeClass('inactive');
+
$('#sidebar-btn').removeClass('inactive');
−
+
 
});
 
});
−
</script>
+
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 14:56, 6 May 2017