Hi, i don't know what happen in the code.

I have this JScript:

    changeLanguage: function(target) {
        var rel = target.split('-'),
            region = rel[3],
            game = rel[1],
            client = rel[2],
            lang = rel[4],
            ver = rel[1], //not sure...
            name = $('#' + target).text(),
            id = game + '-' + client + '-' + region;

        // highlight the active language name
        // is someting missing here for the new variable ver???
        $('#' + id + ' .active-language').text(name);
        $('#' + id + ' .languages a').removeClass('active');
        $('#' + target).addClass('active');

        // enable the download links
        $('#' + id + ' .download a').addClass('hidden');
        $('#win-' + game + '-' + client + '-' + region + '-' + lang).removeClass('hidden'); // only 1 file per lang
        $('#mac-' + game + '-' + client + '-' + region + '-' + lang).removeClass('hidden'); // only 1 file per lang
        $('#win-' + game + '-' + client + '-' + region + '-' + lang + '-' + ver).removeClass('hidden'); // 11 files per lang
        $('#mac-' + game + '-' + client + '-' + region + '-' + lang + '-' + ver).removeClass('hidden'); // 11 files per lang
        $('#pdf-' + game + '-' + client + '-' + region + '-' + lang).removeClass('hidden');
    }

Full version of JS is here: downloads.js (unmodified)

These are the links:

// *** These are working fine ***

<td class="download win">
<a href="http://tinyurl.com/InstallWoW-enGB-PC" class="link" id="win-wow-full-EU-en_GB"><span class="icon"></span> Windows</a>
<a href="http://tinyurl.com/InstallWoW-esES-PC" class="link hidden" id="win-wow-full-EU-es_ES"><span class="icon"></span> Windows</a>
</td>

<td class="download mac">
<a href="http://tinyurl.com/InstallWoW-enGB-MAC" class="link" id="mac-wow-full-EU-en_GB"><span class="icon"></span> Mac</a>
<a href="http://tinyurl.com/InstallWoW-esES-MAC" class="link hidden" id="mac-wow-full-EU-es_ES"><span class="icon"></span> Mac</a>
</td>

// *** These are not working, only show what is not hidden... in other words, script is not working here ***

<tr class="language-pack language-pack-wow-full language-pack-wow-full-EU">
                        <th scope="row" class="details" rowspan="11">
                            <h4>European Patches</h4>
                            <p>Used for patching a game client to a newer version.<br />(Requires the European game client.)</p>
                        </th>
<td class="download win">
<a href="http://tinyurl.com/WoW-320-enGB-PC" class="link" id="win-wow-full-EU-en_GB-320"><span class="icon"></span> Windows</a>
<a href="http://tinyurl.com/WoW-320-esES-PC" class="link hidden" id="win-wow-full-EU-es_ES-320"><span class="icon"></span> Windows</a>
</td>

<td class="download mac">    
<a href="http://tinyurl.com/WoW-320-enGB-MAC" class="link" id="mac-wow-full-EU-en_GB-320"><span class="icon"></span> Mac</a>
<a href="http://tinyurl.com/WoW-320-esES-MAC" class="link hidden" id="mac-wow-full-EU-es_ES-320"><span class="icon"></span> Mac</a>
</td>

And this is the HTML code:

<head>
<link rel="stylesheet" type="text/css" media="all" href="css/common.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/bnet.css" />
<link rel="stylesheet" type="text/css" media="print" href="css/bnet-print.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/download.css" />
<div class="category" id="wow">    
<script type="text/javascript" src="jscript/jquery.js"></script>
<script type="text/javascript" src="jscript/core.js"></script>
<script type="text/javascript" src="jscript/tooltip.js"></script>
<script type="text/javascript" src="jscript/download.js"></script>
</head>
<table>
<thead>
<tr>
<th scope="col" class="details">File Details</th>
<th scope="col" class="language">Language</th>
<th scope="col" class="download win">Windows Link</th>
<th scope="col" class="download mac">Mac Link</th>
</tr>
</thead>    
<tbody>
<tr class="full wow localized" id="wow-full-EU">
<th scope="row" colspan="2" class="details">
<h4>Game Client Installer</h4>

