JSFiddle - React, Tailwind, and code Playground
by Stev Peifer
JavaScript
$('<div />',{
'style':'background-image:'+(option[index].name?'url(\'http://tip.it/runescape/images/misc/ability'+option[index].name.toString().titleCapitalize()+'.png\')':'none')+';height:100%;position:relative;width:100%;'
}
).appendTo(_this.find('>a:eq('+index+')'));
$('<span />',{
'style':'bottom:0;color:white;font-size:10px;left:3px;position:absolute;text-shadow:0 1px #000;'
}
).appendTo(_this.find('>a:eq('+index+')>div'));
if(option[index].name){
$('<div />',{
'style':'background-image:url(\'http://tip.it/runescape/images/misc/abilityInformationBackground.png\');bottom:-162px;height:169px;left:-110px;position:absolute;width:250px;'
}
).appendTo(_this.find('>a:eq('+index+')>div'));
$('<div />',{
'style':'height:100%;position:relative;width:100%;'
}
).appendTo(_this.find('>a:eq('+index+')>div>div'));
$('<img />',{
'src':'http://tip.it/runescape/images/misc/ability'+option[index].name.titleCapitalize()+'.png',
'style':'left:4px;position:absolute;top:12px;'
}
).appendTo(_this.find('>a:eq('+index+')>div>div>div'));
//~ Name and class
$('<div />',{
'style':'color:#b37a2f;font-size:11px;left:39px;line-height:15px;position:absolute;top:12px;'
}
).appendTo(_this.find('>a:eq('+index+')>div>div>div'));
_this.find('>a:eq('+index+')>div>div>div>div').html(option[index].name.titleCapitalize()+'<br />'+abilityArray[$.inArray(option[index].name.titleCapitalize(),abilityName)]['class']+' Ability');
...