Recently, I integrated a Slide in menu script on my website using a Slide in menu script. After following all the instructions provided, the menu started working flawlessly on Chrome and Safari browsers. However, my main goal was to make it function on Firefox as well. I attempted various modifications to the CSS and JavaScript files to troubleshoot the compatibility issue with Firefox. To debug further, I added alert() statements within the JavaScript code to verify the execution flow, but everything seemed to be in order. Below is the complete set of code consisting of HTML, JavaScript, and CSS:
HTML page
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/new.css">
<script type="text/javascript" src="js/slideinmenu.js"></script>
<script type="text/javascript">
var menu;
function loaded() {
document.addEventListener('touchmove', function(e){ e.preventDefault();
e.stopPropagation(); });
menu = new slideInMenu('slidedownmenu', true);
}
document.addEventListener('DOMContentLoaded', loaded);
</script>
</head>
<body>
<div id="slidedownmenu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
<div class="handle"></div>
</div>
<div id="content">
<p>Click to <a href="#" onclick="menu.open();return false">Open</a>, <a
href="#" onclick="menu.close();return false">Close</a> and <a href="#"
onclick="menu.toggle();return false">Toggle</a> the menu programmatically.</p>
</div>
</body>
</html>
The JavaScript section
function slideInMenu (el, opened) {
this.container = document.getElementById(el);
this.handle = this.container.querySelector('.handle');
this.openedPosition = this.container.clientHeight;
this.container.style.opacity = '1';
this.container.style.top = '-' + this.openedPosition + 'px';
this.container.style.webkitTransitionProperty = '-webkit-transform';
this.container.style.webkitTransitionDuration = '400ms';
if ( opened===true ) {
this.open();
}
this.handle.addEventListener('touchstart', this);
}
slideInMenu.prototype = {
pos: 0,
opened: false,
handleEvent: function(e) {
switch (e.type) {
case 'touchstart': this.touchStart(e); break;
case 'touchmove': this.touchMove(e); break;
case 'touchend': this.touchEnd(e); break;
}
},
setPosition: function(pos) {
this.pos = pos;
this.container.style.webkitTransform = 'translate(0,' + pos + 'px)';
if (this.pos == this.openedPosition) {
this.opened = true;
} else if (this.pos == 0) {
this.opened = false;
}
},
open: function() {
this.setPosition(this.openedPosition);
},
close: function() {
this.setPosition("0");
},
toggle: function() {
if (this.opened) {
this.close();
} else {
this.open();
}
}
}
CSS Styles
a{
color:#ffc;
}
ul, li, div {
margin:0;
padding:0;
list-style:none;
}
#content {
padding:40px 10px 10px 10px;
text-align:center;
text-shadow:0 1px 1px #000;
font-size:1.2em;
}
#slidedownmenu {
position:absolute;
width:100%;
height:115px;
left:0;
background:black url(drawer-bg.jpg);
}
#slidedownmenu .handle {
position:absolute;
bottom:-28px;
left:0;
width:100%;
height:28px;
border-top:1px solid #532500;
border-bottom:1px solid #111;
background-color:maroon;
background:url(handle.png) no-repeat 50% 50%, -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #e07b29), color-stop(0.1, #b85300), color-stop(0.8, #793600));
/* -webkit-box-shadow:0 0 5px rgba(0,0,0,0.7);*/
}
#slidedownmenu ul {
display:block;
width:auto;
}
#slidedownmenu li {
display:block;
float:left;
margin:20px 10px;
text-align:center;
font-weight:bold;
color:#fff;
text-shadow:0 1px 1px #000;
}
I would greatly appreciate any suggestions or insights regarding this issue.