asked on

jQuery UI dialog box autoopen does not work when the page loads

I am trying to show a auto pop up on the homepage as soon as the page loads. I am using jQuery UI but its not showing. The website is built in WordPress. here is the website link dev.startingpointnh.org

here is the code I am using in header.php

	    <?php if(is_home() || is_front_page()) { ?>
		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
		<script type="text/javascript">
  $(document).ready(function(){
   $('#dialog').dialog({
		autoOpen: true,
		modal: true,
		width: 620,
		buttons: {
		"Close This Message": function() {
		 $( this ).dialog( "close" );
		}
	}
	});
  });
</script>
<?php } ?>

Open in new window

and in the footer.php I have

		<?php if(is_home() || is_front_page()) { ?>
	<div id="dialog" title="Starting Point Safety Warning">
	<h1 style="text-align: center; ">
	Do not use this website if you suspect your computer is being monitored.</h1>
<div style="text-align: center; ">
	<strong>Website and email history may be viewable even if you delete your browser history and delete files.<br />
	Access a safe computer to use the internet.</strong></div>
<div style="text-align: center; ">
	&nbsp;</div>
<div style="text-align: center; ">
	<strong>Please note the &quot;Leave this site quickly&quot; item on the top of every page should you need to close this website quickly.</strong></div>
<div style="text-align: center; ">
	&nbsp;</div>
<h2 style="text-align: center; ">
	Warning!</h2>
<div style="text-align: center; ">
	<strong>If you are in immediate danger, please dial 911.</strong></div>
<div style="text-align: center; ">
	<strong>24-Hour Hotline 800.336.3795</strong></div>
<div style="text-align: center; ">
	&nbsp;</div>
<div style="text-align: center; ">
	<em>Close window by pressing ESC key or button below.</em></div>
	</div> 
		<?php }?>

Open in new window

What am I missing?

Thanks and appreciate it

ASKER CERTIFIED SOLUTION

Robert Schutt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tammu

ASKER

Thanks that worked perfectly thanks. I do have one more question, How can I make the dialog box appear only one time. Now every time the home page is loaded the popup shows. I just want to show only once.

Thanks again

Robert Schutt

If you want to show it once per "browser" you could do it client side with a cookie but maybe that's a bit old school...

If you want to show it once per session you could add server side code to store a session variable in php and add a check for that variable to your current check: if(is_home() || is_front_page())

Robert Schutt

a little example taken from http://php.net/manual/en/session.examples.basic.php:

<?
error_reporting(-1);
session_start();
if (!isset($_SESSION['count'])) {
  $_SESSION['count'] = 0;
} else {
  $_SESSION['count']++;
}
?>

Open in new window

Then your check could become:

<?php if((is_home() || is_front_page()) && $_SESSION['count'] == 0) { ?>

Open in new window

To test you can show the counter on your page:

counter: <?= $_SESSION['count'] ?>

Open in new window

You may also need some client side code because somebody could click a link and then click the back button...

Tammu

ASKER

Thanks