<p class="language-selection">
<span class="active-region">Europe</span> /
<span class="active-language">English (EU)</span>
<a href="#" class="change-language" rel="region-wow-full">(Change)</a>
</p>

<div id="region-wow-full" class="region-selection hidden border-3">
<p><strong>Available Regions</strong></p>

<p class="selection regions">
<a href="#" rel="languages-wow-full-NA">Americas &amp; Oceania</a> /
<a href="#" rel="languages-wow-full-EU" class="active">Europe</a>
</p>

<div id="languages-wow-full-NA" class="available-languages hidden">
<p><strong>Available Languages for Americas &amp; Oceania</strong></p>

<p class="selection languages">
<a href="#" rel="en_US" id="language-wow-full-NA-en_US">English (US)</a> /
<a href="#" rel="es_MX" id="language-wow-full-NA-es_MX">Español (AL)</a>
</p>
</div>

<div id="languages-wow-full-EU" class="available-languages">
<p><strong>Available Languages for Europe</strong></p>

<p class="selection languages">
<a href="#" rel="en_GB" id="language-wow-full-EU-en_GB" class="active">English (EU)</a> /
<a href="#" rel="es_ES" id="language-wow-full-EU-es_ES">Español (EU)</a> /
<a href="#" rel="de_DE" id="language-wow-full-EU-de_DE">Deutsch</a> /
<a href="#" rel="fr_FR" id="language-wow-full-EU-fr_FR">Français</a> /
<a href="#" rel="ru_RU" id="language-wow-full-EU-ru_RU">Русский</a>
</p>
</div>

<p class="controls"><a href="#" class="close">Save</a></p>
</div>
</th>
// *** Here are the working links ***
</tr>
// *** Here are the the other links ***
</tbody>
</table>
</div>
</div>
</div>
</div>

Recommended Answers

All 24 Replies

id="mac-wow-full-EU-es_ES-320"

Looking at the id above, you would get ["mac", "wow", "full", "EU", "es_ES", "320"] as a result from splitting the ID string. Now go back to your code...

var rel = target.split('-'),
region = rel[3],
game = rel[1],
client = rel[2],
lang = rel[4],
ver = rel[1], //not sure...
name = $('#' + target).text(),
id = game + '-' + client + '-' + region;

This means all variables would be...

rel = ["mac", "wow", "full", "EU", "es_ES", "320"]
region = "EU"
game = "wow"
client = "full"
lang = "es_ES"
ver = "wow"
name = // whatever value inside the HTML element
id = "wow-full-es_ES"

I believe what you need for ver is rel[5] instead of rel[1]... Still, I don't know how your ID is made of.

The id is "wow-full-NA" or "wow-full-EU" the region, not the lang.

I tried first using the array 5 but the same again.

I took the code from a github page where is a CMS project, i think it's mangosweb or something else. So i only made the changes to adapt the code to my needs. But the original work is from battle.net webpage.

Did you saw the full Script? Here are all hosted: http://wow-spain.tk/jscript/ But i think the html only use 2 of them... Here is the page: http://wow-spain.tk/downloads.html

Now i'm convinced the problem is in <tr class="language-pack language-pack-wow-full language-pack-wow-full-EU"> in changeregion function (download.js) should i add the lang??? Sure i have to add something to that function, but i'm not sure of what...

Please help me!!

Sorry for that typo. Anyway no, I didn't look at the script you listed. Though, if you want to check what the variable values are, you could do it this way...

// where this portion of the code
var rel = target.split('-'),
region = rel[3],
game = rel[1],
client = rel[2],
lang = rel[4],
ver = rel[1], //not sure...
name = $('#' + target).text(),
id = game + '-' + client + '-' + region;

