The JS script presented in this page can be used to execute a JavaScript function when the page visibility state changes (when it is opened another window, or focus again this page); the function is whenVisChg(), see the comments in code.

Script code - click to select it

<script>
//JS code from: https://coursesweb.net/javascript/
// Defines a handler for page visibility changes
var vis_chg = (function(){
  var stateKey, eventKey, keys = {
    hidden: 'visibilitychange',
    webkitHidden: 'webkitvisibilitychange',
    mozHidden: 'mozvisibilitychange',
    msHidden: 'msvisibilitychange'
  };
  for(stateKey in keys){
    if(stateKey in document){
      eventKey = keys[stateKey];
      break;
    }
  }
  return function(c){
    if(c){
      document.addEventListener(eventKey, c);
      //document.addEventListener('focus', c); //for when focus again this page
    }
    return !document[stateKey];
  }
})();

// Gives the initial state
var page_vstate = vis_chg() ?'visible' :'not-visible';

vis_chg(function(){
  var re_vchg = vis_chg(); //FALSE=leaves the page; TRUE=re-enter in page
  console.log(new Date, 'vis_chg: ', re_vchg); //for debug in console
  page_vstate = re_vchg ?'visible' : whenVisChg();
});

//This function is executed when the page changes visibility state
function whenVisChg(){
  document.title ='not-visible';  //changes page title in browser

  //HERE you can set your code
  alert('page visibility state changed');

  return 'not-visible';
}
</script>
- To test the script, click on , or just open a new tab /window in your browser. The Title of this page in browser will be changed and an alert message box will be displayed on this page.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Detect when page visibility state is changed

Last accessed pages

  1. PHP getElementById and getElementsByTagName (29611)
  2. Contact page - CoursesWeb (19293)
  3. Tabs effect with CSS (19996)
  4. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (26230)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (78985)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1769)
  2. Tabs effect with CSS (1721)
  3. Contact page - CoursesWeb (1718)
  4. Insert, Select and Update NULL value in MySQL (837)
  5. PHP getElementById and getElementsByTagName (519)