代码何时不应该运行？

Question

I am working on a project that is mainly a photo viewer for a photographer. The site starts with a very short video which fades out and the content fades in. The various sections of the website are accessed through a menu which triggers an ajax function that loads just that part of the page. The problem I am getting is that the video, which is only supposed to play once at the beginning, gets randomly triggered when clicking on the menu links. I don't understand this as the video has been faded out and hidden using javascript and jquery.

Here is the website (under construction):

http://maxruiz-portraits.com

var random = Math.floor(Math.random() * 24) + 1;
document.getElementById("front").src = "Images/PORTRAITS/Image" + random + ".jpg";

$("#content").hide();
$('#header').hide();

$(document).ready(function() {
  counter = random;
  // displayArrows();
  updateInfo(counter);

  var vid = document.getElementById("bgvid");

  function stopVideo() {
    vid.pause();
    $('#presentacion').delay(3000).hide();
    $("#bgvid").parent().hide()
    $("#bgvid").addClass('notVisible');
    $('#allIntro').hide();
  }

  setTimeout(stopVideo, 6000);

  function showSite() {
    $('#header').delay(1500).fadeIn(2000);
    $("#content").delay(1500).fadeIn(2000);
  }

  showSite();

  $('body,html').dblclick(function(e) {
    e.preventDefault();
  });

  $(document).on('click', 'nav a', function(e) {
    e.preventDefault();
    var url = this.href;
    $("nav a.current").removeClass("current");
    $(this).addClass("current");
    $('#container').remove();
    $('#content').load(url + ' #content', function() {
      if (url == 'http://maxruiz-portraits.com/contact11.html') {
        $('title').text('Portraits | Contact');
      } else if (url == 'http://maxruiz-portraits.com/gallery2.html') {
        $('title').text('Portraits | Gallery');
      } else if (url == 'http://maxruiz-portraits.com/about.html') {
        $('title').text('Portraits | About');
        $('#english').hide();
      } else if (url == 'http://maxruiz-portraits.com/bio.html') {
        $('title').text('Portraits | Bio');
      } else if (url == 'http://maxruiz-portraits.com/home.html') {
        $('title').text('Max Ruiz | Portraits');
      }
    }).hide().fadeIn('slow');
  });

  counter = random;

  document.addEventListener('touchstart', handleTouchStart, false);
  document.addEventListener('touchmove', handleTouchMove, false);
  var xDown = null;
  var yDown = null;

  function handleTouchStart(evt) {
    xDown = evt.touches[0].clientX;
    yDown = evt.touches[0].clientY;
  };

  function handleTouchMove(evt) {
    if (!xDown || !yDown) {
      return;
    }

    var xUp = evt.touches[0].clientX;
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;
    if (Math.abs(xDiff) + Math.abs(yDiff) > 150) { //to deal with to short swipes
      if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
        if (xDiff > 0) { /* left swipe */
          counter++;
          if (counter > 24) {
            counter = 1
          }

          $('#front').fadeOut(500, function() {
            getImage(function() {
              $('#front').fadeIn(500);
            });
          });
        } else { /* right swipe */
          counter--;
          if (counter < 1) {
            counter = 24
          }

          $('#front').fadeOut(500, function() {
            getImage(function() {
              $('#front').fadeIn(500);
            });
          });
        }
      } else {
        if (yDiff > 0) { /* up swipe */
          // window.location.href = '04MaxSitePortraits/index.html';
        } else { /* down swipe */
        }
      }
      /* reset values */
      xDown = null;
      yDown = null;
    }
  };

  $(document).on('click', '.buttons', function(e) {
    e.preventDefault();
    var id = e.target.id;
    if (id == "next") {
      counter++;
    } else if (id == "previous") {
      counter--;
    }
    if (counter < 1) {
      counter = 24;
    } else if (counter > 24) {
      counter = 1
    }

    $('#front').fadeOut(500, function() {
      getImage(function() {
        $('#front').fadeIn(500);
      });
    });

    updateInfo(counter);
  });

  getImage = function(cb) {
    var img = new Image();
    img.onload = function() {
      document.getElementById("front").src = img.src;
      cb();
    };
    img.src = "Images/PORTRAITS/Image" + counter + ".jpg";

    // displayArrows();
  }

  // function displayArrows() {
  //    if (counter == 1) {
  //        $( '#previous' ).css('display', 'none');
  //    }
  //    else if (counter > 1 && counter < 31) {
  //        $( '#previous' ).css('display', 'block');
  //        $( '#next' ).css('display', 'block');
  //    }
  //    else if (counter == 31) {
  //      $( '#next' ).css('display', 'none');
  //    }
  // }

  $(document).on('click', '.littleImages', function(e) {
    $('#gall').removeClass("current");
    $('#home').addClass("current");

    var imageSource = $(this).attr('src');
    // find the not square picture from the square source
    var n = imageSource.lastIndexOf('/');
    var result = imageSource.substring(n + 1);
    var imageSourceFinal = 'Images/PORTRAITS/' + result;

    // find the counter in order to know if it's the last or the first picture and hide corr arrow

    counter = imageSource.match(/\d+/g);
    $('#container').remove();
    $('#content').load('index.html' + ' #content', function() {
      $('#front').attr('src', imageSourceFinal);

      // if (counter == 1) { $( '#previous' ).css('display', 'none');}
      // if (counter == 31){ $( '#next' ).css('display', 'none');}

      // updateInfo(counter);
      testFunction(counter[0]);
    }).hide().fadeIn('slow');
  });

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
    $("#front").on("mousedown", function() {
      updateInfo(counter);
      $('#front').fadeTo(300, 0.3);
      $('#info').fadeTo(300, 1);
      setTimeout(infoMobileOut, 1000);
    });
  } else {
    $(document).on('mouseover', '#front', function() {
      $('#front').fadeTo(300, 0.3);
      $('#info').fadeTo(300, 1);
    });

    $(document).on('mouseout', '#front', function() {
      $('#front').fadeTo(300, 1);
      $('#info').fadeTo(300, 0);
    });
  }

  function infoMobileOut() {
    $('#front').fadeTo(300, 1);
    $('#info').fadeTo(300, 0);
  }

  function testFunction(number) {
    switch (number) {
      case "1":
        $('#info').text('Photo 1');
        break;
      case "2":
        $('#info').text('Photo 2');
        break;
      case "3":
        $('#info').text('Photo 3');
        break;
      case "4":
        $('#info').text('Photo 4');
        break;
      case "5":
        $('#info').text('Photo 5');
        break;
      case "6":
        $('#info').text('Photo 6');
        break;
      case "7":
        $('#info').text('Photo 7');
        break;
      case "8":
        $('#info').text('Photo 8');
        break;
      case "9":
        $('#info').text('Photo 9');
        break;
      case "10":
        $('#info').text('Photo 10');
        break;
      case "11":
        $('#info').text('Photo 11');
        break;
      case "12":
        $('#info').text('Photo 12');
        break;
      case "13":
        $('#info').text('Photo 13');
        break;
      case "14":
        $('#info').text('Photo 14');
        break;
      case "15":
        $('#info').text('Photo 15');
        break;
      case "16":
        $('#info').text('Photo 16');
        break;
      case "17":
        $('#info').text('Photo 17');
        break;
      case "18":
        $('#info').text('Photo 18');
        break;
      case "19":
        $('#info').text('Photo 19');
        break;
      case "20":
        $('#info').text('Photo 20');
        break;
      case "21":
        $('#info').text('Photo 21');
        break;
      case "22":
        $('#info').text('Photo 22');
        break;
      case "23":
        $('#info').text('Photo 23');
        break;
      case "24":
        $('#info').text('Photo 24');
        break;
    }
  }

  function updateInfo(number) {
    switch (number) {
      case 1:
        $('#info').text('Photo 1');
        break;
      case 2:
        $('#info').text('Photo 2');
        break;
      case 3:
        $('#info').text('Photo 3');
        break;
      case 4:
        $('#info').text('Photo 4');
        break;
      case 5:
        $('#info').text('Photo 5');
        break;
      case 6:
        $('#info').text('Photo 6');
        break;
      case 7:
        $('#info').text('Photo 7');
        break;
      case 8:
        $('#info').text('Photo 8');
        break;
      case 9:
        $('#info').text('Photo 9');
        break;
      case 10:
        $('#info').text('Photo 10');
        break;
      case 11:
        $('#info').text('Photo 11');
        break;
      case 12:
        $('#info').text('Photo 12');
        break;
      case 13:
        $('#info').text('Photo 13');
        break;
      case 14:
        $('#info').text('Photo 14');
        break;
      case 15:
        $('#info').text('Photo 15');
        break;
      case 16:
        $('#info').text('Photo 16');
        break;
      case 17:
        $('#info').text('Photo 17');
        break;
      case 18:
        $('#info').text('Photo 18');
        break;
      case 19:
        $('#info').text('Photo 19');
        break;
      case 20:
        $('#info').text('Photo 20');
        break;
      case 21:
        $('#info').text('Photo 21');
        break;
      case 22:
        $('#info').text('Photo 22');
        break;
      case 23:
        $('#info').text('Photo 23');
        break;
      case 24:
        $('#info').text('Photo 24');
        break;
    }
  }

  $(document).on('click', '#enButton', function() {
    $('#english').fadeIn();
    $('#french').fadeOut();
  });

  $(document).on('click', '#frButton', function() {
    $('#english').fadeOut();
    $('#french').fadeIn();
  });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <a href="index.html">
    <title>Max Ruiz | Portraits</title>
  </a>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" />
  <link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="mobilePad_style.css" />
