Elitist Jerks
Register
Blogs
Forums


Go Back   Elitist Jerks » Public Discussion » Public Discussion

Reply
 
LinkBack Thread Tools
Old 03/14/07, 7:19 AM   #1
zork
Don Flamenco
 
zork's Avatar
 
Dwarf Warrior
 
Aegwynn (EU)
Item-Tooltip for your site with Ajax and XML from Armory

Hi,

I always wanted a Item-Tooltip that comes via Ajax in real time from real data. Thanks to armory this finally came true.

If you want to take a look at the result check out this link:
http://dm.next-gen.org/index.php?sei...=1&topicid=490

The user has the option to add items with a BB-Code-like tag that looks like this:

[Item not found!]

You can see your itemid ingame with ratingbuster addon, or just take it from wowhead. the value behind the comma is the quality ranging from 0-6. The itemname is just a name you give that item, whatever you want.

Example:
[Item not found!]

A php script with preg_replace turns this into a link to wowhead + a mouseover event with Ajax calling a php script that gets the XML data from blizzard armory.

You cannot connect directly to the XML file with Ajax cause its on a external server, but the trick with a php script does the job.

I put the important php-source code into a small html file so you can grab it.
http://dm.next-gen.org/files/explanation.html

The other stuff can be grabbed by looking into the source of the main page.

hf

Last edited by zork : 03/14/07 at 9:24 AM.

| Simple is beautiful.
| Blog | Roth UI | Roth UI FAQ | GoogleCode | Zork | Guild | zorker.de

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Offline
Reply With Quote
Old 03/14/07, 7:49 AM   #2
Durza
Von Kaiser
 
Durza's Avatar
 
Undead Death Knight
 
Doomhammer (EU)
That looks very nice. Gonna forward it to our webmaster.

Thanks.

Offline
Reply With Quote
Old 03/14/07, 1:18 PM   #3
Crass
Where the F are my hard boiled eggs?
 
Crass's Avatar
 
Dwarf Priest
 
Bleeding Hollow
For others trying to implement this idea, I might be able to save you some time. There's some missing information that makes this not as cut and dry as it could be for non-experts like myself.

If I'm stealing too much from the OP, please let me know.

You're going to need these two files:
http://dm.next-gen.org/wow_items.js
http://dm.next-gen.org/wow_items.css

Drop them both in the same directory as your phpbb.

Next, you need to create a php file as stated previously. If you don't want to edit the javascript file, call it hole_tooltip.php. I had to modify mine slightly to avoid a php warning.

  <?
  
    $url = 'http://armory.worldofwarcraft.com/item-tooltip.xml?i='.$_GET['itemid'];
    
    $string = file_get_contents($url);
    $string = str_replace("images", "http://armory.worldofwarcraft.com/images", $string);
    
    echo $string;
   
  ?>
Next, you need to modify your viewtopic.php/showthread.php to support the [item]. I placed mine directly under the section that checks to see if your forums support bbcode. Look for a line that says "// Parse message and/or sig for BBCode if reqd" and slap this in there:

$message = preg_replace("/\[item=(.*?)\,(.*?)\](.*?)\[\/item\]/", '<a href="http://www.wowhead.com/?item=$1" class="rarity$2" target="_new" onmouseover="showtip(event,\'$1\');" onmousemove="showtipatcursor(event);" onmouseout="hidetip();"><b>$3</b></a>', $message);
Last, you need to modify the header file for the template your forums use.

Add this line in the "style" area of the header file:
<link rel="stylesheet" type="text/css" media="screen" href="./wow_items.css">
Add this line in the "javascript" area of the header file:
<script type="text/javascript" src="./wow_items.js"></script>
Add this snippet of html after the </head> tag:
  <div style="display: none; position: absolute; z-index: 999999; top: 10px; width: 300px; left: 10px;" class="tooltip" id="tooltipcontainer">
    <table>
      <tbody>
        <tr>

          <td class="tl"></td>
          <td class="t"></td>
          <td class="tr"></td>
        </tr>
        <tr>
          <td class="l"><q></q></td>
          <td class="bg">
          <div id="toolBox">
  

  
          </div>

          </td>
          <td class="r"><q></q></td>
        </tr>
        <tr>
          <td class="bl"></td>
          <td class="b"></td>
          <td class="br"></td>
        </tr>
      </tbody>

    </table>
  </div>
I think that's everything. Enjoy.

Offline
Reply With Quote
Old 03/14/07, 2:02 PM   #4
TheOnly
Don Flamenco
 
Gnome Warlock
 
Dragonblight
THe link mods that connected to allakazam before cached the resulting info in the plugin on your site so that there weren't constant AJAX requests to their site.

Without building in some sort of caching, this will fall over eventually.

