Javascript  »  Nützliches  »  Scrollbalken DesignTool

zur Übersicht

Kategorie	Nützliches
Bezeichnung	Scrollbalken DesignTool
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	18797 Aufrufe davon 0x gestern
Dieses Script kopieren Sie sich am besten komplett auf Ihren Rechner, da es mit unserer Seite online nicht funktioniert (sich widersprechende StyleSheets). Offline oder ohne andere StyleSheets klappt alles.
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <script language="JavaScript"> window.resizeTo(700,700); </script> <script language="JScript"> function copy2Clipboard() { // Copies currently displayed code to user's clipboard taCode.innerText = code.innerText; textRange = taCode.createTextRange(); textRange.execCommand("RemoveFormat"); textRange.execCommand("Copy"); } --> </script> <script language="VBSCRIPT"> <!-- function fnReset() // Unbold all spans s3d1.style.fontWeight = "normal" s3d2.style.fontWeight = "normal" sArrow1.style.fontWeight = "normal" sArrow2.style.fontWeight = "normal" sBase1.style.fontWeight = "normal" sBase2.style.fontWeight = "normal" sDark1.style.fontWeight = "normal" sDark2.style.fontWeight = "normal" sFace1.style.fontWeight = "normal" sFace2.style.fontWeight = "normal" sHighlight1.style.fontWeight = "normal" sHighlight2.style.fontWeight = "normal" sShadow1.style.fontWeight = "normal" sShadow2.style.fontWeight = "normal" end function function fnChange(sInProp) fnReset() Select Case sInProp Case "3d" oTextArea.style.scrollbar3dLightColor = _ o3d.options(o3d.selectedIndex).value s3d2.innerText = o3d.options(o3d.selectedIndex).value s3d2.style.fontWeight = "bold" s3d1.style.fontWeight = "bold" Case "arrow" oTextArea.style.scrollbarArrowColor = _ oArrow.options(oArrow.selectedIndex).value sArrow2.innerText = oArrow.options(oArrow.selectedIndex).value sArrow2.style.fontWeight = "bold" sArrow1.style.fontWeight = "bold" Case "base" oTextArea.style.scrollbarBaseColor = _ oBase.options(oBase.selectedIndex).value sBase2.innerText = oBase.options(oBase.selectedIndex).value sBase2.style.fontWeight = "bold" sBase1.style.fontWeight = "bold" Case "dark" oTextArea.style.scrollbarDarkShadowColor = _ oDark.options(oDark.selectedIndex).value sDark2.innerText = oDark.options(oDark.selectedIndex).value sDark2.style.fontWeight = "bold" sDark1.style.fontWeight = "bold" Case "face" oTextArea.style.scrollbarFaceColor = _ oFace.options(oFace.selectedIndex).value sFace2.innerText = oFace.options(oFace.selectedIndex).value sFace2.style.fontWeight = "bold" sFace1.style.fontWeight = "bold" Case "highlight" oTextArea.style.scrollbarHighlightColor = _ oHighlight.options(oHighlight.selectedIndex).value sHighlight2.innerText = oHighlight.options(oHighlight.selectedIndex).value sHighlight2.style.fontWeight = "bold" sHighlight1.style.fontWeight = "bold" Case "shadow" oTextArea.style.scrollbarShadowColor = _ oShadow.options(oShadow.selectedIndex).value sShadow2.innerText = oShadow.options(oShadow.selectedIndex).value sShadow2.style.fontWeight = "bold" sShadow1.style.fontWeight = "bold" End Select end function '--> </script> <!-- END_CLIENT_SCRIPT --> <!-- START_CLIENT_STYLE --> <style> P { margin-top: .6em; margin-bottom: .6em; } BODY { margin-left: 0pt; margin-top: 0pt; font-size: 80%; font-family: Verdana, Arial, Helvetica, MS Sans Serif; } H1 { font-size: 145%; margin-top: 1.35em; margin-bottom: .5em; } PRE { font-family: Courier New; font-size: 130%; background: #EEEEEE; margin-top: 1em; margin-bottom: 1em; margin-left: 0pt; padding-top: 5pt; padding-bottom: 5pt; padding-left: 5pt; padding-right: 5pt; } TABLE { font-size: 100%; } TR { vertical-align: top; } TD { margin: 3pt; } </style> <div class="clsDocBody"> <p> <table border="2" bgcolor="#DDDDDD" width="100%"> <tr> <td valign="TOP"> <table width="401"> <tr> <td background="graygrid.gif" align=center valign="CENTER" bgcolor="#EEEEEE" height="300" width="400"> <textarea cols=40 rows=5 wrap=off id="oTextArea" onkeyup="sTextArea.innerText=oTextArea.innerText"> Dieser Text befindet sich in einer TEXTAREA. Dieser Text befindet sich in einer TEXTAREA. Dieser Text befindet sich in einer TEXTAREA. Dieser Text befindet sich in einer TEXTAREA. Dieser Text befindet sich in einer TEXTAREA. </textarea> </td> </tr> <tr bgcolor="#DDDDDD"> <td align="CENTER"><br> <table bgcolor="#DDDDDD" cellpadding="2"> <tr> <td align="RIGHT">scrollbar-3dlight-color </td> <td style="padding-left:5"> <select id="o3d" onchange="fnChange('3d')"> <option value="" selected>none</option> <option style="color:aqua" value="aqua">aqua</option> <option style="color:blue" value="blue">blue</option> <option style="color:chartreuse" value="chartreuse">chartreuse</option> <option style="color:darksalmon" value="darksalmon">darksalmon</option> <option style="color:fuchsia" value="fuchsia">fuchsia</option> <option style="color:gold" value="gold">gold</option> <option style="color:hotpink" value="hotpink">hotpink</option> <option style="color:khaki" value="khaki">khaki</option> <option style="color:lightsalmon" value="lightsalmon">lightsalmon</option> <option style="color:magenta" value="magenta">magenta</option> <option style="color:orange" value="orange">orange</option> <option style="color:palegreen" value="palegreen">palegreen</option> <option style="color:teal" value="teal">teal</option> <option style="color:tomato" value="tomato">tomato</option> <option style="color:yellow" value="yellow">yellow</option> </select> </td> </tr> <tr> <td align="RIGHT">scrollbar-arrow-color </td> <td style="padding-left:5"> <select id="oArrow" onchange="fnChange('arrow')"> <option value="" selected>none</option> <option style="color:aqua" value="aqua">aqua</option> <option style="color:blue" value="blue">blue</option> <option style="color:chartreuse" value="chartreuse">chartreuse</option> <option style="color:darksalmon" value="darksalmon">darksalmon</option> <option style="color:fuchsia" value="fuchsia">fuchsia</option> <option style="color:gold" value="gold">gold</option> <option style="color:hotpink" value="hotpink">hotpink</option> <option style="color:khaki" value="khaki">khaki</option> <option style="color:lightsalmon" value="lightsalmon">lightsalmon</option> <option style="color:magenta" value="magenta">magenta</option> <option style="color:orange" value="orange">orange</option> <option style="color:palegreen" value="palegreen">palegreen</option> <option style="color:teal" value="teal">teal</option> <option style="color:tomato" value="tomato">tomato</option> <option style="color:yellow" value="yellow">yellow</option> </select> </td> </tr> <tr> <td align="RIGHT">scrollbar-base-color </td> <td style="padding-left:5"> <select id="oBase" onchange="fnChange('base')"> <option value="" selected>none</option> <option style="color:aqua" value="aqua">aqua</option> <option style="color:blue" value="blue">blue</option> <option style="color:chartreuse" value="chartreuse">chartreuse</option> <option style="color:darksalmon" value="darksalmon">darksalmon</option> <option style="color:fuchsia" value="fuchsia">fuchsia</option> <option style="color:gold" value="gold">gold</option> <option style="color:hotpink" value="hotpink">hotpink</option> <option style="color:khaki" value="khaki">khaki</option> <option style="color:lightsalmon" value="lightsalmon">lightsalmon</option> <option style="color:magenta" value="magenta">magenta</option> <option style="color:orange" value="orange">orange</option> <option style="color:palegreen" value="palegreen">palegreen</option> <option style="color:teal" value="teal">teal</option> <option style="color:tomato" value="tomato">tomato</option> <option style="color:yellow" value="yellow">yellow</option> </select> </td> </tr> <tr> <td align="RIGHT">scrollbar-darkshadow-color </td> <td style="padding-left:5"> <select id="oDark" onchange="fnChange('dark')"> <option value="" selected>none</option> <option style="color:aqua" value="aqua">aqua</option> <option style="color:blue" value="blue">blue</option> <option style="color:chartreuse" value="chartreuse">chartreuse</option> <option style="color:darksalmon" value="darksalmon">darksalmon</option> <option style="color:fuchsia" value="fuchsia">fuchsia</option> <option style="color:gold" value="gold">gold</option> <option style="color:hotpink" value="hotpink">hotpink</option> <option style="color:khaki" value="khaki">khaki</option> <option style="color:lightsalmon" value="lightsalmon">lightsalmon</option> <option style="color:magenta" value="magenta">magenta</option> <option style="color:orange" value="orange">orange</option> <option style="color:palegreen" value="palegreen">palegreen</option> <option style="color:teal" value="teal">teal</option> <option style="color:tomato" value="tomato">tomato</option> <option style="color:yellow" value="yellow">yellow</option> </select> </td> </tr> <tr> <td align="RIGHT">scrollbar-face-color </td> <td style="padding-left:5"> <select id="oFace" onchange="fnChange('face')"> <option value="" selected>none</option> <option style="color:aqua" value="aqua">aqua</option> <option style="color:blue" value="blue">blue</option> <option style="color:chartreuse" value="chartreuse">chartreuse</option> <option style="color:darksalmon" value="darksalmon">darksalmon</option> <option style="color:fuchsia" value="fuchsia">fuchsia</option> <option style="color:gold" value="gold">gold</option> <option style="color:hotpink" value="hotpink">hotpink</option> <option style="color:khaki" value="khaki">khaki</option> <option style="color:lightsalmon" value="lightsalmon">lightsalmon</option> <option style="color:magenta" value="magenta">magenta</option> <option style="color:orange" value="orange">orange</option> <option style="color:palegreen" value="palegreen">palegreen</option> <option style="color:teal" value="teal">teal</option> <option style="color:tomato" value="tomato">tomato</option> <option style="color:yellow" value="yellow">yellow</option> </select> </td> </tr> <tr> <td align="RIGHT">scrollbar-highlight-color </td> <td style="padding-left:5"> <select id="oHighlight" onchange="fnChange('highlight')"> <option value="" selected>none</option> <option style="color:aqua" value="aqua">aqua</option> <option style="color:blue" value="blue">blue</option> <option style="color:chartreuse" value="chartreuse">chartreuse</option> <option style="color:darksalmon" value="darksalmon">darksalmon</option> <option style="color:fuchsia" value="fuchsia">fuchsia</option> <option style="color:gold" value="gold">gold</option> <option style="color:hotpink" value="hotpink">hotpink</option> <option style="color:khaki" value="khaki">khaki</option> <option style="color:lightsalmon" value="lightsalmon">lightsalmon</option> <option style="color:magenta" value="magenta">magenta</option> <option style="color:orange" value="orange">orange</option> <option style="color:palegreen" value="palegreen">palegreen</option> <option style="color:teal" value="teal">teal</option> <option style="color:tomato" value="tomato">tomato</option> <option style="color:yellow" value="yellow">yellow</option> </select> </td> </tr> <tr> <td align="RIGHT">scrollbar-shadow-color </td> <td style="padding-left:5"> <select id="oShadow" onchange="fnChange('shadow')"> <option value="" selected>none</option> <option style="color:aqua" value="aqua">aqua</option> <option style="color:blue" value="blue">blue</option> <option style="color:chartreuse" value="chartreuse">chartreuse</option> <option style="color:darksalmon" value="darksalmon">darksalmon</option> <option style="color:fuchsia" value="fuchsia">fuchsia</option> <option style="color:gold" value="gold">gold</option> <option style="color:hotpink" value="hotpink">hotpink</option> <option style="color:khaki" value="khaki">khaki</option> <option style="color:lightsalmon" value="lightsalmon">lightsalmon</option> <option style="color:magenta" value="magenta">magenta</option> <option style="color:orange" value="orange">orange</option> <option style="color:palegreen" value="palegreen">palegreen</option> <option style="color:teal" value="teal">teal</option> <option style="color:tomato" value="tomato">tomato</option> <option style="color:yellow" value="yellow">yellow</option> </select> </td> </tr> </table> </td> </tr> </table> </td> <td> <table bordercolor="#AAAAAA" bgcolor="#FFFFFF" height="100%"> <tr height="80"> <td bgcolor="#DDDDDD" style="border-width:1; border-style:solid; padding-left:5; padding-right:5"> <h3 align="center">Einstellungen für die Scrollbars</h3> Bearbeiten Sie den Text in dem Eingabefeld auf der linken Siete. Den fertigen Code sehen Sie unterhalb dieser Zeilen.<br> </td> </tr> <tr height="*"> <td bgcolor="#FFFFFF" valign="top"> <span id="code" style="height:400px; width:100%; overflow-y:auto;"> <HTML><br> <HEAD><br>   <STYLE><br>     .TA {<span id="s3d1">scrollbar-3dlight-color:</span><span id="s3d2"></span>;<br>            <span id="sArrow1">scrollbar-arrow-color:</span><span id="sArrow2"></span>;<br>            <span id="sBase1">scrollbar-base-color:</span><span id="sBase2"></span>;<br>            <span id="sDark1">scrollbar-darkshadow-color:</span><span id="sDark2"></span>;<br>            <span id="sFace1">scrollbar-face-color:</span><span id="sFace2"></span>;<br>            <span id="sHighlight1">scrollbar-highlight-color:</span><span id="sHighlight2"></span>;<br>            <span id="sShadow1">scrollbar-shadow-color:</span><span id="sShadow2"></span>}<br>   </STYLE><br> </HEAD><br> <BODY><br> <TEXTAREA cols=30 rows=5 wrap=off CLASS="TA"><span id="sTextArea"> Dieser Text befindet sich in einer TEXTAREA.<br> Dieser Text befindet sich in einer TEXTAREA.<br> Dieser Text befindet sich in einer TEXTAREA.<br> Dieser Text befindet sich in einer TEXTAREA.<br> </span></TEXTAREA><br> </BODY><br> </HTML><br> </span> <textarea id="taCode" style="display:none;"></textarea> </td> </tr> <tr> <td bgcolor="#DDDDDD" style="border-width:1; border-style:solid; padding-left:5; padding-right:5" height="20"> <button style="margin-top:3; margin-bottom:3;" onclick="copy2Clipboard();">Den Code in die Zwischenablage kopieren</button> </td> </tr> </table> </td> </tr> </table>

Kommentare zu Scrollbalken DesignTool

0 Kommentar(e) vorhanden / Anzeige der neuesten 5

Noch keine Kommentare zu diesem Javascript vorhanden.


Alle Kommentare anzeigen   -   Kommentar hinzufügen