TinyPortal
Development => Block Codes => Topic started by: SOcRatEs120 on April 08, 2009, 09:25:27 PM
Block <iframe> Auto Refresh- Html & Javascript
Description: Timed refresh of iframe to repopulate the player with current band playing
without refreshing entire page.
Demo: my site top panel player (http://www.itbumps.com/fmrn/index.php)
SMF ver: 1.1.8
TinyPortal v1.0 beta 3
1.create/add the block (in my case: inUpper Panel Blocks, name:player)
2.Select block type: HTML & Javascript.
3. edit the new block, click on the 2 green <> to input code.
Paste this code
(make any adjustments as needed to: height="325" frameborder="0" width="700" scrolling="no" resize="yes")
<div align="center"><iframe height="325" frameborder="0" width="700" scrolling="no" resize="yes" src="http://www.yoursite.com/smf/player.html" name="player">undefined</iframe></div>
{src="http://www.yoursite.com/smf/player.html} is url of html
(in my case:http://www.itbumps.com/fmrn/player.html)
Typing "undefined" between the iframe tags keeps code from disappearing after you save.
Be sure to set "Frame Options"
"Choose where the block should appear. [Show] [Hide]" (bottom of block edit page)
I chose "Use frame, but not title" then save.
4.edit the html (in my case: Player.html)
Javascript is inserted between the <head></head> tags
<script LANGUAGE="JavaScript">
<!--
function reloadImg(){
uniq = new Date();
uniq = "?"+uniq.getTime();
newImage = document.images['imgToLoad'].src;
index = newImage.indexOf("?", 0);
if(index > 0){
newImage = newImage.substr(0, index);
}
document.images['imgToLoad'].src = newImage+uniq;
setTimeout('reloadImg()', 24000);
}
// -->
</script>
setTimeout('reloadImg()', 24000); 24000 is milliseconds= 24 seconds
insert the following code after the <body> tag.
<body onload="reloadImg()">
Be sure to set
activate, on main block list page
and in the panel section to be visible.
Any help to clarify this is well accepted!
Works well for me so far!!
Thanks :)