Aion Status in webpage

[nitrotrike]

This may sound like a silly question... but is there ANY way I would be able to use this on a regular website template?

From what I have seen, it's the best looking status monitor out there!

I am pulling out what hair I have left trying to figure this out.

Please be as specific as you can!

Thanks!

[Freddy]

What do you mean by regular website template ?  Do you just mean a standalone web page ?

The code it is written in is PHP.  So as long as your host does PHP, which most do, you would be able to use it fine.  You would need to sort out where the images it uses are placed though and the whole code would need php tags around it

<?php

.....code here.....

?>

Let me know if you need further help.

[nitrotrike]

Thanks for the fast response. I will be the first to admit i know NOTHING about php, but did find many articles about how to do it, which was exactly what you instructed to do.

This is what the result is.. a garbled mess on the page... sorry about the dark color:

[Gax]

Put the snippet in a PHP block, looks like you are using a script or html block. If you are trying to do something else, give us a link to your page to save us some time.

[Freddy]

Gax, this is outside of TP...

nitro, did you upload it to your server ?  You can't launch this kind of thing from a desktop machine.

Also did you put it inside the PHP tags like I said ?

[nitrotrike]

Freddy, yes, i did add the tags.

I added it to my page template code (i think that's what you meant?)

When you say 'upload it', I am unsure exactly what you mean. I also saved the code as 'status.php' in my root directory, and go to 'myurl.com/status.php', i see it, although not the proper size - why I don't know. I'm sure there is something REALLY simple I have overlooked:

[Freddy]

Just put the output into a DIV container :

Just after the end of the style tag...

</style>
<div style="width:200px">
<table>';

and at the end after the final table tag:

echo '</table>
</div>';
?>

Adjust 'width' of the DIV until you are happy with it.

[nitrotrike]

The screenshot is taken from a direct url (myurl.com/status.php), not from my home page. The scrambled one (the previous screenshot displaying the code instead of the status window) is what I get my home page.

I want to display it just like the sample shown for the code.

[Freddy]

Is your home page an HTML file ?  Does it end with .html ?

[nitrotrike]

yes... let me guess, that's a bad thing...

[Freddy]

LOL, well not bad - you can't use PHP in an HTML document, it needs to be a PHP document.

But all is not lost, you can leave your working status page where it is and use an iframe to grab it.

So first set the width of the DIV like I said to about 200px (in the PHP file).

Then on your HTML page you can do something like this :

<iframe src="http://yoururl.com/status.php" scrolling="no" frameborder="0" width="210" height="400">
</iframe>

So that needs to go in the body and where you need to use it - you'll probably need to do some shuffling around with your existing HTML to accommodate it.

You will just need to fiddle with the DIV width and the iframe's width and height to get it how you like.

[nitrotrike]

You, sir, are a genius.. I was about to just scrap the whole idea.

Now.. is there a way to have this thing refresh without reloading the home page?

Not a big deal I suppose, but it would be neat to watch the numbers change =]

[Gax]

Updated with new servers.

Wasn't sure about him doing it outside of TP, but I knew he didn't have it in a php file/block.

[Freddy]

Yes there is a way...

Assuming your PHP page is called 'status.php'...add the bold line to the first echo statement and before the style tag, like so.

echo'
<meta http-equiv="refresh" content="5;url=status.php">
<style type="text/css">
body, table {
   font-family: Tahoma, Verdana, Arial, sans-serif;
   font-size: 11px;
   font-weight: bold;
}

The 5 in there is the number of seconds for each refresh, so just change that to whatever works best.  I just did 5 seconds because it's fast and that way you can see it works.  You won't be able to refresh a lot quicker than that because you have to account for the actual page loading, even though it's a little iframe it still has to do a bit of work.

[Freddy]

Updated with new servers.

Wasn't sure about him doing it outside of TP, but I knew he didn't have it in a php file/block.

Hehe, I am on the ball today   I'm still undecided about trying this game, it looks good though.

[nitrotrike]

Freddy... sorry to be a pest on this subject, but I was just testing this using IE.. and I can't seem to get rid of the white background no matter what I do. In FF, it looks great!

*ok, i figured out the transparency issue - used the allowtransparency="true" in the iframe code you gave me freddy*

But, now, when it auto-refreshes, on FF I still get the flicker of a white window, and on IE I do not... I can't win here 

The height is also off on IE.

I haven't tried it on Safari yet, but I feel like I am in for a rude awakening.

You are great help for a noob like me!

Any Ideas on the height differences?

[Freddy]

Hi Nitro,

No problem...  the height issues are probably being caused by the different browsers adding margins to the PHP generated page.  That can be fixed.  I don't know how well you know HTML, but you can attach your PHP file and I will take a look at it.

Basically I would just be setting the margins to zero, which should make it the same in all browsers, then you'd just have to tweak the iframe a bit.

The flicker in FF is probably caused because the background of oyour PHP generated file is white.  So I would look to set up a background colour for that.

But yeah I can take a look at it.  I'm running late here and have to rush out.  I'll post back later what I need from you.

Cheers.

[Freddy]

Ok if you want me to look at it I need :

