League of Legends Wiki

Comments35

LoLBox Tool - Get more out your infobox

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

I decided to use the wikia infobox to practice some JavaScript. Now I have an result I see no reason why not too share it with you guys. Jens-Ingels lolbox example

Installation

JS

Add this code to your personal js:

importArticles({
    type: "script",
    articles: [
        "User:Jens_Ingels/common.js/lolbox.js"
    ]
});

CSS

Add this code to your personal css:

#champion_info-lower table {
   position: relative;
}
#champion_info-lower #level {
   position: absolute;
   left: auto;
   right: 0;
}
#champion_info-lower #level #lv {
   background-color: black;
   color: white;
}

Support

Skins

Device Operating System Wikia Skin
pc windows oasis x
monobook -
wikiamobile -
mac oasis ?
monobook -
wikiamobile -
mobile windows oasis x
monobook -
wikiamobile -
mac oasis x
monobook -
wikiamobile -
Note: GameGuides use the wikiamobile skin to load his data.
The Oasis skin is the default on pc devices.
You can temp change skins by adding ?useskin=skinname to the url.

Browsers

IE IE10 or higher
Chrome  ?
Safari  ?

It's recommanded to get the latest version of your browser.

Version

Date Version Notes
12/04/2014 18:20 0.1.0 (béta) Code is ready for testing
13/04/2014 14:52 0.1.1 (béta)

This patch has been rushed to fix an critical error:

  • The values will now scale correctly with the levels.
  • The attack damage value now parse up to 2 digits.
17/04/2014 18:36 0.1.2 (béta)

The patch includes the following changes:

  • The script will now work on manaless champions.
  • The armor value now parse up to 2 digits.

Special Thanks to BryghtShadow for making the infobox adjustment.

Bugs

Console Error:

Attr.specified is deprecated. Its value is always true.
Note: This error will not generate any problem with the functionality of the script.

Feedback & Suggestions

Feedback on both design, functionality, expansion as the syntax itself are always helpfull. Don't be shy to give your idea's.

Upcoming Version

For the Upcoming Version I have decide to implement the database inside the script rather the grabbing it external. This would make it possible to compair the data an lot easyer than before and make it possible to implement more elements that where not possible before.

Q&A

Do I need to reinstall it every patch?

No, since the the code u used too install the script imports the lastest version of the script. This doesn't count for the CSS however. If CSS changes has been made I will clearly explane this in the patch.

Can I change the location of the level button?

It's possible to move the level button on another location so long you keep in mind you can't change the nesting itself. You can cheat with this however by including the min value even I don't recommand it. Here's an example:
#champion_info-lower #level {
   position: absolute;
   left: -100px;
   right: auto;
   top: -110px;
}

How can I make the level button bigger?

It's possible with CSS on serveral ways. One of the is by making the font-size bigger.

Can I remove the tekst of the button?

#champion_info-lower #level label {
   display: none;
}

End

The expand options by using JavaScript are relative infinite. After the code has been cleaned up I might want to expand it too the abilties section but that's just an idea. Maybe in the future add compaire tools to it. Who knowns ^^.

Have fun with it ;)

Also on Fandom

Random Wiki