The $_SESSION Variable and performance.navigation.type Property

[iwato]

Please open to this page and click on the image.  It will open to another page whereupon two pop-up light boxes will appear.  The goal of the following code is to suppress the pop-ups when, and only when, the image is clicked.  Obviously it fails.

.htaccess File

<IfModule mime_module>
    <Files overview.html>
        AddType application/x-httpd-ea-php56 .php .html
    </Files>
</IfModule>

this page - http://www.grammarcaptive.com/single_payment_acknowledgment.php

<?php
	session_start();
	$_SESSION['perform_nav'] = 1;
?>

Target Page - http://www.grammarcaptive.com/overview.html

<?php
	session_start();
?>
<script>
	var navtype = <?php echo $_SESSION['perform_nav']?>;
	if(typeof navtype != "undefined" && navtype !== null) {
		performance.navigation.type === 1;
	}
</script>

The Javascript  - http://www.grammarcaptive.com/_utilities/javascript/overview.js

if (performance.navigation.type === 0) {
			$.colorbox({opacity: '0.70', transition: 'elastic', speed: 700, width: 700, height: 'auto', scrolling: false, html:"<div id='welcome_slide'> <table> <tr> <td width=250 height='auto'> <img src='_images/freed_captive.png' height=200 width=200 /> </td> <td width=450 height='auto'> <h1>Hi!</h1><h2>My name is Roddy.</h2> <p class='welcome'>This is your gateway out of the prison of bad grammar.</p><p>Let me show you to the final gate!</p></td> </tr> </table> </div>",
				onClosed: function() {
					$("iframe.splash").colorbox({iframe: true, fastiframe: false, fixed: false, opacity: "0.65", open: true, rel: 'sweet', width: 700, height: 450, closeButton: true, href: function(){
							  var href = $(this).attr('src');
							  return href;
					}
				});
			}});
}

 

REQUEST: Can you suggest any adjustment that might produce the desired effect?

Roddy

Edited October 31, 2017 by iwato

[iwato]

It appears that I have asked a question about which the gurus of W3Schools are unwilling to respond.  But why?  One does not have to know the answer in order to discuss the issue.  Indeed, might the discussion not shed enough light to spark a flame and the answer?

Happy Halloween!

Roddy

[Ingolme]

I've been pretty busy so I've just been answering short questions that don't need a lot of research.

I think you probably intended to do an assignment here instead of a comparison.

if(typeof navtype != "undefined" && navtype !== null) {
	performance.navigation.type === 1;
}

I actually have never worked with the performance.navigation object, so I don't even know what it's for. I'll look it up once I have the time.

[iwato]

Yes, you are correct.  Unfortunately, it does not solve the problem.  The colorbox pop-up still appears.

in answer to your question:  one of the uses of performance.navigation.type is to control what happens when a user refreshes the page.  For example, go to http://www.grammarcaptive.com/overview.html and observe the pop-ups.  Then, refresh the window.  The pop-up do not reappear.  Then go to http://www.grammarcaptive.com/single_payment_acknowledgment.php and click on the image.  The pop-up reappear whether the overview.html has been loaded already or not.

I am trying to convince the browser to treat the call from single_payment_acknowledgment.php as a simple refresh.

i hope that you passed an enjoyable Halloween!

Roddy

Edited November 1, 2017 by iwato

[Ingolme]

You could use a sessionStorage variable to only open the popup once per session. I'd have to look into this in more detail later.

[iwato]

At the suggestion of Ingolme I have introduced a $_SESSION variable.  Unfortunately, the only affect that it appears to have is to prevent my Javascript from loading in Firefox and Chrome, this despite my continued ability to use Javascript  with Safari.  I simply do not understand.

 Perhaps I have become impatient.  Perhaps my desire to move forward has overcome my ability to think clearly and achieve my task.

Reference Page:  http://www.grammarcaptive.com/single_payment_acknowledgment.php

<?php
	session_start();
	$_SESSION['navtype'] = 1;
?>

Target Page:  http://www.grammarcaptive.com/overview.html

<?php
	session_start();
	$navtype = filter_var($_SESSION['navtype'], FILTER_VALIDATE_INT);
?>
<script>
	var navtype = <?php echo $navtype;?>;
</script>

Javascript Page for Target Page:  http://www.grammarcaptive.com/_utilities/javascript/overview.js

