To contact staff directly or to report bugs, please use Special:Contact.
- Premise
I want to add game icons to the DLC links in the the top navigation drop downs on the BioShock Wiki. These icons would indicate which game each DLC is from and would replace the name of the game which currently appears in each link.
You can see what the drop down links currently look like on the BioShock Wiki. In the top navigation, mouseover "BioShock Series", then "Downloadable Content" to see the links I am referring to.
- The code
I've already created some jQuery code that can do this, and you can see it in action at my test wiki. (Mouseover "Menu icons test" then "Downloadable Content" to see the icons.)
However, my code contains a lot of redundant sections, and I'd like to know whether there is a better way to do this. I'm a novice when it comes to JavaScript, so the code I made is probably very inefficient.
$(function() {
var bioDLC = $(".WikiHeaderRestyle > nav .subnav-3 li a:contains('BioShock:')");
var bio2DLC = $(".WikiHeaderRestyle > nav .subnav-3 li a:contains('BioShock 2:')");
var bioicon = '<img width="64" height="23" style="float:left;padding-right:3px;position:relative;z-index:1;" src="http://images1.wikia.nocookie.net/__cb20110408221110/bioshock/images/thumb/2/25/BioShockicon.png/64px-BioShockicon.png" alt="BioShockicon.png">';
var bio2icon = '<img width="58" height="25" style="float:left;padding-right:3px;position:relative;z-index:1;" src="http://images4.wikia.nocookie.net/__cb20110422051631/bioshock/images/thumb/a/aa/BioShock2icon.png/58px-BioShock2icon.png" alt="BioShock2icon.png">';
var newtext;
bioDLC.each(function() {
var newtext = $(this).text().replace('BioShock:', ' ');
$(this).text(newtext);
$(this).before(bioicon);
if($(this).text().length > 15){
$(this).siblings('img').css('padding-top','10px');
}
});
bio2DLC.each(function() {
var newtext = $(this).text().replace('BioShock 2:', ' ');
$(this).text(newtext);
$(this).before(bio2icon);
if($(this).text().length > 18){
$(this).siblings('img').css('padding-top','10px');
}
});
});
Please, if you have experience with JavaScript, give me your advice on how I could do this in a better way. --Gardimuer { ʈalk } 16:11, April 4, 2012 (UTC)
- Well, I'm no expert at JS, but have you considered using CSS to add the icons? I'm sure a few ::before rules will add those icons fine. You'd have to get rid of the game name at the start, and wrap the dlc name in a span with a unique class. Of course, I generally use CSS in bad ways, so it may not be the best way to go. ǝsʞpɐןǝ (message wall) 16:22, 4/04/2012
- The JavaScript looks fine to me. The way you correct the image placement is a little weird though. I would probably place the images in spans, format them as table cells and align the contents vertically:
$(function() {
var searchAndReplace = {
'BioShock:' : 'http://images1.wikia.nocookie.net/__cb20110408221110/bioshock/images/thumb/2/25/BioShockicon.png/64px-BioShockicon.png',
'BioShock 2:' : 'http://images4.wikia.nocookie.net/__cb20110422051631/bioshock/images/thumb/a/aa/BioShock2icon.png/58px-BioShock2icon.png'
}
for (var i in searchAndReplace) {
$(".WikiHeaderRestyle a.subnav-3a:contains('" + i + "')").html(function (j, html) {
return
'<span style="display: table-row">' +
'<span style="width: 70px; display: table-cell; vertical-align: middle;">' +
'<img src="' + searchAndReplace[i] + '" />' +
'</span>' +
'<span style="display: table-cell; vertical-align: middle;">' +
html.substr(i.length) +
'</span>' +
'</span>';
});
}
});
- Just an FYI... you should probably only do this if the skin = oasis. I was told that added HTML was the reasons for the navigation bugging for mobile devices. Also, you could have grabbed me in IRC. =p Rappy 22:24, April 4, 2012 (UTC)
- @Rappy: I don't know much about Monobook, but it doesn't look like it uses class WikiHeaderRestyle. Without elements of that class Gardimuer's code (and my variation) would stay inactive. It shouln't cause any problems under Monobook then. -- pecoes 05:28, April 05, 2012 (UTC)
- I wasn't worried about Monobook. Staff said that the new Navigation was changed to not allow HTML to be added via the file because it fubar'd mobile devices. I am not sure if adding them via JS does the same. I don't have a mobile device to test... so I was just issuing the warning. Mobile devices probably wouldn't want the extra images there either way. Rappy 05:47, April 5, 2012 (UTC)
- Do you have a link to that statement by Staff? -- pecoes 06:00, April 05, 2012 (UTC)
(Reset indent) The quote was in Skype.
[2/15/2012 16:58:13] sannse: What happened is that rendering html in the navigation was breaking mobiles. so rather than rewriting it as a separate thing for that platform (and because the ability to add html wasn't an actual intended feature, just something that could be added as a workaround/side-effect of the code) they just stopped it parsing totally
As I said above, I have no clue if that was limited to only HTML added through the Wiki-navigation file or if it would also affect HTML added via JS to the rendered navigation. I am not able to test myself to find out. If someone wants to, they can check out the 4th level menus on Aion to see if they are broken. Rappy 07:51, April 5, 2012 (UTC)
- My apologies, Rappy! What you said sounded a little vague, so I suspected you only gave us half the message. But this statement by Sannse is... er... I don't even know what it means. -- pecoes 08:25, April 05, 2012 (UTC)