We do our best to give you all information you need. Use the Search menu to search for the page you are looking for. The most used pages are on the side menu or in the Popular Pages page.

Do you miss important stuff or do you have suggestions? Let us know via Discord or in-game. Thank you for using our Wiki!

Difference between revisions of "User:Jplayer"

From GrinderScape Wiki
Jump to: navigation, search
 
Line 1: Line 1:
 
<html>
 
<html>
−
<div style="float: right; width: 260px; margin: 0 0 30px 30px;">
+
<!-- TEXT -->
−
<input id="database_input" type="text" list="item_datalist" placeholder="Search item..." style="width: 100%; box-sizing: border-box;">
+
<p style="font-weight: bold;">Text</p>
−
<button id="database_button" style="display: block; width: 100%; margin-top: 10px;">Search</button>
+
<input type="text" maxlength="30" value="Usertitle" id="text" class="update">
−
</div>
+
<br>
−
<p>Lorem ipsum dolor sit amet, per in omnium deleniti, usu amet bonorum insolens ei, no menandri inciderint quo. Ex usu iusto legere patrioque, vel magna maiorum at. Vim essent blandit te, ei omnes scripta facilis nam, est et tation contentiones consequuntur. Lorem ipsum dolor sit amet, per in omnium deleniti, usu amet bonorum insolens ei, no menandri inciderint quo. Ex usu iusto legere patrioque, vel magna maiorum at.</p>
+
<br>
−
<div id="search_results" hidden>
+
<!-- COLOR -->
−
<h1 id="item_name"></h1>
+
<p style="font-weight: bold;">Color</p>
−
<table style="width: 425px; table-layout: fixed; text-align: center;">
+
<input id="color" type="color" value="#C0C0C0" class="update">
−
<tr>
+
<br>
−
<td id="picture" rowspan="2" colspan="2"></th>
+
<br>
−
<th style="text-align: center!important;">Min price</th>
+
<!-- GLOW COLOR -->
−
<td id="min_price" colspan="2"></td>
+
<p style="font-weight: bold;">Glow Color</p>
−
</tr>
+
<input id="glowColor" type="color" value="#C0C0C0" class="update">
−
<tr>
+
<br>
−
<th style="text-align: center!important;">Max price</th>
+
<br>
−
<td id="max_price" colspan="2"></td>
+
<!-- GLOW RADIUS -->
−
</tr>
+
<p style="font-weight: bold;">Glow Radius</p>
−
<tr>
+
<div class="itemBackground"><input id="glowRadius" type="range" min="0" max="1000" value="1000" class="update"></div>
−
<th style="text-align: center!important;">Uses</th>
+
<br>
−
<td id="uses" colspan="4" style="text-align: left;"></td>
+
<!-- TEXT FORMATTING -->
−
</tr>
+
<p style="font-weight: bold;">Text Formatting</p>
−
<tr>
+
<div class="itemBackground" style="padding: 10px;">
−
<th style="text-align: center!important;">Notes</th>
+
<label><input type="checkbox" id="bold" class="update" checked=""><div style="line-height: 20px;">Bold</div></label>
−
<td id="notes" colspan="4" style="text-align: left;"></td>
+
<label><input type="checkbox" id="italic" class="update"><div style="line-height: 20px;">Italic</div></label>
−
</tr>
+
<label><input type="checkbox" id="strikethrough" class="update"><div style="line-height: 20px;">Strikethrough</div></label>
−
<tr>
+
<label><input type="checkbox" id="glitter" class="update"><div style="line-height: 20px;">Glitter</div></label>
−
<th style="text-align: center!important;">Sources</th>
+
</div>
−
<td id="sources" colspan="4" style="text-align: left;"></td>
+
<br>
−
</tr>
+
<!-- PREVIEW -->
−
<tr>
+
<p style="font-weight: bold;">Preview</p>
−
<th style="text-align: center!important;">Donator</th>
+
<div style="padding: 30px; background-color: #1D1D1D; text-align: center; border: 1px solid #A2A2A2; font-size: 12px;">
−
<th style="text-align: center!important;">Tradeable</th>
+
<span id="preview"></span>
−
<th style="text-align: center!important;">Noteable</th>
+
</div>
−
<th style="text-align: center!important;">Stackable</th>
+
<br>
−
<th style="text-align: center!important;">Equipable</th>
+
<!-- HTML CODE -->
−
</tr>
+
<p style="font-weight: bold;">HTML Code</p>
−
<tr>
+
<input type="text" id="code">
−
<td id="donator"></td>
+
−
<td id="tradeable"></td>
+
−
<td id="noteable"></td>
+
−
<td id="stackable"></td>
+
−
<td id="equipable"></td>
+
−
</tr>
+
−
</table>
+
  
  
Line 49: Line 42:
  
  
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 +
<script type="text/javascript">
  
 +