Offline
Reply With Quote
Old 03/14/07, 2:53 PM   #5
Crass
Where the F are my hard boiled eggs?
 
Crass's Avatar
 
Dwarf Priest
 
Bleeding Hollow
Originally Posted by TheOnly View Post
THe link mods that connected to allakazam before cached the resulting info in the plugin on your site so that there weren't constant AJAX requests to their site.

Without building in some sort of caching, this will fall over eventually.
The only way this will fall over is if Blizzard removes the xml lookup they are currently providing on the armory site, or the armory site is down. Given the number of tooltips that the armory site is currently pushing out on a daily basis, I doubt it's going anywhere soon.

If you're that paranoid about it, adding cache support to hole_tooltip.php wouldn't be that hard.

Offline
Reply With Quote
Old 03/14/07, 3:20 PM   #6
Vhal
Piston Honda
 
Vhal's Avatar
 
Tauren Paladin
 
Tichondrius
Originally Posted by Crass View Post
The only way this will fall over is if Blizzard removes the xml lookup they are currently providing on the armory site, or the armory site is down. Given the number of tooltips that the armory site is currently pushing out on a daily basis, I doubt it's going anywhere soon.

If you're that paranoid about it, adding cache support to hole_tooltip.php wouldn't be that hard.
... Or just download the whole list. 31855 was the highest item id I found last week, and everything up to that number is only around 16 megs of xml.

Offline
Reply With Quote
Old 03/14/07, 5:08 PM   #7
TheOnly
Don Flamenco
 
Gnome Warlock
 
Dragonblight
Originally Posted by Crass View Post
The only way this will fall over is if Blizzard removes the xml lookup they are currently providing on the armory site, or the armory site is down. Given the number of tooltips that the armory site is currently pushing out on a daily basis, I doubt it's going anywhere soon.

If you're that paranoid about it, adding cache support to hole_tooltip.php wouldn't be that hard.
Nope it wouldn't be that hard, and would be resilient when blizzard's site is down or slow.

Just have each item on an individual expiration timer of a few days, and load / cache on demand.

When caching is trivial to do, it should be done. (sorry, my RL job is showing).

Offline
Reply With Quote
Old 03/14/07, 5:32 PM   #8
alienangel
Bald Bull
 
alienangel's Avatar
 
Draenei Hunter
 
Eredar
Sorry for being a wet blanket (or just stupid), but what does this offer the end user (i.e. forum reader/poster) that the regular Allakhazam scripts don't? I suppose the item DB will be held to a higher standard of accuracy, but are the other sites out of date that often? I'm honestly curious, the geek in me thinks it's very cool you dug this info out of the armoury pages, but is there some huge advantage to doing it this way that I'm missing, other than getting info from blizzard instead of a 3rd party?

From the sample syntax in the OP's post, it looks like the user would need to use more complex bbcode than the other plugin's need? For instance:



instead of the simpler:

that used to work on the old EJ forums.

Canada Offline
Reply With Quote
Old 03/14/07, 7:58 PM   #9
zork
Don Flamenco
 
zork's Avatar
 
Dwarf Warrior
 
Aegwynn (EU)
maybe you dont need any xml files anywhere that you need to keep up to date.

thx to crass for posting the rest.
what you forgot is the special CSS for ie 6.0 (cause he hates png includes the normal way)

http://dm.next-gen.org/wow_items_ie.css

    <!--[if IE 6]>
      <link rel="stylesheet" type="text/css" media="screen" href="wow_items_ie.css">
    <![endif]-->
its just a way to do it. if you dont like it, dont use it.

| Simple is beautiful.
| Blog | Roth UI | Roth UI FAQ | GoogleCode | Zork | Guild | zorker.de

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Offline
Reply With Quote
Old 03/14/07, 8:33 PM   #10
Vhal
Piston Honda
 
Vhal's Avatar
 
Tauren Paladin
 
Tichondrius
Hrm, it appears the xml has been updated from the patch. I should re-download everything and compare them all.

Offline
Reply With Quote
Old 03/14/07, 9:24 PM   #11
 Shalas
Bald Bull
 
Shalas's Avatar
 
Tauren Druid
 
Mal'Ganis
Am I alone in hating sites that use ajax for this sort of thing? I don't want to mouse over an item and wait 30 seconds to have it show the tooltip of some other item I happened to mouse over earlier, I want to mouse over an item and read the tooltip immediatly. The bandwidth saving with a properly configured server is minimal, while the load on both the server and client is significantly boosted due to the large number of extra connections.

Why would you want to make your page freeze up browsers like Armory?

Offline
Reply With Quote
Old 03/15/07, 12:14 AM   #12
Anarkii
King Hippo
 
Orc Hunter
 
