TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

User

Welcome to TinyPortal. Please login or sign up.

Stats

Members
  • Total Members: 3,963
  • Latest: BiZaJe
Stats
  • Total Posts: 195,917
  • Total Topics: 21,308
  • Online today: 884
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 1
  • Guests: 360
  • Total: 361
  • @rjen

[Block] <iframe> Auto Refresh- Html & Javascript- suggestion

Started by SOcRatEs120, April 08, 2009, 09:25:27 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

SOcRatEs120

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
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")
Code Select
<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
Code Select
<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.
Code Select
<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!!
Print
Go Up Pages1
User actions

This website is proudly hosted on Crocweb Cloud Website Hosting.