Popup XBOX 360 gamertag

[EyeCrave]

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 (https://vborg.vbsupport.ru/showthread.php?t=99867) 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>

[EnIgMa1234]

great job. nice work

[jgommel]

For some reason or another, it's not working for me. What version of 'overLIB' are you using? I downloaded version 4.21 and created a directory called overlib within the root of my forum (http://www.domain.com/vb/overlib/) (http://www.domain.com/vb/overlib/%29). I've also tried it within the vb/clientscript/ directory but, it still doesn't appear to be working.

I have a user profile field created (field18), edited my posbit_legacy template (BTW, in the code below I'm supposed to change all fields $post[fieldX] with $post[field18], but there's one $post[field6] in there -- I'm assuming that I should change that one as well?)

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

The Gamertag appears in my postbit_legacy and the link itself works - just not getting the popup.

My domain: neosmut.com

[EyeCrave]

The script uses overlib_mini.js

It's located in the mini folder and sorry if I missed the 6. It should reflect your field ID. I'll fix it in the file when I get home later tonight, the post has been corrected.

[EyeCrave]

Updated the file with fixed code.

[jgommel]

It's still not working on my site. I've double checked to make sure I didn't miss something, but the path to overlib_mini.js is correct and I've added the code to my postbit_legacy template ... I'm not quite sure what else to do?

I'm wondering if it has anything to do with the skin/theme I'm using? Maybe the code I'm supposed to add to the bottom of the header template could/should go else where?

I started to wonder if it was my browser since I'm on a Mac, but I checked the link you supplied and it works just fine. I had some PC user friends of mine try it as well, and they too said it didn't work.

Anyone have any suggestions or ideas on how I can get this to work?

[EyeCrave]

Does it work for you on my demo link? Try moving it to headerinclude. That might be my mistake in the post above, which I've since rectified. First mod... sorry.

[Thorlax402]

The popup doesn't work for me either...can you please explain more?

[EyeCrave]

Do you get a script error on your page? Give me your URL so I can look at it.

[Thorlax402]

<a href="http://www.halofordummies.com" target="_blank">http://www.halofordummies.com</a>

Not many people have typed in their gamertag yet, but Thorlax402 has his and everything looks fine accept the hovering box doesn't appear.

[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 (http://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]

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]

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:
<!-- 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>

[stickskills]

Thanks for the help man, I slightly tweaked that to my liking. :)