Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 05-17-2018, 08:51 AM
sstoney200's Avatar
sstoney200 sstoney200 is offline
Contributing Member
 
Join Date: 12-03-10
Location: Essex, UK
Posts: 279
iTrader: 0 / 0%
I need to create a website which can be navigated, but after a period of 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
 
Reply With Quote

Advertisement

Advertisement

Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Help to Create a Logo for website Thenewcoupons Web Design Lobby 3 03-16-2017 01:26 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 10:59 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC