Announcement

Collapse
No announcement yet.

JavaScript - Error looping back from video after inactivity

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • JavaScript - Error looping back from video after inactivity

    I need to create a website which can be navigated, but after a period of inactivity, must loop a video replacing the web content. When a user is to move the mouse or click etc, I need the user to then be able to renavigate the website again.

    I have the website test running OK, running from a single page using a function to switch display style of 'home' and 'smartfm' based on the click of the smart_fm_btn(). So between two divs, the website is running fine.

    Because this runs from the same page, the inactivity also works really well, and launches the video after 5 seconds of nothing happening.

    The issue I have is that I cannot reload the page and get back to the website from the video.

    my code as is:

    HTML Code:
    <div class="container">
              <div id="content" class="content">
                 <!--HOME PAGE-->
                 <div id="home" style="text-align:center; display:block">
                    <img class="logo" src="images/logo.jpg" />
                    <a class="button" href=""><img src="images/one-spie.jpg" /></a>
                    <a onclick="smart_fm_btn()" class="button" href="#"><img src="images/smart-fm.jpg" /></a>
                    <a class="button" href=""><img src="images/who-we-are.jpg" /></a>
                 </div>
                 <!--END HOME PAGE-->
                 <!--SMART FM PAGE-->
                 <div id="smartfm" style="text-align:center; display:none">
                    <img class="nav" src="images/nav.jpg" />
                    <img class="logo-inner" src="images/logo.jpg" />
                    <div class="left">
                       <a id="enegyModal" href="#"><img class="nav" src="images/energy.jpg" /></a>
                    </div>
                    <div class="right">
                       <img class="nav" src="images/predictive.jpg" />
                    </div>
                    <div id="myModal" class="modal">
                       <!-- Modal content -->
                       <div class="modal-content">
                          <span class="close">&times;</span>
                          <p>Test the Modal..</p>
                       </div>
                    </div>
                    <!--END SMART FM PAGE-->
                 </div>
              </div>
          </div>
    Code:
     var timeoutID;
                
               function setup() {
                   this.addEventListener("mousemove", resetTimer, false);
                   this.addEventListener("mousedown", resetTimer, false);
                   this.addEventListener("keypress", resetTimer, false);
                   this.addEventListener("DOMMouseScroll", resetTimer, false);
                   this.addEventListener("mousewheel", resetTimer, false);
                   this.addEventListener("touchmove", resetTimer, false);
                   this.addEventListener("MSPointerMove", resetTimer, false);
                
                   startTimer();
               }
               setup();
                
               function startTimer() {
                   // wait 5 seconds before calling goInactive
                   timeoutID = window.setTimeout(goInactive, 5000);
               }
                
               function resetTimer(e) {
                   window.clearTimeout(timeoutID);
                
                   goActive();
               }
                
               function goInactive() {
                    document.getElementById("content").innerHTML="<object type='text/html' data='video.html' ></object>";
        
               }
                
               function goActive() { 
       
       
                   startTimer();
                
                
               }
       
      //function to switch display styles 
      function smart_fm_btn() {
      var x = document.getElementById("smartfm");
      if (x.style.display === "none") {
      x.style.display = "block";
      } else {
      x.style.display = "none";
      }
       
      var y = document.getElementById("home");
      if (y.style.display === "block") {
      y.style.display = "none";
      } else {
      y.style.display = "block";
      }
       
        }
    I can edit and use the following innerHTML element to get back to the website from video, but problem is I then can't navigate anywhere and get caught in an infinite loop of refreshing the goActive function.


    Code:
     function goActive() { 
       
       
        document.getElementById("content").innerHTML='<div id="home" style="text-align:center; display:block"><img class="logo" src="images/logo.jpg" /><a class="button" href=""><img src="images/one-spie.jpg" /></a><a onclick="smart_fm_btn()" class="button" href="#"><img src="images/smart-fm.jpg" /></a><a class="button" href=""><img src="images/who-we-are.jpg" /></a></div><div style="text-align:center; display:block"><img class="nav" src="images/nav.jpg" /><img class="logo-inner" src="images/logo.jpg" /><div class="left"><a id="enegyModal" href="#"><img class="nav" src="images/energy.jpg" /></a></div><div class="right"><img class="nav" src="images/predictive.jpg" /></div><div id="myModal" class="modal"><!-- Modal content --><div class="modal-content"><span class="close">&times;</span><p>Test the Modal..</p></div>'
       
       
       
                   startTimer();
                
                
               }
    ]

    Can anyone see how I can manage this task more logically? I've stared at this for so long now I've lost any idea how to progress.

    Many thanks in advance,
    Jamie
    Rent Villas Nerja Spain Rent Villas in Nerja, Spain
    Deep House Radio London UK Blend stream the very best deep and funky house 24/7!

  • #2
    Hi there ssstoney2001,


    unfortunately, HTMLForums is dead in all but name.

    I would suggest that you take your problem to a live forum such as...



    ~ the original bald headed old fart ~

    Comment

    Working...
    X