• Your php code.
• Your iframe code.
• The colour code for the background you want
• A link to your site might be handy so I can see how you are using it.

[nitrotrike]

Sorry for not getting back to you sooner, but here's the down n' dirty.. and I'm about to give up..

I wanted to change the background picture to a scroll of old paper, because they changed the theme of the main page. I am lost. I can get the image behind it (a jagged piece of paper in .gif format), but cannot get rid of the background flicker around the border of the jagged paper when it reloads.

The site is aionhelios.com (don't laugh, it's a freebie for someone)

The iframe code I am using is:

<iframe src="http://aionhelios.com/status.php" scrolling="no" frameborder="0" width="200px" height="425px" style="border:1.0px #DFBD99 solid;" cellpadding="0" cellspacing="0" vspace="0" hspace="0" allowtransparency="true"></iframe>


As you can see, i've been trying everything imaginable to get this flicker to stop (i know, the code is a mess - that's why I am asking for help!). I also was able to shift the text down once before, but now I cannot remember how I did it?? Thsi is driving me nuts, and I KNOW it's something stupid that I am overlooking..

Also, I always forget - does it have to be a gif, or a png to do the transparency? (just want to make sure when they decide to change the background picture again)

I was able to get the left border to stop flickering - somehow, but then I changed something, and now it's back...

The things i changed in the php file is:

table {
   font-family: Tahoma, Verdana, Arial, sans-serif;
        color:#3F2109;
        font-size: 12px;
        font-weight: fine;
        text-align: center;
        text-indent: 2px;
}
body {
        background-image:url(images/bg_wrap.gif);
        width:100%;
        height: 100%;
        background-color:transparent;
 
     
}

[IchBin]

What version of FF are you using? I don't see an flicker of white when it reloads at all in my 3.0.10 and 3.5.3 version of FF.

[nitrotrike]

That's because I put a 1% shift on the body background position, and to my amazement, the thin left flickering bar is gone. I pretty much stumbled onto it by editing the wrong area lol.

Now, all I need to do if put up the scroll / old paper background that he wants, and start fighting again.

Do you know if I should be using a gif or a png for this?

[IchBin]

It shouldn't matter if you're using a gif or a png8. If you're using a png24 with alpha transparency, browsers like IE6 can't handle it and will show a block of gray color where the transparency is. So if you don't care about users who are using IE6, I would just use png24. Otherwise, it shouldn't matter which gif or png8.

[nitrotrike]

Great, I finally got it to where everyone is happy...

But.. how would I put a "next refresh in ** seconds" under it, yet in the same border?

I tried a few javascript refresh scripts, but it refreshes the whole page, which is bad when someone is in the middle or reading something, etc. I only want it to show the countdown timer for the iframe.

I should probably just leave well enough alone at this point...

[Freddy]

I don't have anything to suggest - any javascript you use for refreshing needs to go in the page you reference with the iframe though, not in your main page...

If everyone is happy, then I would leave it be..

[nitrotrike]

I agree. But there's a part of me that can never leave anything alone.

It's been a problem since childhood lol

So you're saying I can put the script IN the iframe itself?

This is the script I want to display the count down timer:

<script language="JavaScript">

//Refresh page script- By Brett Taylor (glutnix@yahoo.com.au)
//Modified by Dynamic Drive for NS4, NS6+
//Visit http://www.dynamicdrive.com for this script

//configure refresh interval (in seconds)
var countDownInterval=60;
//configure width of displayed text, in px (applicable only in NS4)
var c_reloadwidth=200

</script>


<ilayer id="c_reload" width=&{c_reloadwidth}; ><layer id="c_reload2" width=&{c_reloadwidth}; left=0 top=0></layer></ilayer>

<script>

var countDownTime=countDownInterval+1;
function countDown(){
countDownTime--;
if (countDownTime <=0){
countDownTime=countDownInterval;
clearTimeout(counter)
window.location.reload()
return
}
if (document.all) //if IE 4+
document.all.countDownText.innerText = countDownTime+" ";
else if (document.getElementById) //else if NS6+
document.getElementById("countDownText").innerHTML=countDownTime+" "
else if (document.layers){ //CHANGE TEXT BELOW TO YOUR OWN
document.c_reload.document.c_reload2.document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' seconds')
document.c_reload.document.c_reload2.document.close()
}
counter=setTimeout("countDown()", 1000);
}

function startit(){
if (document.all||document.getElementById) //CHANGE TEXT BELOW TO YOUR OWN
document.write('Next <a href="javascript:window.location.reload()">refresh</a> in <b id="countDownText">'+countDownTime+' seconds')
countDown()
}

if (document.all||document.getElementById)
startit()
else
window.onload=startit

</script>

[Freddy]

Sorry javascript is not my thing - maybe someone else can help.  Like I said, I would look to refresh the aion page that is displayed in the iframe, rather than the page it is in.

[nitrotrike]

No problem.

I'm sure there's an easier way to do this, I just don't know how =]

The reason I want to display a countdown, is people aren't sure if the countdown started when they went to the page or if they just have to wait. Does that make sense? Even though it's only 30 seconds, it seems to be causing confusion.