HTML + PHP + JavaScript [Archief]

Fck_

23 February 2012, 18:36

Hallo, ik heb een probleempje.

Ik heb volgende php code:

<html>
<head>
<title>NWLab Digital Signage</title>
<link rel="stylesheet" type="text/css" href="CSS/index.css" title="Style">
<script src="JQUERY/khlifeKLOK.js"></script>
<script src="JQUERY/delijnKLOK.js"></script>
</head>

<body onload="startTijd();deLijnTijd();">

<div id="header">
<div id="khlife">
<table><tr>
<td id=rightBorder width=350px><p><b>KHL</b>ive</p></td>
<td><div id="khlifeclock"></div></td>
<td>IK BEN EEN KLOK (Eigenlijk niet, ik word een klok.)</td>
</tr></table>
</div>
</div>

<div id="container">
<?php include("slideshow.php"); ?>
</div>

<div id="footer">
<p>Footer</p>
</div>

</body>
</html>

Normaal toont deze vanboven in de header een Javascript klokje, maar dit doet hij niet. Als ik de include regel in de container (<?php include("slideshow.php"); ?>) weghaal, dan toont hij het klokje wel .. Ik weet niet hoe het komt :( .

(Note, slideshow.html bevat ook javascript).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<?php
?>
<head>
<title>SiteShow 1.0</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" type="text/css" href="/CSS/slideshow.css" title="Style">

<script type="text/javascript">
var current_idx = 0;
var slides = new Array();
var menuwin;
var show_timer;
var menu_timer;
var menu;
var content;
var loaded = true;

// SLIDES.
// ELKE SLIDE HEEFT 3 WAARDEN.
// 1. Tijd in seconden.
// 2. Titel van de navigatie.
// 3. Link naar de pagina.
slides[1] = new Array(15, "De Lijn Realtime", "http://screen.vlan77.delijn.php");
slides[2] = new Array(15, "NMBS Realtime", "http://screen.vlan77.be/nmbs.php");
slides[3] = new Array(15, "khleuven.php", "http://screen.vlan77.be/khleuven.php");
//// QSDF #### DEZE LIJN LATEN STAAN ###

function MenuInit() {
var html = "";
for(idx=1; idx<slides.length; idx++) {
html += '<a href="javascript:Navigate('+idx+')">' +
slides[idx][1] + "</a><br />\n";
}
document.getElementById("slides").innerHTML = html;
menu.style.display = "block";
}

function MenuShow() {
clearTimeout(menu_timer);
opacity('menu', 0, 100, 10);
menu_timer = setTimeout("MenuHide()", 3500);
}

function MenuHide() {
opacity('menu', 100, 0, 10);
}

function Pause() {
clearTimeout(show_timer);
document.getElementById('play').style.display = "block";
document.getElementById('pause').style.display = "none";
}

function Navigate(slide_idx) {
clearTimeout(show_timer);
if (current_idx == 0) {
if (!slide_idx) { slide_idx = 1; }
current_idx = slide_idx;
content.src = slides[current_idx][2];
document.getElementById('play').style.display = "none";
document.getElementById('pause').style.display = "block";
show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000);
return;
}

if (slide_idx) {
current_idx = slide_idx;
content.src = slides[current_idx][2];
document.getElementById('play').style.display = "block";
document.getElementById('pause').style.display = "none";
return;
}

loaded = false;
current_idx++;
if ( current_idx == slides.length) { current_idx = 1; }
opacity('content', 100, 0, 500);
document.getElementById('play').style.display = "none";
document.getElementById('pause').style.display = "block";
show_timer = setTimeout("Navigate()", slides[current_idx][0]*1000);
return;
}

function opacity(id, opacStart, opacEnd, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;

if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
if (opacEnd == 0) { setTimeout("FadeOutTrigger('"+id+"')",((timer-1) * speed));; }
} else if(opacStart < opacEnd) {
if (opacStart == 0) { FadeInTrigger(id); }
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}

function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function FadeOutTrigger(id) {
switch(id) {
case "menu":
document.getElementById(id).style.display = "none";
break;
case "content":
content.src = slides[current_idx][2];
break;
default:
break;
}
}

function FadeInTrigger(id) {
switch(id) {
case "menu":
document.getElementById(id).style.display = "block";
break;
case "content":
break;
default:
break;
}
}

function FadeInContent() {
if (!loaded) {
opacity('content', 0, 100, 50);
loaded = true;
}
}

function LoadTrigger() {
menu = document.getElementById('menu');
content = document.getElementById('content');
Navigate();
MenuInit();
MenuShow();
}
window.onload = LoadTrigger;
</script>

</head>
<body class="siteshow">
<iframe id="content" name="content" style="width:100%; height:100%;" frameborder="no" scrolling="auto" src="" onmouseover="MenuShow();" onload="FadeInContent();" ></iframe>
<div id="menu">
<div id="title">Navigatie</div>

<div id="slides">TEST</div>
<p>
<input id="pause" class="button" style="display:block;" type="button" value="pause" onclick="Pause()" />
<input id="play" class="button" style="display:none;" type="button" value="play" onclick="Navigate()" />
</p>
</div>
</body>
</html>

Kan iemand me op weg helpen ?