// change it to
var rel = target.split('-')
alert(rel)  // <-- this will pop a window and display each value in 'rel' with comma
var region = rel[3],
game = rel[1],
client = rel[2],
lang = rel[4],
ver = rel[1], //not sure...
name = $('#' + target).text(),
id = game + '-' + client + '-' + region;

I don't use JQuery, but this will allow you to see what value is actually passed to the function. Then you should be able to see what 'ver' (version) should be.

Don't work, the script gets broken, all the script. The change menu don't work.

Well, do you see something here that limits this <tr class="language-pack language-pack-wow-full language-pack-wow-full-EU"> for what i want to do?

    changeRegion: function(target) {
        var rel = target.split('-'),
            region = rel[3],
            game = rel[1],
            client = rel[2],
            id = game + '-' + client + '-' + region,
            name = $(' .regions a[rel="languages-' + id + '"]').text();
        $('tr.localized.' + game + '.' + client).each(function() {
            // update the table row
            $(this).attr('id', id);
            var lang = $('#languages-' + id + ' .languages a').attr('rel');

            // highlight the active region name
            $('#' + id + ' .active-region').text(name);
            $('#' + id + ' .regions a').removeClass('active');
            $(' .regions a[rel="languages-' + id + '"]').addClass('active');

            // display the languages for the active region
            $('#' + id + ' .available-languages').addClass('hidden');
            $('#languages-' + id).removeClass('hidden');

            // select the default language
            LanguageSelection.changeLanguage('language-' + id + '-' + lang);

            // display the relevant support link
            $('.' + game + '-' + client + '-restrictions').addClass('hidden');
            $('#restrictions-' + id).removeClass('hidden');

            if (client === 'full') {
                // display any available >language packs< -- any ver link
                $('.language-pack-' + game + '-full').addClass('hidden');
                $('.language-pack-' + game + '-full-' + region).removeClass('hidden');
                // this is the only way IE can recover a <tr> properly from display:hidden
                // (simply removing .hidden doesn't work, neither does setting display:table-row).
                $('.language-pack-' + game + '-full').css('display', 'none');
                $('.language-pack-' + game + '-full-' + region).css('display', '');
            }
        });
    },

Because those links i think don't work because are in that <tr> with this script and maybe is missing something like the lang and ver variables.

Oh, you use dash '-' in your added name? That will obviously break it for sure. The reason is that the script using the dash as its delimiter. You must not have it in your added on name. If you want to have 2 words meaning, use underscore '_' instead.

"language-pack language-pack-wow-full language-pack-wow-full-EU".split("-")
will result...
["language", "pack language", "pack", "wow", "full", "EU"]

Is that what you want???

The problem with this JQuery script is that it will attempt to load the script at onload with element ID (whenever the script is using $(elementID)). If the ID is not there when the script is looking, the script broke at the beginning. A good tool to help you debug it is Firebug on Firefox browser. It will display where (what line) the script is broken. It seems that the script could not find the specific element ID and that causes the havoc.

Sorry i don't explain fine... I need the links there are in here <tr class="language-pack language-pack-wow-full language-pack-wow-full-EU"> change like the other links, that are here <tr class="full wow localized" id="wow-full-EU">, this links are working and changing when the language is changed.

I saw that an id: win-wow-full-EU-en_GB, by example, can't be used more than one time. Thats why when i change the language only work for the first id, the rest don't work. If i delete the first id (here in <tr class="full wow localized" id="wow-full-EU">), the second id work but don't work the add hidden class, so it's showed 2 languages at the same time... Sure is something wrong with the script, but i don't know what! I tried the ver(sion) variable but didn't work...

I tried everything that has occurred to me, but i'm not able. I tried changing the tables, the script a lot of times, but nothing :(

Hope you understand what is the exact problem. Thanks!

