Refresh a page element without doing the whole page.

[RockHard]

I was trying to figure out how to get the song data off my shoutcast stats page to display on my site which wasn't too hard but a way to update the current song playing was a bit of a challenge without refreshing the entire page & I found this tiny script that isolated the element I wanted to effect so here it is.....

1st the js: In this case, I'm targeting an iframe with the same ID name as you'll see in the html code.

<script type="text/javascript">
function refresh()
{
var x=document.getElementById("iframe").src;
document.getElementById("iframe").src=x;
}
</script>

The css: Is config'd to capture a defined section of a web page so re-config the css to however suits your situation.

.thumbnail iframe {
width:630px;
height:225px;
margin-top:-100px;padding-left:1px;
opacity:.8;
}

.thumbnail-container {
width: calc(670px * .9);
height: calc(130px * .9);
display: inline-block;
background:#000;
border:2px solid#999;
box-shadow: 0 0 0 5px #0105F2, 0 0 0 7px #999;
padding:1px;
overflow:hidden;
margin-top:13px;margin-right:2px;
position: relative;
border-radius:1px;
}

a.data:hover { color:#00EB08 }
.upsum{color:#ffd500}

.styling {
display:inline-block;
background:#000;
font-size:16px;
border:3px solid #2327FF;
box-shadow: 0 0 0 4px #252525, 0 0 0 5px #999;
padding:10px;
border-radius:3px
}

The html: 1st the refresh button then the song data container.

<a class="data" onclick="refresh()">
<span class="styling">Refresh song data</span></a>

<div style="text-align:center">
<span class="thumbnail-container">
<span class="thumbnail">
<iframe id="iframe" src="http://your song stats page" frameborder="0"></iframe>
</span></span>
</div>

That's it man, pretty frickin' light on code & a useful tool when needed.