Solved

How do i create a script to automatically switch to another web page in the same folder on the web server?

Posted on 2011-02-10
10
393 Views
Last Modified: 2012-05-11
I'm trying to find a way to automatically change to another another web page without adding code to each page.  I would like to have one "master" page or script control what and when each page gets displayed.  The reason i don't want to hard code the pages is because they change frequently and i'm trying to allow the different departments to update the web site files themselves.

The hosting web server is 2008 R2 with PHP 5 installed.

I'm trying to display these web sites on a Samsung 400DXn-2 LCD that has a PC built in running Windows XPe with MagicInfo-i on top of that.

The content starts out as a MS Word document and has been getting saved as a "filename.HTM" file.  The goal was to copy the new htm file to a directory on the web server and have the script automatically pick up on the file changes (adds or deletes) and add it to the page rotation.

I'm able to get this work work with images using PHP from http://panmental.de/public/programming_projects/Slideshow%20script%20in%20PHP/ but am unable to figure this out for HTM or HTML pages.
0
Comment
Question by:timkrampe1
  • 3
  • 2
  • 2
  • +2
10 Comments
 
LVL 28

Expert Comment

by:strickdd
ID: 34864697
I believe what you are wanting to do would best be accomplished through iFrames. Simply have your "masterpage" contain the links to all detected documents and load the content in the iFrame when they click the link.
0
 
LVL 1

Author Comment

by:timkrampe1
ID: 34865154
Ok, i can get the different pages to change every so many seconds when it is hard coded, but how do you think i should go about querying the folder for the filenames and dumping that into the iframes "masterpage" slideshow?
0
 
LVL 28

Expert Comment

by:strickdd
ID: 34865427
If you make an AJAX call to your script that returns a simple string array of the pages to display and update the list rotating the iFrame you should be golden.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 26

Expert Comment

by:jar3817
ID: 34865518
Sounds like you need a content management system. So all pages are in a database and can be updated whenever on the fly.
0
 
LVL 6

Expert Comment

by:hexer4u
ID: 34866243
If you want to always go to the newest file, then you need a PHP script that lists all files in a directory (the directory where you save your html or whatever files), and sort them by last modification date (that is filemtime() function in php), descending. You would now have the first entry as the newest one, so you could do whatever you wish with it, like
echo file_get_contents('filename.html');

Open in new window

to show it's contents.
Now, you could have this functionality inside a "loader.php" file, and another "index.php".

In the loader.php you would always print the name of the latest file.

In the index.php file you would have a nice <iframe> inside it that covers the entire page. Then, using Ajax you could call the loader.php file every... 10 seconds, and see if the current src="xxx" attribute of the iframe is the same as the one from the loader.php. If it isn't, you change the src of the iframe with the one from loader.php.

This should be easy enough to implement, but you have to know a bit of Javascript and Ajax (I suggest jQuery for both).
0
 
LVL 1

Author Comment

by:timkrampe1
ID: 34866470
I'm in agreement that iframes will probably be the way to go for this project because i can load several different content types in the window and use it in both "quality" and "safety" sections that i need to display.  I'm looking into jQuery now.
0
 
LVL 6

Expert Comment