Silvermoon
On a partially related note, has anyone been able to dig up XML info for items which we haven't seen yet ? (i.e. items from Hyjal/The Eye/later part of SSC). Curious to know if they implement such a server side flag on items to mark that the items have dropped at least once or not.

Offline
Reply With Quote
Old 03/15/07, 4:44 AM   #13
zork
Don Flamenco
 
zork's Avatar
 
Dwarf Warrior
 
Aegwynn (EU)
no blizzard had seen this coming i guess ;>
you cannot even link items like T5 when they haven't be seen drop on the US servers.

| Simple is beautiful.
| Blog | Roth UI | Roth UI FAQ | GoogleCode | Zork | Guild | zorker.de

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Offline
Reply With Quote
Old 03/15/07, 8:05 AM   #14
zork
Don Flamenco
 
zork's Avatar
 
Dwarf Warrior
 
Aegwynn (EU)
i just updated the javascript so that it saves the inner.HTML into an ARRAY so it doesnt have to load the data each time you hover the link.

    var tmp_id = '';
    var item = new Array(99999);

    function showtip(e,id) {
      var url = "hole_tooltip.php?itemid=" + id;
      
      if(item[id] == null)
      {
        document.getElementById('toolBox').innerHTML = "Sekunde bitte ich suche...";
        tmp_id = id;
        retrieveURL(url);
      }
      else
      {
        document.getElementById('toolBox').innerHTML = item[id];
      }
      showtipatcursor(e);
    }
    
    function retrieveURL(url) {
      if (window.XMLHttpRequest) { // Non-IE browsers
        req = new XMLHttpRequest();
        req.onreadystatechange = processStateChange;
        try {
          req.open("GET", url, true);
        } catch (e) {
                alert(e);
        }
        req.send(null);
      } else if (window.ActiveXObject) { // IE
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
          req.onreadystatechange = processStateChange;
          req.open("GET", url, true);
          req.send();
        }
      }
    }
    
    function processStateChange() {
      if (req.readyState == 4) 
      { // Complete
        if (req.status == 200) 
        { // OK response
          if (req.responseText.length > 0)
          {
            document.getElementById('toolBox').innerHTML = req.responseText;
            item[tmp_id] = req.responseText;
          }
          else
          {
            document.getElementById('toolBox').innerHTML = "Die Itemid konnte nicht identifizert werden!";
            item[tmp_id] = "Die Itemid konnte nicht identifizert werden!";
          }
        } else {
                alert("Problem: " + req.statusText);
        }
      }
    }
  
    function showtipatcursor(e) 
    {
      var obj = document.getElementById('tooltipcontainer');
      obj.style.display = "block";
      
    	wHeight = document.body.clientHeight+document.body.scrollTop;
      lHeight = obj.offsetHeight;

      if (document.all&&!window.opera) { 
        y = event.clientY + 10 + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
        x = event.clientX + 10 + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        
      } else {
        y = e.pageY + 10;
        x = e.pageX + 10;
      }
      
      fHeight = y + lHeight;
      
      if(fHeight > wHeight)
      {
        tmpvar = fHeight - wHeight;
        obj.style.top = (y - tmpvar) +"px";
        obj.style.left = x +"px";        
      }
      else
      {
        obj.style.top = y +"px";
        obj.style.left = x +"px";
      }      
    }
  
    function hidetip() 
    {
      var obj = document.getElementById('tooltipcontainer');
      obj.style.display = "none";
    }
hf

| Simple is beautiful.
| Blog | Roth UI | Roth UI FAQ | GoogleCode | Zork | Guild | zorker.de

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Offline
Reply With Quote
Old 03/15/07, 11:13 AM   #15
Crass
Where the F are my hard boiled eggs?
 
Crass's Avatar
 
Dwarf Priest
 
Bleeding Hollow
Originally Posted by Anarkii View Post
On a partially related note, has anyone been able to dig up XML info for items which we haven't seen yet ? (i.e. items from Hyjal/The Eye/later part of SSC). Curious to know if they implement such a server side flag on items to mark that the items have dropped at least once or not.
There's nothing that hasn't already been found that you can dig up via the armory.

Originally Posted by zork View Post
i just updated the javascript so that it saves the inner.HTML into an ARRAY so it doesnt have to load the data each time you hover the link.
good stuff!

Offline
Reply With Quote
Reply

Go Back   Elitist Jerks » Public Discussion » Public Discussion

Thread Tools

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to get XML with PHP from armory zork Public Discussion 122 04/29/11 9:48 AM
In Game Armory Mod Maligne User Interface and AddOns 29 05/07/07 11:37 AM
Itemization: Stats better (or worse) than tooltip Greymist1 Public Discussion 5 03/12/07 9:06 AM
Fortune's Item Comparison Site Quebeen Public Discussion 8 10/04/06 7:29 AM