Script to refresh single line in a Widget ? -solved-

I am running a shoutcast server. this is a free server and their tools are mediocre but work ok

now i have a widget displaying the currently playing song .
it gets that info from this adress: http://shoutcast.mixstream.net/js/song/uk2-free:21338

the problem though is, it only updates when the entire page is refreshed.

is there a way to make only the line for the title refresh within the widget, or failing that, the content of the widget at a 20 second interval?

You can do it with an iframe. Try this...
Create an Html page titled "now-playing" with these scripts
(use forum header & footer: no)

Code:

<center><font color="#ffffff"><script type="text/javascript" src="http://shoutcast.mixstream.net/js/song/uk2-free:21338">
You appear to have javascript turned off.</script>
<script type=text/javascript>
setTimeout(' document.location=document.location' ,20000);
</script></font></center>

2nd script refreshes page every 20 seconds


Copy the page Url from "Html pages management", place the Url in
an Iframe & position it where you want the current song title displayed

Code:

<iframe src=http://Your "Now Playing" page address.htm marginheight=0 marginwidth=0 frameborder=0 height=50px width=100%  scrolling=no></iframe>

View examples *here (iframe in a div with Mozilla rounded border)
#1

Code:

<style type="text/css">
div.playing1 {
    width:180px;
    background-color: #ffffff;
    color: #bcbcbc;
    padding: 3px;
    margin: 10px 0;
    font-size: 1.1em;
    border: 2px solid #FF6600;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}</style>

<center><div class="playing1">
<img src="http://i45.tinypic.com/xagyx.gif" border="0" height="15" width="95"> <iframe src=http://Your "Now Playing" page address.htm marginheight=0 marginwidth=0 frameborder=0 height=50px width=100%  scrolling=no></iframe>
</div></center>

#2

Code:


<style type="text/css">
div.playing2 {
    width:180px;
    background-color: #000000;
    color: #bcbcbc;
    padding: 3px;
    margin: 10px 0;
    ont-size: 1.1em;
    border: 2px solid #ffffff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}</style>

<center><div class="playing2">
<img src="http://i49.tinypic.com/28lyscm.jpg" border="0" height="17" width="145"> <iframe src=http://Your "Now Playing" page address.htm marginheight=0 marginwidth=0 frameborder=0 height=50px width=100%  scrolling=no></iframe>
</div></center>

Creating a widget:
[click]


I used Firefox for this demo.

WOW!!

i was about to give up on the idea and then... this,... i am stunned..

Awesome tutorial, cant say more than that.

normally i cringe as soon as i see code , but i actually made sense of this.

thank you very much!
you rock!