</head>
<body>
  <div id="allIntro">
    <div>
      <video playsinline autoplay loop id="bgvid" class="visible">
          <source src="Images/PORTRAITS/introportraits.mp4" type="video/mp4">
        </video>
    </div>
    <div id="presentacion">
      <h1>PORTRAITS</h1>
      <h2>PHOTOGRAPHIES </br id="break">DE MAX RUIZ</h2>
    </div>
  </div>
  <div id="header">
    <div id="title">
      <h1>MAX RUIZ <span id="parana">PORTRAITS</span></h1>
    </div>
    <div id="infoMob">
      <a href="info.html"><img src="Images/infoMob.png" /></a>
    </div>
    <nav class="cf" id="menu">
      <ul>
        <li><a href="contact11.html">CONTACT</a></li>
        <li><a href="bio.html">BIO</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="gallery2.html" id="gall">GALLERY</a></li>
        <li><a href="index.html" id="home" class="current">HOME</a></li>
      </ul>
    </nav>
  </div>
  <section id="content">
    <div id="container">
      <div id="imagewrap">
        <img src="Images/PORTRAITS/Image1.jpg" id="front" class="bigImage" />
        <div id="info">Verde</div>
        <div id="previous" class="buttons"></div>
        <div id="next" class="buttons"></div>
      </div>
    </div>
  </section>

  <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
  <script type="text/javascript" src="JavaScript5.js"></script>
</body>
</html>

Any ideas as to why the video is reloaded when clicking on the menu links? Thank you.

Answer 1

Your Problem is, that you disable your video after 6 seconds, but your content is visible after 3,5 seconds. Your site will actually work after 6 seconds, but if you try to click a link before 6 seconds, you will see the video once more, since you cleared the content that was above the video and fading in new content. Try to change this line:

setTimeout(stopVideo, 6000);

to maybe

setTimeout(stopVideo, 3500);

maybe you need further changes, but I think you got the idea of what is going wrong