Maybe i have to declare the versions (320/320a/322...) in the html code, but where?
Like the lang here:
<a href="#" rel="en_GB" id="language-wow-full-EU-en_GB" class="active">English (EU)</a>
Or game here:
<div class="category" id="wow">
Client here:
<tr class="full wow localized" id="wow-full-EU">
Region here?
<a href="#" rel="languages-wow-full-NA">Americas &amp; Oceania</a> /
But where's ver values??

I'm getting cræzy!

I'm still trying to understand where the problem is. I have a few questions.

1)Did you copy the script and HTML page from somewhere and modify them?
2)Is the page you show original? Or it is yours?
3)If it is your page, have you modified/added any HTML elements?

The reason your script is not working tends to be from mismatch ID assigning & calling. In other words, you assign one format of ID to your HTML element, but you do not modify the script to call the correct ID format. In the original script, there is no version and lang. I am guessing you were trying to add these 2 more options to the click.

Yes i copied the code, but i copied too all scripts, stylesheets and images, from a public repository.
The page i show is in a "custom" development, i'm customizing it. So i have put work on it and more that i'll put.

Well, now you are going to understand wheres the problem 100% sure :P

First of all, i cleaned all the code that i didn't need and fixed the codestyle, to work and understand it better. And all worked fine, the 2 tables, game client and language pack.

Then i added more links to the language pack code, for each patch version. The problem is that originally only had 1 link per language (in language pack funtion), so there wasn't need to script that function to change when language change, only when region is changed.

That is the problem and thats why i'm trying to modify the script or the id's format in the html code to make it work.

Really i don't know what i did bad, because i modified the script, to read 1 more variable: ver, and the html code, adding the value to the id but didn't work. So i think maybe the value needs to be declared in somewhere of the html code...

And yes, i was trying to add values to the click, trying to test something to make it work. But i only added ver variable to the original script.

Thanks for the interest in help me :)

Err, your page disappears... I was going to look at it again to see which element the JQuery is tieing the onclick or onchange event which results in calling the function with "target" argument. The "target" is the ID of the element of whatever a mouse click event is fired from. :( Don't have an example to look at now...

Yes, i don't know what happen with the hosting. I'll upload again. By the moment i'm going to paste it, it's easily testable in a browser, that's how i work.

downloads.html
jquery.js
download.js

OK, I found out that the target argument for changeRegion is actually being used from rel property; whereas, the changeLanguage is tied to id property. If you are going to add version and lang for changeRegion, you may need to add those 2 in the rel property on line 54-55 of your HTML page (if you add more links, you need to add more as well). Remember that they all should be unique due to this script in JQuery requires somewhat hard-coded for element value assignment.

Thank you! But there are 11 ver values (320, 320a, 322, etc) and 2 lang for NA and 5 for EU... What i have to do here?? Can i add more rel to the link???

<a href="#" rel="languages-wow-full-NA-en_US-320">Americas &amp; Oceania</a> that only work for the first ver

<a href="#" rel="languages-wow-full-EU-en_GB-320" class="active">Europe</a> same here

Hmmm will this affect to the client downloads?

Thanks for your help!!

Could you provide those 4 css files? I am going to play with it to see how it looks.

Of coure and thanks again :)

http://www.mediafire.com/?pxyp09jrevfogll

Sorry but are not clean, are the original files and there are a lot of code unused. I have to delete all that not use the html.

Sorry, one more question about this... After looking at it, do you want to add "version" selection to the selection region as well? Currently, it is displaying all version of every language. Do you want it to display only 1 version each time besides the "full" version?

Version selection sounds to more work, or is the only way to make it work? Really I'd like to show all versions but only 1 language, like it is now. Because its more easy to people show the 11 versions at the same time. So it's harder do it?

Thats the idea, people select his language and downlaod the client + patches without do nothing more.

OK, I will take the version out then. The problem right now is that the script only display what is being hide, but never try to hide others that aren't the selected language. I will see what I can do and post back later.

