Popup XBOX 360 gamertag

Function

This mod will popup XBOX 360 gamertags when you hover your cursor over them.

Important

Backup all templates you're going to edit in the event a revert is required.

Credit

To stonyarc for his Xbox.com gamercard for all users and to www.xboxworld.nl from where I pretty much stole the script from.

Support

Limited

Important

Update: Fixed code in postbit to add missing 'A'

Modifications

* file uploads
* 3 templates
* 1 new userfield

Copy the following into your templates and voila it works. Enjoy!

See it in action at
http://www.eyecravedvd.com/forums/showthread.php?p=9701

User Field

Go to AdminCP -> User Profile Fields -> Add New User Profile Field
Profile Field Type: Single-Line Text Box
Title: XBOX 360 Gamertag
Description: Please type your Gamertag Here
Field Editable by User: Yes
Save

Template mods

In order for this script to work you must download the overLIB javascript library from
http://www.bosrup.com/web/overlib/

Ensure the correct path to overlib is set in the first line. The correct file is overlib_mini.js. It's located in the mini folder in the library.

Change the 'X' in $post[fieldX] to whatever your field ID is.

edit template: headerinclude
place at bottom

<script type="text/javascript" src="http://www.path-to-overlib/mini/overlib_mini.js"></script>
<script type="text/javascript">
function setcursor(type) {
    document.getElementsByTagName('body')[0].style.cursor = typeof type == 'undefined' ? 'default' : type;
    links = document.getElementsByTagName('a');
    for(i = 0; i < links.length; i++) links.item(i).style.cursor = typeof type == 'undefined' ? 'pointer' : type;
}

function showgamercard(gamertag) {
    setcursor('progress');
    return overlib('<iframe onload="setcursor();" src="http://gamercard.xbox.com/'+gamertag+'.card" scrolling="no" frameBorder="0" height="140" width="204">'+gamertag+'</iframe>', BORDER, 0, FULLHTML, WIDTH, 204, HEIGHT, 140);
}

function hidegamercard() {
    return nd();
}
</script>

Edit template: Postbit

Find: (you can edit the location this is just a suggested spot)

<if condition="$post['usertitle']"><div class="smallfont">$post[usertitle]</div></if>

Add below:

  <div>&nbsp;</div>
  <div class="smallfont"><input type="hidden" name="gamertag" value="$post[fieldX]"> 
  <if condition="$post[fieldX]">
  <strong>Gamertag:</strong> <a onmouseover="showgamercard('$post[fieldX]');" onmouseout="return hidegamercard();" href="http://live.xbox.com/member/$post[fieldX]" target="_blank" rel="nofollow">$post[fieldX]</a></if></div>

Edit template: Postbit Legacy

Find:

 <if condition="$post['joindate']"><div>$vbphrase[join_date]: $post[joindate]</div></if>

Above add:

<br />

  <div><input type="hidden" name="gamertag" value="$post[fieldX]"> 
  <if condition="$post[fieldX]">
  <strong>Gamertag:</strong> <a onmouseover="showgamercard('$post[fieldX]');" onmouseout="return hidegamercard();" href="http://live.xbox.com/member/$post[fieldX]" target="_blank" rel="nofollow">$post[fieldX]</a></if></div>

[jkwasn01]

I have the same problem as Thorlax. I used posbit legacy instead tho.

[Thorlax402]

Alright, I figured out how to get it to work. Change the source from "/mini/overlib_mini.js" to simply "/overlib.js". Also, there is a typo in the postbit template edit.

It says:

  <div>&nbsp;</div>
  <div class="smallfont"><input type="hidden" name="gamertag" value="$post[fieldX]"> 
  <if condition="$post[fieldX]">
  <strong>Gamertag:</strong> <a onmouseover="showgamercard('$post[fieldX]');" onmouseout="return hidegmercard();" href="http://live.xbox.com/member/$post[fieldX]" target="_blank" rel="nofollow">$post[fieldX]</a></if></div>

The part that is labeled in red needs to be changed to:

hidegamercard

It is missing an "A".


Anyway, I still have a small problem. On the hover, it is a little slow to show the gamercard. Check it out at halofordummies.com. If anyone knows how to fix this then please let me know.

[Oliver-Berlin]

nice work THX

[jgommel]

Thanks Thorlax - that did the trick, I'm all up and running!!!!

[EyeCrave]

Thanks Thorlax402. It was missing only above the file was fine.

As for the slow loading it seems to have to do with the page loading fully. Once it's done it pops up pretty fast, but I'm not javascript expert. As I said above I took it from another site.

As for the overlib_mini.js make sure your path is correct. The package actually has a capital M for the directory in the path.

[TrickyD]

Anyone know how to take this mod and make it work "on click" instead of on mouseoever?

I'd love to use this on my site.

[barryhand]

Originally Posted by TrickyD

Anyone know how to take this mod and make it work "on click" instead of on mouseoever?

I'd love to use this on my site.

Wild guess, change the action from onmouseover to onClick

[Evolution06]

this is nice *installed* now I wonder do you have to actually upload all those overlib/ files or can you just get away with putting the mini.js java file in your forums root? Cause it doesn't seem like all the files in that download are needed and just take up room lol.

[stickskills]

Can anyone help me out with a "if conditon" so that if users don't have a gamertag supplied, there's no box show up?

[Wobbly Goblin]

Originally Posted by stickskills

Can anyone help me out with a "if conditon" so that if users don't have a gamertag supplied, there's no box show up?

Here's mine:

PHP Code:

<!-- Xbox GamerTag -->
<input type="hidden" name="gamertag" value="$post[field5]"> 

<if condition="$post['field5']"><hr>
<strong>Xbox GamerTag:</strong><br/>
<a onmouseover="showgamercard('$post[field5]');" onmouseout="return hidegamercard();" href="http://live.xbox.com/member/$post[field5]" target="_blank" rel="nofollow">$post[field5]</a><br/>
</if>