?
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
Medium Priority
?
405 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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 2000 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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

771 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