OK, I modified the download.js a bit. Here is the script where it is modified.

// first portion modified is in LanguageSelection main declaration
/**
 * Toggles display of game client region & language selection.
 *
 * @class       LanguageSelection
 * @requires
 * @example
 *
 *      LanguageSelection.initialize();
 *
 */
var LanguageSelection = {
    langList: {},  // list of languages
    verList: {},   // list of versions
    links: {},
    initialize: function() {
      // declare all languages & versions
      LanguageSelection.langList["NA"] = ["en_US", "es_MX"];
      LanguageSelection.langList["EU"] = ["en_GB", "es_ES", "de_DE", "fr_FR", "ru_RU"];
      LanguageSelection.verList = ["320", "320a", "322", "322a", "330", "330a", "332", "333", "333a", "335", "335a"];

        LanguageSelection.links = $('.language-selection a');


// here is another portion in changeLanguage
changeLanguage: function(target) {
    var rel = target.split('-'),
        region = rel[3],
        game = rel[1],
        client = rel[2],
        lang = rel[4],
        name = $('#' + target).text(),
        id = game + '-' + client + '-' + region;

    // highlight the active language name
    $('#' + id + ' .active-language').text(name);
    $('#' + id + ' .languages a').removeClass('active');
    $('#' + target).addClass('active');

    // disable the main link
    $('#' + id + ' .download a').addClass('hidden');
    // enable/disable other related links
    var lList = LanguageSelection.langList[region];
    var vers = LanguageSelection.verList;
    for (var i=lList.length-1; i>=0; i--) {
      if (lList[i]==lang) {  // enable
        $('#win-'+game+'-'+client+'-'+region+'-'+lList[i]).removeClass('hidden');
        $('#mac-'+game+'-'+client+'-'+region+'-'+lList[i]).removeClass('hidden');
        for (var j=vers.length-1; j>=0; j--) {
          $('#win-'+game+'-'+client+'-'+region+'-'+lList[i]+'-'+vers[j]).removeClass('hidden');
          $('#mac-'+game+'-'+client+'-'+region+'-'+lList[i]+'-'+vers[j]).removeClass('hidden');
        }
      }
      else {  // disable
        $('#win-'+game+'-'+client+'-'+region+'-'+lList[i]).addClass('hidden');
        $('#mac-'+game+'-'+client+'-'+region+'-'+lList[i]).addClass('hidden');
        for (var j=vers.length-1; j>=0; j--) {
          $('#win-'+game+'-'+client+'-'+region+'-'+lList[i]+'-'+vers[j]).addClass('hidden');
          $('#mac-'+game+'-'+client+'-'+region+'-'+lList[i]+'-'+vers[j]).addClass('hidden');
        }
      }  // end if enable or disable
    }  // end for each language
}  // end changeLanguage

In your HTML file, you have a typo in id of an anchor element.

// this one
<a href="http://tinyurl.com/WoW-330-enUS-PC" class="link" id="win-wow-full-NA-en_U-330"><span class="icon"></span> Windows</a>
// should be
<a href="http://tinyurl.com/WoW-330-enUS-PC" class="link" id="win-wow-full-NA-en_US-330"><span class="icon"></span> Windows</a>

If you don't change, the link to region NA and version English will never be hidden.

WoW!!! :O

It works, but there are some conflicts with the original script and i'd like to be able to fix by myself... :(

What conflict? I may be able to explain.

Well, the "conflict" is when you press Americas & Oceania, all europe languages turned selected, i mean all them get the black buttom. Don't know why but the script gets broken.

Pffff sorry i have to improve my english. This is the new hosting: http://wow-spain.co.cc/downloads.html

And thanks for the help!

Sorry, my fault :P

I was using a old html, when i was testing the rel values.

Thank you so much Taywin for the work!

^.^

You are welcome. Please mark it as solved. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.