summaryrefslogtreecommitdiffstats
path: root/slider/css
diff options
context:
space:
mode:
authorAndreas Unterkircher <unki@netshadow.at>2007-07-22 10:09:14 +0000
committerAndreas Unterkircher <unki@netshadow.at>2007-07-22 10:09:14 +0000
commitd989420a0c316a8c1f9a643418669496f807094b (patch)
tree80a484fa29156959d2c794311ef268654725ccf2 /slider/css
parentfd60c69466028220a85533ba9e1abededfaf1e95 (diff)
issue46, added a javascript-based slider to modify slide-interval
git-svn-id: file:///var/lib/svn/phpfspot/trunk@242 fa6a889d-dae6-447d-9e79-4ba9a3039384
Diffstat (limited to 'slider/css')
-rw-r--r--slider/css/bluecurve/bluecurve.css79
-rw-r--r--slider/css/bluecurve/handle.horizontal.pngbin0 -> 286 bytes
-rw-r--r--slider/css/bluecurve/handle.vertical.pngbin0 -> 352 bytes
-rw-r--r--slider/css/bluecurve/horizontal.gifbin0 -> 1242 bytes
-rw-r--r--slider/css/bluecurve/vertical.gifbin0 -> 345 bytes
-rw-r--r--slider/css/boxsizing.htc157
-rw-r--r--slider/css/luna/handle.horizontal.hover.pngbin0 -> 440 bytes
-rw-r--r--slider/css/luna/handle.horizontal.pngbin0 -> 443 bytes
-rw-r--r--slider/css/luna/handle.vertical.hover.pngbin0 -> 395 bytes
-rw-r--r--slider/css/luna/handle.vertical.pngbin0 -> 398 bytes
-rw-r--r--slider/css/luna/luna.css75
-rw-r--r--slider/css/swing/handle.horizontal.pngbin0 -> 288 bytes
-rw-r--r--slider/css/swing/handle.vertical.pngbin0 -> 271 bytes
-rw-r--r--slider/css/swing/swing.css82
-rw-r--r--slider/css/winclassic.css99
15 files changed, 492 insertions, 0 deletions
diff --git a/slider/css/bluecurve/bluecurve.css b/slider/css/bluecurve/bluecurve.css
new file mode 100644
index 0000000..6867382
--- /dev/null
+++ b/slider/css/bluecurve/bluecurve.css
@@ -0,0 +1,79 @@
+/*
+ back: rgb(230,230,230)
+ dark: rgb(90,97,90)
+ medium rgb(189,190,189)
+ */
+
+.dynamic-slider-control {
+ position: relative;
+ -moz-user-focus: normal;
+ -moz-user-select: none;
+ cursor: default;
+}
+
+.horizontal {
+ width: 200px;
+ height: 27px;
+}
+
+.vertical {
+ width: 29px;
+ height: 200px;
+}
+
+.dynamic-slider-control input {
+ display: none;
+}
+
+.dynamic-slider-control .handle {
+ position: absolute;
+ font-size: 1px;
+ overflow: hidden;
+ -moz-user-select: none;
+ cursor: default;
+}
+
+.dynamic-slider-control.horizontal .handle {
+ width: 31px;
+ height: 14px;
+ background-image: url("handle.horizontal.png");
+}
+
+.dynamic-slider-control.horizontal .handle div {}
+.dynamic-slider-control.horizontal .handle.hover {}
+
+.dynamic-slider-control.vertical .handle {
+ width: 15px;
+ height: 31px;
+ background-image: url("handle.vertical.png");
+}
+
+.dynamic-slider-control.vertical .handle.hover {}
+
+.dynamic-slider-control .line {
+ position: absolute;
+ font-size: 0.01mm;
+ overflow: hidden;
+ border: 1px solid rgb(90,97,90);
+ background: rgb(189,190,189);
+
+ behavior: url("css/boxsizing.htc"); /* ie path bug */
+ box-sizing: content-box;
+ -moz-box-sizing: content-box;
+}
+.dynamic-slider-control.vertical .line {
+ width: 3px;
+}
+
+.dynamic-slider-control.horizontal .line {
+ height: 3px;
+}
+
+.dynamic-slider-control .line div {
+ width: 1px;
+ height: 1px;
+
+ border: 1px solid;
+ border-color: rgb(230,230,230) rgb(189,190,189)
+ rgb(189,190,189) rgb(230,230,230);
+}
diff --git a/slider/css/bluecurve/handle.horizontal.png b/slider/css/bluecurve/handle.horizontal.png
new file mode 100644
index 0000000..d9dc7ff
--- /dev/null
+++ b/slider/css/bluecurve/handle.horizontal.png
Binary files differ
diff --git a/slider/css/bluecurve/handle.vertical.png b/slider/css/bluecurve/handle.vertical.png
new file mode 100644
index 0000000..0c00f85
--- /dev/null
+++ b/slider/css/bluecurve/handle.vertical.png
Binary files differ
diff --git a/slider/css/bluecurve/horizontal.gif b/slider/css/bluecurve/horizontal.gif
new file mode 100644
index 0000000..39d816b
--- /dev/null
+++ b/slider/css/bluecurve/horizontal.gif
Binary files differ
diff --git a/slider/css/bluecurve/vertical.gif b/slider/css/bluecurve/vertical.gif
new file mode 100644
index 0000000..781eaac
--- /dev/null
+++ b/slider/css/bluecurve/vertical.gif
Binary files differ
diff --git a/slider/css/boxsizing.htc b/slider/css/boxsizing.htc
new file mode 100644
index 0000000..fbeaa56
--- /dev/null
+++ b/slider/css/boxsizing.htc
@@ -0,0 +1,157 @@
+<component lightWeight="true">
+<attach event="onpropertychange" onevent="checkPropertyChange()" />
+<attach event="ondetach" onevent="restore()" />
+<script>
+//<![CDATA[
+
+var doc = element.document;
+
+function init() {
+ updateBorderBoxWidth();
+ updateBorderBoxHeight();
+}
+
+function restore() {
+ element.runtimeStyle.width = "";
+ element.runtimeStyle.height = "";
+}
+
+/* border width getters */
+function getBorderWidth(sSide) {
+ if (element.currentStyle["border" + sSide + "Style"] == "none")
+ return 0;
+ var n = parseInt(element.currentStyle["border" + sSide + "Width"]);
+ return n || 0;
+}
+
+function getBorderLeftWidth() { return getBorderWidth("Left"); }
+function getBorderRightWidth() { return getBorderWidth("Right"); }
+function getBorderTopWidth() { return getBorderWidth("Top"); }
+function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
+/* end border width getters */
+
+/* padding getters */
+function getPadding(sSide) {
+ var n = parseInt(element.currentStyle["padding" + sSide]);
+ return n || 0;
+}
+
+function getPaddingLeft() { return getPadding("Left"); }
+function getPaddingRight() { return getPadding("Right"); }
+function getPaddingTop() { return getPadding("Top"); }
+function getPaddingBottom() { return getPadding("Bottom"); }
+/* end padding getters */
+
+function getBoxSizing() {
+ var s = element.style;
+ var cs = element.currentStyle
+
+ if (typeof s.boxSizing != "undefined" && s.boxSizing != "")
+ return s.boxSizing;
+ if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")
+ return s["box-sizing"];
+ if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")
+ return cs.boxSizing;
+ if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")
+ return cs["box-sizing"];
+ return getDocumentBoxSizing();
+}
+
+function getDocumentBoxSizing() {
+ if (doc.compatMode == null || doc.compatMode == "BackCompat")
+ return "border-box";
+ return "content-box"
+}
+
+/* width and height setters */
+function setBorderBoxWidth(n) {
+ element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
+ getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
+}
+
+function setBorderBoxHeight(n) {
+ element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
+ getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
+}
+
+function setContentBoxWidth(n) {
+ element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
+ getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
+}
+
+function setContentBoxHeight(n) {
+ element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
+ getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
+}
+/* end width and height setters */
+
+function updateBorderBoxWidth() {
+ element.runtimeStyle.width = "";
+ if (getDocumentBoxSizing() == getBoxSizing())
+ return;
+ var csw = element.currentStyle.width;
+ if (csw != "auto" && csw.indexOf("px") != -1) {
+ if (getBoxSizing() == "border-box")
+ setBorderBoxWidth(parseInt(csw));
+ else
+ setContentBoxWidth(parseInt(csw));
+ }
+}
+
+function updateBorderBoxHeight() {
+ element.runtimeStyle.height = "";
+ if (getDocumentBoxSizing() == getBoxSizing())
+ return;
+ var csh = element.currentStyle.height;
+ if (csh != "auto" && csh.indexOf("px") != -1) {
+ if (getBoxSizing() == "border-box")
+ setBorderBoxHeight(parseInt(csh));
+ else
+ setContentBoxHeight(parseInt(csh));
+ }
+}
+
+function checkPropertyChange() {
+ var pn = event.propertyName;
+ var undef;
+
+ if (pn == "style.boxSizing" && element.style.boxSizing == "") {
+ element.style.removeAttribute("boxSizing");
+ element.runtimeStyle.boxSizing = undef;
+ }
+
+
+ switch (pn) {
+ case "style.width":
+ case "style.borderLeftWidth":
+ case "style.borderLeftStyle":
+ case "style.borderRightWidth":
+ case "style.borderRightStyle":
+ case "style.paddingLeft":
+ case "style.paddingRight":
+ updateBorderBoxWidth();
+ break;
+
+ case "style.height":
+ case "style.borderTopWidth":
+ case "style.borderTopStyle":
+ case "style.borderBottomWidth":
+ case "style.borderBottomStyle":
+ case "style.paddingTop":
+ case "style.paddingBottom":
+ updateBorderBoxHeight();
+ break;
+
+ case "className":
+ case "style.boxSizing":
+ updateBorderBoxWidth();
+ updateBorderBoxHeight();
+ break;
+ }
+}
+
+init();
+
+//]]>
+</script>
+</component> \ No newline at end of file
diff --git a/slider/css/luna/handle.horizontal.hover.png b/slider/css/luna/handle.horizontal.hover.png
new file mode 100644
index 0000000..d2fd059
--- /dev/null
+++ b/slider/css/luna/handle.horizontal.hover.png
Binary files differ
diff --git a/slider/css/luna/handle.horizontal.png b/slider/css/luna/handle.horizontal.png
new file mode 100644
index 0000000..b3af6bb
--- /dev/null
+++ b/slider/css/luna/handle.horizontal.png
Binary files differ
diff --git a/slider/css/luna/handle.vertical.hover.png b/slider/css/luna/handle.vertical.hover.png
new file mode 100644
index 0000000..379cdc2
--- /dev/null
+++ b/slider/css/luna/handle.vertical.hover.png
Binary files differ
diff --git a/slider/css/luna/handle.vertical.png b/slider/css/luna/handle.vertical.png
new file mode 100644
index 0000000..537135e
--- /dev/null
+++ b/slider/css/luna/handle.vertical.png
Binary files differ
diff --git a/slider/css/luna/luna.css b/slider/css/luna/luna.css
new file mode 100644
index 0000000..25597da
--- /dev/null
+++ b/slider/css/luna/luna.css
@@ -0,0 +1,75 @@
+.dynamic-slider-control {
+ position: relative;
+ background-color: ThreeDFace;
+ -moz-user-focus: normal;
+ -moz-user-select: none;
+ cursor: default;
+}
+
+.horizontal {
+ width: 200px;
+ height: 27px;
+}
+
+.vertical {
+ width: 29px;
+ height: 200px;
+}
+
+.dynamic-slider-control input {
+ display: none;
+}
+
+.dynamic-slider-control .handle {
+ position: absolute;
+ font-size: 1px;
+ overflow: hidden;
+ -moz-user-select: none;
+ cursor: default;
+}
+
+.dynamic-slider-control.horizontal .handle {
+ width: 11px;
+ height: 21px;
+ background-image: url("handle.horizontal.png");
+}
+
+.dynamic-slider-control.horizontal .handle div {}
+.dynamic-slider-control.horizontal .handle.hover {
+ background-image: url("handle.horizontal.hover.png");
+}
+
+.dynamic-slider-control.vertical .handle {
+ width: 25px;
+ height: 13px;
+ background-image: url("handle.vertical.png");
+}
+
+.dynamic-slider-control.vertical .handle.hover {
+ background-image: url("handle.vertical.hover.png");
+}
+
+.dynamic-slider-control .line {
+ position: absolute;
+ font-size: 0.01mm;
+ overflow: hidden;
+ border: 1px solid;
+ border-color: ThreeDShadow ThreeDHighlight
+ ThreeDHighlight ThreeDShadow;
+ -moz-border-radius: 50%;
+
+ behavior: url("css/boxsizing.htc"); /* ie path bug */
+ box-sizing: content-box;
+ -moz-box-sizing: content-box;
+}
+.dynamic-slider-control.vertical .line {
+ width: 2px;
+}
+
+.dynamic-slider-control.horizontal .line {
+ height: 2px;
+}
+
+.dynamic-slider-control .line div {
+ display: none;
+} \ No newline at end of file
diff --git a/slider/css/swing/handle.horizontal.png b/slider/css/swing/handle.horizontal.png
new file mode 100644
index 0000000..6c7fb90
--- /dev/null
+++ b/slider/css/swing/handle.horizontal.png
Binary files differ
diff --git a/slider/css/swing/handle.vertical.png b/slider/css/swing/handle.vertical.png
new file mode 100644
index 0000000..ca1ac4a
--- /dev/null
+++ b/slider/css/swing/handle.vertical.png
Binary files differ
diff --git a/slider/css/swing/swing.css b/slider/css/swing/swing.css
new file mode 100644
index 0000000..53ba9f2
--- /dev/null
+++ b/slider/css/swing/swing.css
@@ -0,0 +1,82 @@
+/*
+ dark rgb(102,102,102)
+ medium rgb(152,153,153)
+ gray: rgb(204,204,204)
+ bright: white;
+ */
+
+.dynamic-slider-control {
+ position: relative;
+ background-color: rgb(204,204,204);
+ -moz-user-focus: normal;
+ -moz-user-select: none;
+ cursor: default;
+}
+
+.horizontal {
+ width: 200px;
+ height: 27px;
+}
+
+.vertical {
+ width: 29px;
+ height: 200px;
+}
+
+.dynamic-slider-control input {
+ display: none;
+}
+
+.dynamic-slider-control .handle {
+ position: absolute;
+ font-size: 1px;
+ overflow: hidden;
+ -moz-user-select: none;
+ cursor: default;
+}
+
+.dynamic-slider-control.horizontal .handle {
+ width: 15px;
+ height: 16px;
+ background-image: url("handle.horizontal.png");
+}
+
+.dynamic-slider-control.horizontal .handle div {}
+.dynamic-slider-control.horizontal .handle.hover {}
+
+.dynamic-slider-control.vertical .handle {
+ width: 16px;
+ height: 15px;
+ background-image: url("handle.vertical.png");
+}
+
+.dynamic-slider-control.vertical .handle.hover {}
+
+.dynamic-slider-control .line {
+ position: absolute;
+ font-size: 0.01mm;
+ overflow: hidden;
+ border: 1px solid;
+ border-color: rgb(102,102,102) white
+ white rgb(102,102,102);
+
+ behavior: url("css/boxsizing.htc"); /* ie path bug */
+ box-sizing: content-box;
+ -moz-box-sizing: content-box;
+}
+.dynamic-slider-control.vertical .line {
+ width: 4px;
+}
+
+.dynamic-slider-control.horizontal .line {
+ height: 4px;
+}
+
+.dynamic-slider-control .line div {
+ width: 2px;
+ height: 2px;
+
+ border: 1px solid;
+ border-color: rgb(152,153,153) rgb(102,102,102)
+ rgb(102,102,102) rgb(152,153,153);
+} \ No newline at end of file
diff --git a/slider/css/winclassic.css b/slider/css/winclassic.css
new file mode 100644
index 0000000..4b005a5
--- /dev/null
+++ b/slider/css/winclassic.css
@@ -0,0 +1,99 @@
+.dynamic-slider-control {
+ position: relative;
+ background-color: ThreeDFace;
+ -moz-user-focus: normal;
+ -moz-user-select: none;
+ cursor: default;
+}
+
+.horizontal {
+ width: 200px;
+ height: 29px;
+}
+
+.vertical {
+ width: 29px;
+ height: 200px;
+}
+
+.dynamic-slider-control input {
+ display: none;
+}
+
+.dynamic-slider-control .handle {
+ position: absolute;
+ -moz-user-select: none;
+ cursor: default;
+ background: ThreeDFace;
+ border: 1px solid;
+ border-color: ThreeDHighlight ThreeDDarkShadow
+ ThreeDDarkShadow ThreeDHighlight;
+}
+
+/* inner border */
+.dynamic-slider-control .handle div {
+ font-size: 1px;
+ border: 1px solid;
+ border-color: ThreeDLightShadow ThreeDShadow
+ ThreeDShadow ThreeDLightShadow;
+
+ behavior: url("css/boxsizing.htc"); /* ie path bug */
+ box-sizing: content-box;
+ -moz-box-sizing: content-box;
+}
+
+/* inner sets size
+.dynamic-slider-control.horizontal .handle {
+ width: 12px;
+ height: 22px;
+}
+*/
+
+.dynamic-slider-control.horizontal .handle div {
+ width: 8px;
+ height: 18px;
+}
+
+.dynamic-slider-control.horizontal .handle.hover {}
+
+/* inner sets size
+.dynamic-slider-control.vertical .handle {
+ width: 22px;
+ height: 12px;
+}
+*/
+
+.dynamic-slider-control.vertical .handle div {
+ width: 18px;
+ height: 8px;
+}
+
+.dynamic-slider-control.vertical .handle.hover {}
+
+.dynamic-slider-control .line {
+
+ behavior: url("css/boxsizing.htc"); /* ie path bug */
+ box-sizing: content-box;
+ -moz-box-sizing: content-box;
+
+ position: absolute;
+ font-size: 0.01mm;
+ overflow: hidden;
+ border: 1px solid;
+ border-color: ThreeDShadow ThreeDHighlight
+ ThreeDHighlight ThreeDShadow;
+ background: ThreeDDarkShadow;
+}
+
+.dynamic-slider-control.vertical .line {
+ width: 1px;
+
+}
+
+.dynamic-slider-control.horizontal .line {
+ height: 1px;
+}
+
+.dynamic-slider-control .line div {
+ display: none;
+} \ No newline at end of file