Refreshen met onderstaand script werkt niet wanneer ik het in de broncode plaats, echter apart werkt het volledig naar behoren.
Code: Selecteer alles
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="mootools.js">
</script>
<title>
Testpagina
</title>
<script type="text/javascript">
//<![CDATA[
function getResult ()
{
var url = 'nu&straks.php';
new Ajax(url,
{
method: 'GET',
update: $('result')
}).request();
}
window.addEvent('domready', function ()
{
getResult();
var interval = setInterval(getResult, 5000);
});
//]]>
</script>
</head>
<body>
<div id="result">
<?
require("config.php");
$db->open("SELECT artist, title
FROM songlist
WHERE (songlist.songtype='S')
ORDER BY date_played DESC
LIMIT 1 ");
while($nu = $db->row())
{
echo " Nu ---> " . $nu["artist"] . " - " ;
echo " " . $nu["title"] . " <br /> ";
}
$db->open("SELECT songlist.*, queuelist.requestID as requestID
FROM queuelist, songlist
WHERE (queuelist.songID = songlist.ID)
AND (songlist.songtype='S')
ORDER BY queuelist.sortID ASC",1);
while($row = $db->row())
{
if($row["requestid"]!=0) $verz="<font color=\"#FF6633\"> !verzoek!</font>";
echo " Straks---> ".$row["artist"]." - ".$row["title"]."$verz ";
}
?>
</div>
</body>
</html>
De template die ik gebruik maakt gebruik van <div></div> en ik wil het stukje nu juist daarin verversen...
broncode
Code: Selecteer alles
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="mootools.js">
</script>
<title>
Testpagina
</title>
<script type="text/javascript">
//<![CDATA[
function getResult ()
{
var url = 'index2.php';
new Ajax(url,
{
method: 'GET',
update: $('result')
}).request();
}
window.addEvent('domready', function ()
{
getResult();
var interval = setInterval(getResult, 5000);
});
//]]>
</script>
</head>
<body>
<div id="wrapper">
<div id="top">
</div>
<div id="content">
<div id="header">
</div>
<div id="menu">
<ul>
<li><a href="listen.pls">Listen with Winamp </a></li>
<lm><a href="listen.asx">Listen with Mediaplayer</a></lm>
<lr><a href="listen.ram">Listen with Realplayer</a></lr>
<ln><a href="#">blaat</a></ln>
<ln><a href="#">schaap</a></ln>
<ln><a href="#">blaat</a></ln>
</ul>
</div>
<div id="stuff">
<br /><br />
<?
require("config.php");
$db->open("SELECT artist, title
FROM songlist
WHERE (songlist.songtype='S')
ORDER BY date_played DESC
LIMIT 1 ");
while($nu = $db->row())
{
echo " Nu ---> " . $nu["artist"] . " - " ;
echo " " . $nu["title"] . " <br /> ";
}
$db->open("SELECT songlist.*, queuelist.requestID as requestID
FROM queuelist, songlist
WHERE (queuelist.songID = songlist.ID)
AND (songlist.songtype='S')
ORDER BY queuelist.sortID ASC",1);
while($row = $db->row())
{
if($row["requestid"]!=0) $verz="<font color=\"#FF6633\"> !verzoek!</font>";
echo " Straks---> ".$row["artist"]." - ".$row["title"]."$verz ";
}
?>
<br /><br />
Just another version
<br /><br />
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit.
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit.
<br /><br />
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
en de style
Code: Selecteer alles
/**************************************************/
/* Body and Wrapper */
/**************************************************/
body {
background: #000099 url(images/back.png) top center repeat-x;
margin: 0;
padding: 0;
font: normal 8pt/13pt verdana, arial,sans-serif;
}
#wrapper {
margin: 0 auto;
width: 800px;
padding: 0;
text-align: left;
}
/**************************************************/
/* Top Piece */
/**************************************************/
#top {
background: url(images/bgtop.png) top center no-repeat;
width: 800px;
height: 78px;
}
/**************************************************/
/* Content
another wrapper that holds all the content */
/**************************************************/
#content {
background: url(images/bgmiddle.png) center repeat-y;
width: 766px;
height: 100%;
padding: 0px 17px 0px 17px;
}
/**************************************************/
/* All the content */
/**************************************************/
#header {
background: url(images/header2.png) top center no-repeat;
width: 746px;
height: 106px;
margin: 0px 0px 10px 0px;
padding: 60px 0px 0px 20px;
color: white;
font-size: 50px;
text-align: ;
}
/* Menu */
#menu {
width: 200px;
height: 100%;
margin-left: 10px;
float: left;
text-align: left;
}
#menu li a {
height: 37px;
voice-family: "\"}\"";
voice-family: inherit;
height: 29px;
text-decoration: none;
text-align: left;
}
#menu lm a {
height: 37px;
voice-family: "\"}\"";
voice-family: inherit;
height: 29px;
text-decoration: none;
text-align: left;
}
#menu lr a {
height: 37px;
voice-family: "\"}\"";
voice-family: inherit;
height: 29px;
text-decoration: none;
text-align: left;
}
#menu ln a {
height: 37px;
voice-family: "\"}\"";
voice-family: inherit;
height: 29px;
text-decoration: none;
text-align: left;
}
#menu ln a:link, #menu ln a:visited {
color: navy;
display: block;
background: url(images/off.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: center;
}
#menu li a:link, #menu li a:visited {
color: navy;
display: block;
background: url(images/off2.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: center;
}
#menu lm a:link, #menu lm a:visited {
color: navy;
display: block;
background: url(images/off3.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: center;
}
#menu lr a:link, #menu lr a:visited {
color: navy;
display: block;
background: url(images/off4.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: center;
}
#menu ln a:hover {
color: blue;
background: url(images/on.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: center;
}
#menu li a:hover {
color: blue;
background: url(images/on2.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: center;
}
#menu lm a:hover {
color: blue;
background: url(images/on3.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: center;
}
#menu lr a:hover {
color: blue;
background: url(images/on4.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
#stuff {
background: url(images/texttop.png) top left no-repeat;
width: 520px;
margin: 0px 0px 0px 220px;
padding-top: 55px;
border: 2px navy;
}
img {
border: none;
}
/**************************************************/
/* Bottom */
/**************************************************/
#bottom {
background: url(images/bgbottom.png) bottom center no-repeat;
width: 800px;
height: 50px;
}