2

On the mobile version of the website I have made, I use a javascript file to handle the tap of a user to open up the side display.

What I wanted to do was if a user presses the side display it should expand, if the touch area is not the side display shrink back to the original state.

It is currently working on samsung browsers, I have also tried on iphones using a chrome and safari browser and it expands when pressed on the side display but only closes when I press the button located on the lower right hand corner. The areas excluding the side navigation and the background do not initiate the div to return to original state.

Here is my javascript code for handling touch events:

document.getElementById('side_box').addEventListener('touchend', function(event){

    var touchobj = event.changedTouches[0] // reference first touch point for this event
    const vals = document.getElementById('val-display');
    const lst_elem = document.getElementsByClassName('list-element');
    const arrow = document.getElementById('arrow');

    if(screen && screen.width < 480) {
      if (event.target === this || event.target === arrow) {
        this.style.opacity = "0.7";
        this.style.width = "200px";
        vals.style.opacity = "0";
        arrow.style.display = "none";

        for (let i = 0; i < lst_elem.length; i++) {
          lst_elem[i].style.visibility = "visible";
        }
      } else {
        this.style.opacity = "0.3";
        this.style.width = "50px";
        vals.style.opacity = "1";
        arrow.style.display = "block";
        for (let i = 0; i < lst_elem.length; i++) {
          lst_elem[i].style.visibility = "hidden";
        }
      }
    }
    event.preventDefault();
}, false);

The if statement is currently working perfect but there is a problem in the else not initiating when pressed anywhere else except the side display.

You can also check the problem by going on andy.serra.us on your mobile.

Thanks for the help in advance.

Andrew Serra
  • 153
  • 14

0 Answers0