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

Line 1: Line 1:
 
<html>
 
<html>
 
<body>
 
<body>
−
<!----------------------------------------------
+
<!-- jQuery js -->
−
-------------MY CODE ------------------------>
+
 
<script>
 
<script>
 
$(document).ready(function(){
 
$(document).ready(function(){
Line 21: Line 20:
 
$(this).children().toggleClass('active');
 
$(this).children().toggleClass('active');
 
});
 
});
−
$(function(){
+
});
−
  $( "#container" ).on( "swiperight", swipeHandler );
+
</script>
−
  $( "#overlay" ).on( "swipeleft", swipeHandler );
+
−
});
+
−
  function swipeHandler( event ){
+
−
$('#sidebar').toggleClass('visible');
+
−
$('#overlay').toggleClass('active');
+
−
$('#container').toggleClass('inactive');
+
−
$('#sidebar-btn').toggleClass('inactive');
+
−
  }
+
−
});
+
 
 
 +
<!-- hammer js --->
 +
<script>
 +
var myContainer = document.getElementById('container');
 +
var myOverlay = document.getElementById('overlay');
  
−
+
// create a simple instance
−
+
// by default, it only adds horizontal recognizers
−
+
var mC = new Hammer(myContainer);
−
</script>
+
var mO = new Hammer(myOverlay);
 +
 
 +
// listen to events...
 +
mC.on("panright", function(ev) {
 +
$('#sidebar').addClass('visible');
 +
$('#overlay').addClass('active');
 +
$('#container').addClass('inactive');
 +
$('#sidebar-btn').addClass('inactive');
 +
});
 +
 
 +
mO.on("panleft", function(ev) {
 +
$('#sidebar').removeClass('visible');
 +
$('#overlay').removeClass('active');
 +
$('#container').removeClass('inactive');
 +
$('#sidebar-btn').removeClass('inactive');
 +
});
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 14:47, 6 May 2017