$( document ).ready(function() {
    console.log( "ready!" );
  if (navtype == 1) {
      $.colorbox({open:false});
  } else if (performance.navigation.type === 0) {
              $.colorbox({opacity: '0.70', transition: 'elastic', speed: 700, width: 700, height: 'auto', scrolling: false, html:"<div id='welcome_slide'> <table> <tr> <td width=250 height='auto'> <img src='_images/freed_captive.png' height=200 width=200 /> </td> <td width=450 height='auto'> <h1>Hi!</h1><h2>My name is Roddy.</h2> <p class='welcome'>This is your gateway out of the prison of bad grammar.</p><p>Let me show you to the final gate!</p></td> </tr> </table> </div>",
                  onClosed: function() {
                      $("iframe.splash").colorbox({iframe: true, fastiframe: false, fixed: false, opacity: "0.65", open: true, rel: 'sweet', width: 700, height: 450, closeButton: true, href: function(){
                                var href = $(this).attr('src');
                                return href;
                      }
                  });
              }});
  }
});

Roddy

Edited November 4, 2017 by iwato

[dsonesuk]

Missed ';' at end of echo statement

[iwato]

Yes and No.

Yes, I did miss it when I first posted it.

No, I caught it and reloaded it with the semi-colon.  I simply forgot to make the adjustment here.

In the end, it makes no difference.  The negative effects and the failed good effect remain unfortunately in tact.

Woe is me.

Roddy

p.s. I will correct the error above.

[Ingolme]

I was not referring to PHP sessions, I was talking about Javascript's local storage API, but using PHP probably works as well.

[iwato]

Could you not look at the PHP correspondence that I have created and suggest why it does not work.  All of the links provided above  are valid.

My THREE STEPS to Failed Nirvana.

1) Start a session with the reference page and pass a $_SESSION variable to the target page from the reference page.

2) In the target page create from the $_SESSION variable a Javascript variable and assign to it the value of the $_SESSION variable.

3) Load the page and upon completion execute a $(document).ready() function that checks the value of the variable and determines whether or not to allow $.colorbox to display.

Roddy

[dsonesuk]

You have PHP session code in a html page? is it setup to run php code in html document?

[iwato]

<IfModule mime_module>
    <Files overview.html>
        AddType application/x-httpd-ea-php56 .php .html
    </Files>
</IfModule>

The above code was placed in a .htaccess file in the same directory that contains all of the aforesaid files.

Edited November 4, 2017 by iwato

[dsonesuk]

Place the JavaScript code between <head>..</head> OR <body>...</body> not outside of these.

[iwato]

Although we are closer, I am afraid to say that we are almost there, because I have learned that , unless I know for sure,  the smallest matter can take an indefinite amount of time to repair.

Please click on the image after the following page opens http://www.grammarcaptive.com/single_payment_acknowledgment.php.

It would appear that the first Colorbox has been suppressed, but not the second.  

 if (navtype == 1) {
      $.colorbox({open:false});
} else if 

I have now tried to fix the problem by

1. doubling the content of the if-statement.
2. concatenating the same line of jQuery as $.colorbox({open:false}).colorbox({open:false});
3. adding the following second line of code:  

   $("iframe.splash").colorbox({open:false});

4. adding an onclose callback function to the first call to Colorbox using the same code in item 3.

All of the these produce the same half-positive result.

Any additional ideas?

Roddy

Edited November 5, 2017 by iwato

[Ingolme]

Let's start off at the very beginning. These are your requirements:

Quote

The goal of the following code is to suppress the pop-ups when, and only when, the image is clicked.

But you have another requirement:

Quote

go to http://www.grammarcaptive.com/overview.html and observe the pop-ups.  Then, refresh the window.  The pop-up do not reappear.

So to summarize your requirements:

Display popups on the page any time it loads except under the following conditions:

• The user arrived on the page from clicking that image.
• The user has refreshed the page.

Now we have to determine the following:

• How do we know that the user clicked on that image?
• How do we know that the page was refreshed?

The resulting logic should be very simple:

if(!clickedOnImage() && !pageRefreshed()) {
  showPopups();
}

function clickedOnImage() {
  // Return true if and only if the image was clicked
  // Return false otherwise
}

function pageRefreshed() {
  // Return true if and only if the page was refreshed
  // Return false otherwise
  return performance.navigation.type == 1;
}

function showPopups() {
  // All the code that creates the popups is in here
  // This code is irrelevant to the problem we're solving
}

How do you want to detect that the request came from the image? Is it alright to pass data in a query string or hash in the URL? You could make the image a link with the following href attribute: href="overview.html?fromimage=1" and then use the location.search property in Javascript to check for that value.

Another option, if you only care that it came from the page that the image is on rather than the image itself, is to check the document.referrer property. clickedOnImage() returns true of document.referrer is " http://www.grammarcaptive.com/single_payment_acknowledgment.php "