by:hexer4u
ID: 34866911
function hints for jQuery (what you'll need):
.ready()
.load()
.ajax()
.attr()

and also take a look at javascript's setInterval() and setTimeout() functions if you don't know them. You'll need these to delay/repeat function calls
0
 
LVL 1

Author Comment

by:timkrampe1
ID: 34874630
I've tried my best with jquery and just can't seem to figure it out.  I have almost figured it out in PHP though.  I only have one issue.  I don't know to pass the variable into the iframe source.  Here is the index.php file that has the iframe in it.

<html>
<head>
<script type="text/javascript" src="loader.php"></script>
<script type="text/javascript">

var curpage=0
var pagearray = new Array():

function rotatepages(){
document.getElementById('slideshow').setAttribute('src',pagearray[curpage])
curpage=(curpage<pagearray.length-1)? curpage+1 : 0
}

window.onload=function(){
setInterval("rotatepages()",5000)
}

</script>
</head>

<body>

<iframe id="slideshow" src="start_qa.php" width="100%" height="100%" align="middle"
frameborder="0" scrolling="no">You need a Frames Capable browser to view this content.</iframe>

</body>
</html>

And here is the loader.php file that lists the .htm file names and passes them to the javascript in index.php.

<?php
function returnpages($dirname=".") {
$pattern="(\.htm$)"; //valid web extensions
$files = array();
$curpage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'pagearray['.$curpage.']="'.$file .'";';
$curpage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var pagearray=new Array();'; //Define array in JavaScript
returnpages() //Output the array elements containing the image file names
?>
0
 
LVL 6

Accepted Solution

by:
jjperezaguinaga earned 500 total points
ID: 34875882
Greetings timkrampe1,
No need to reinvent the wheel my friend! Or in this case, recode the script. See, I know Jquery can be hard when you are starting, but it’s actually pretty easy after trying it a little bit. Now, as hexer4u said, those magic functions will do your trick. I personally used the load one to help you.

Now, the following script does 2 things: first, let’s you load information from a static file (in this case, file.html); second, through the jquery load fuction, I send parameters to a ajax.php file and get them back, and then write the answer in an iframe -inside the same webpage and with our lovely ajax magic-

Feel free to adapt this script to your needs, as I’m attaching all the files and styles as well.

A preview of what can be achieved.
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">  
<head>  
<title> Loading the loads</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>
		jQuery(document).ready(function($){
				$('#target').click(function() {
					$('#target p').load('file.html');
				});
				
				$('#submit').click(function() {
					var name = $('#name').val();
					$.ajax({
						type: "POST",
						url: "ajax.php",
						data: "name="+name,
						success: function(msg){
						alert( "Loading an iframe Mr. " + msg );
						$('body').append('<iframe src="index.php?name='+name+'" width="100%" height="100%" align="middle" frameborder="0" scrolling="no">You need a Frames Capable browser to view this content.</iframe>');
						}
					});				
				});
		});
		</script>


</head>  
<body> 

<div class="screenSize">
	<div class="center"> 
		<div class="content"> 
		<p> Good day <span> <?php if (isset($_GET['name'])) echo $_GET['name']; else echo 'John!';?> </span> This content is inside a paragraph tag and can be modified in this file.</p>
		</div>
		<div class="content blue" id="target"> 
		<p> Click me! Pretty please? With a cherry on the top? </p>
		</div>
		<div class="content green"> 
		<p> What's your name?</p><br />
		<input type="text" id="name"> 
		<p id="submit"> Click me to submit! </p>
		</div>
	</div>
</div>


</body>
</html>

Open in new window


ajax.php
<?php if (isset($_POST['name'])) {
		echo $_POST['name'];
	  } else {
		echo 'failure :(';
	  } ?>

Open in new window


Hope it helped!

Best regards,
-JJ

ajax.zip
0
 
LVL 6

Expert Comment

by:jjperezaguinaga
ID: 34875898
In order to see how I append the new Iframes you will need the style.css, so I recommend to download all the source files contained in the ajax.zip. Here are the styles if you don't want to though:

* {	margin: 0;	padding: 0; }
* body { margin: 0; padding: 0;  background-color: #dfdfdf; font-family: Arial, Helvetica, sans-serif;}

.screenSize {
	width: 100%;
	background-color: black;
}

.center{
	margin: 50px auto;	padding: 0px; height: 100px; width: 1024px; 
	background-color: white; position: absolute; left: 50%; margin-left: -512px;
}

.content {
	width: 29%;
	background-color: red; color: white; float: left; margin: 10px; padding: 10px; float: left; height: 60px;
}

span {font-size: 1.4em; color: black;}
input {width: 50%; float: left;}

.blue{
	background-color: blue;
}

.blue p { cursor: pointer;}

.green {
	background-color: green;
}

iframe {
position: absolute;
margin-top: 150px;
}
#submit { cursor: pointer; float: left; margin-left: 5px;}

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question