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
(15 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
− | < | + | <!-- TEXT --> |
− | + | <p style="font-weight: bold;">Text</p> | |
− | <input | + | <input type="text" maxlength="30" value="Usertitle" id="text" class="update"> |
− | + | <br> | |
− | + | <br> | |
− | + | <!-- COLOR --> | |
− | + | <p style="font-weight: bold;">Color</p> | |
− | + | <input id="color" type="color" value="#C0C0C0" class="update"> | |
− | + | <br> | |
− | < | + | <br> |
− | < | + | <!-- GLOW COLOR --> |
− | + | <p style="font-weight: bold;">Glow Color</p> | |
− | + | <input id="glowColor" type="color" value="#C0C0C0" class="update"> | |
− | < | + | <br> |
− | + | <br> | |
− | + | <!-- GLOW RADIUS --> | |
− | + | <p style="font-weight: bold;">Glow Radius</p> | |
− | < | + | <div class="itemBackground"><input id="glowRadius" type="range" min="0" max="1000" value="1000" class="update"></div> |
− | < | + | <br> |
− | + | <!-- TEXT FORMATTING --> | |
− | + | <p style="font-weight: bold;">Text Formatting</p> | |
− | < | + | <div class="itemBackground" style="padding: 10px;"> |
− | + | <label><input type="checkbox" id="bold" class="update" checked=""><div style="line-height: 20px;">Bold</div></label> | |
− | + | <label><input type="checkbox" id="italic" class="update"><div style="line-height: 20px;">Italic</div></label> | |
− | + | <label><input type="checkbox" id="strikethrough" class="update"><div style="line-height: 20px;">Strikethrough</div></label> | |
− | < | + | <label><input type="checkbox" id="glitter" class="update"><div style="line-height: 20px;">Glitter</div></label> |
− | < | + | </div> |
− | + | <br> | |
− | + | <!-- PREVIEW --> | |
− | < | + | <p style="font-weight: bold;">Preview</p> |
− | + | <div style="padding: 30px; background-color: #1D1D1D; text-align: center; border: 1px solid #A2A2A2; font-size: 12px;"> | |
− | + | <span id="preview"></span> | |
− | + | </div> | |
− | < | + | <br> |
− | < | + | <!-- HTML CODE --> |
− | + | <p style="font-weight: bold;">HTML Code</p> | |
− | + | <input type="text" id="code"> | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <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() { | |
− | + | ||
− | + | var text = $( "input#text" ).val(); | |
− | + | var color = $( "input#color" ).val(); | |
− | < | + | var glowColor = $( "input#glowColor" ).val(); |
− | + | var glowRadius = $( "input#glowRadius" ).val() / 100; | |
− | + | ||
− | + | // 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;"; | |
− | + | } | |
− | + | ||
− | + | if ( $( "input#italic" ).is( ":checked" ) ) { | |
− | + | var fontStyle = "italic;"; | |
− | + | } else { | |
− | + | var fontStyle = "initial;"; | |
− | + | } | |
− | + | ||
− | + | if ( $( "input#strikethrough" ).is( ":checked" ) ) { | |
− | + | var textDecoration = "line-through;"; | |
− | + | } else { | |
− | + | var textDecoration = "initial;"; | |
− | + | } | |
− | + | ||
− | + | 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