update();
  
 +
$( "input.update" ).change( function() {
 +
update();
 +
});
  
 +
function update() {
  
−
<table style="width: 425px; table-layout: fixed; text-align: center;">
+
var text = $( "input#text" ).val();
−
<tr>
+
var color = $( "input#color" ).val();
−
<th style="text-align: center!important;">Type</th>
+
var glowColor = $( "input#glowColor" ).val();
−
<th style="text-align: center!important;">Att bonus</th>
+
var glowRadius = $( "input#glowRadius" ).val() / 100;
−
<th style="text-align: center!important;">Def bonus</th>
+
−
<th style="text-align: center!important;" colspan="2">Skill requirements</th>
+
−
</tr>
+
−
<tr>
+
−
<th style="text-align: center!important;"><img title="Stab" src="https://i.imgur.com/XveJinC.png" style="height: 25px;"></th>
+
−
<td id="ab_stab"></td>
+
−
<td id="db_stab"></td>
+
−
<th style="text-align: center!important;"><img title="Defence" src="https://i.imgur.com/5ZxA3wR.png" style="height: 25px;"></th>
+
−
<td id="sr_defence"></td>
+
−
</tr>
+
−
<tr>
+
−
<th style="text-align: center!important;"><img title="Slash" src="https://i.imgur.com/aTbTRxt.png" style="height: 25px;"></th>
+
−
<td id="ab_slash"></td>
+
−
<td id="db_slash"></td>
+
−
<th style="text-align: center!important;"><img title="Attack" src="https://i.imgur.com/lFeARW8.png" style="height: 25px;"></th>
+
−
<td id="sr_attack"></td>
+
−
</tr>
+
−
<tr>
+
−
<th style="text-align: center!important;"><img title="Crush" src="https://i.imgur.com/tI6aZWK.png" style="height: 25px;"></th>
+
−
<td id="ab_crush"></td>
+
−
<td id="db_crush"></td>
+
−
<th style="text-align: center!important;"><img title="Strenght" src="https://i.imgur.com/v7CM3yV.png" style="height: 25px;"></th>
+
−
<td id="sr_strenght"></td>
+
−
</tr>
+
−
<tr>
+
−
<th style="text-align: center!important;"><img title="Magic" src="https://i.imgur.com/80TPEPp.png" style="height: 25px;"></th>
+
−
<td id="ab_magic"></td>
+
−
<td id="db_magic"></td>
+
−
<th style="text-align: center!important;"><img title="Ranged" src="https://i.imgur.com/Yh28JyT.png" style="height: 25px;"></th>
+
−
<td id="sr_ranged"></td>
+
−
</tr>
+
−
<tr>
+
−
<th style="text-align: center!important;"><img title="Ranged" src="https://i.imgur.com/xACgS5I.png" style="height: 25px;"></th>
+
−
<td id="ab_range"></td>
+
−
<td id="db_range"></td>
+
−
<th style="text-align: center!important;"><img title="Magic" src="https://i.imgur.com/54JcLkG.png" style="height: 25px;"></th>
+
−
<td id="sr_magic"></td>
+
−
</tr>
+
−
<tr>
+
−
<th style="text-align: center!important;" colspan="3">Other bonuses</th>
+
−
<th style="text-align: center!important;"><img title="Hitpoints" src="https://i.imgur.com/SwPB2vN.png" style="height: 25px;"></th>
+
−
<td id="sr_hitpoints"></td>
+
−
</tr>
+
−
<tr>
+
−
<th style="text-align: center!important;"><img title="Strenght" src="https://i.imgur.com/v7CM3yV.png" style="height: 25px;"></th>
+
−
<td id="ob_strenght" colspan="2"></td>
+
−
<th style="text-align: center!important;"><img title="Prayer" src="https://i.imgur.com/CpPlErx.png" style="height: 25px;"></th>
+
−
<td id="sr_prayer"></td>
+
−
</tr>
+
−
<tr>
+
−
<th style="text-align: center!important;"><img title="Prayer" src="https://i.imgur.com/CpPlErx.png" style="height: 25px;"></th>
+
−
<td id="ob_prayer" colspan="2"></td>
+
−
<th style="text-align: center!important;"><img title="Slayer" src="https://i.imgur.com/jgAlsxq.png" style="height: 25px;"></th>
+
−
<td id="sr_slayer"></td>
+
−
</tr>
+
−
<tr>
+
−
<th style="text-align: center!important;">Class</th>
+
−
<th style="text-align: center!important;" colspan="2">Degradable</th>
+
−
<th style="text-align: center!important;" colspan="2">Slot</th>
+
−
</tr>
+
−
<tr>
+
−
<td id="class"></td>
+
−
<td id="degradable" colspan="2"></td>
+
−
<td id="slot" colspan="2"></td>
+
−
</tr>
+
−
</table>
+
−
</div>
+
−
<div id="no_results" hidden>
+
−
<h1>Item not found</h1>
+
−
<p>Your search didn't match any listings. This may be due to one of the following reasons:</p>
+
−
<ul>
+
−
<li>Your input contains spelling errors.</li>
+
−
<li>The item you're looking for is not in the database.</li>
+
−
</ul>
+
−
<p>If you have information about an item we are missing, please contact a member of the <a href="https://newwiki.grinderscape.org/Main_Page/Wiki_team">wiki team</a>!</p>
+
−
</div>
+
  
 +
// TEXT SHADOW
  
 +
if ( glowRadius == 0 ) {
 +
var textShadow = "text-shadow: none;";
 +
} else {
 +
var textShadow = "text-shadow: 0 0 " + glowRadius + "px " + glowColor + ";";
 +
}
  
 +
// TEXT FORMATTING
  
 +
if ( $( "input#bold" ).is( ":checked" ) ) {
 +
var fontWeight = "bold;";
 +
} else {
 +
var fontWeight = "normal;";
 +
}
  
−
<!------------------------ COPY THE DATABASE CODE HERE ------------------------>
+
if ( $( "input#italic" ).is( ":checked" ) ) {
 +
var fontStyle = "italic;";
 +
} else {
 +
var fontStyle = "initial;";
 +
}
  
−
<div id='item_database' hidden><div item='abyssal vine whip'>Abyssal vine whip;21371;12000000000;12000000000;No;Yes;No;No;Yes;+15;+95;+15;+15;+0;+10;+10;+10;+10;+10;+105;+7;Mainhand;Melee;No;1;75;1;1;1;1;1;80;part, pkp;Wield for combat.;</div><div item='torva platebody'>Torva platebody;20139;4000000000;4000000000;No;Yes;No;No;Yes;+10;+10;+12;-31;-11;+156;+140;+120;-10;+160;+7;+1;Torso;Melee;No;80;1;1;1;1;80;1;1;prem;Worn for protection.;</div></div><datalist id='item_datalist'><option value='Abyssal vine whip'>Abyssal vine whip</option><option value='Torva platebody'>Torva platebody</option></datalist>
+
if ( $( "input#strikethrough" ).is( ":checked" ) ) {
 +
var textDecoration = "line-through;";
 +
} else {
 +
var textDecoration = "initial;";
 +
}
  
−
<!------------------------ COPY THE DATABASE CODE HERE ------------------------>
+
if ( $( "input#glitter" ).is( ":checked" ) ) {
 +
var background = "url(http://forum.grinderscape.org/images/Crowns/Glitter.gif);";
 +
} else {
 +
var background = "none;";
 +
}
  
 +
var textFormatting = "font-weight:" + fontWeight + "font-style:" + fontStyle + "text-decoration:" + textDecoration + "background:" + background;
  
 +
var style = "color:" + color + ";" + textShadow + textFormatting;
 +
$( "span#preview" ).html( text ).attr( "style", style );
  
 +
$( "input#code" ).val( "<span style='" + style + "'>" + text + "</span>"  );
  
 +
}
  
 +
</script>
 
</html>
 
</html>

Latest revision as of 00:25, 27 May 2016

Text



Color



Glow Color



Glow Radius


Text Formatting


Preview


HTML Code

Retrieved from "https://wiki.grinderscape.org/index.php?title=User:Jplayer&oldid=1251"