NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
english:other-enhancements:mootools:srcoll-bar [2009/09/24 11:36] Knut Heermann (flip-flop) |
english:other-enhancements:mootools:srcoll-bar [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | {{indexmenu_n>20}} | + | {{indexmenu_n>100}} |
| ====== Scroll bar vert./horiz. ====== | ====== Scroll bar vert./horiz. ====== | ||
| - | **Content in a div container bordered by a vertical and horizontal scroll bar (using mootools v1.2.x).** \\ | + | **Content in a <div> container bordered by a vertical and horizontal scroll bar (using mootools v1.2.x).** \\ |
| - | Have a look [[http://www.isabellathiel.de/en-references.phtml]]. | + | In action: [[http://www.isabellathiel.de/en-references.phtml]]. |
| Line 38: | Line 38: | ||
| ===== HTML/JS part in layout ===== | ===== HTML/JS part in layout ===== | ||
| - | === Example 01 (hScroll on) === | + | === Example 01) (hScroll on) === |
| **Put it into a custom block called ##{SCROLLBAR1}##.** | **Put it into a custom block called ##{SCROLLBAR1}##.** | ||
| Line 79: | Line 79: | ||
| \\ | \\ | ||
| - | === Example 02 (hScroll off) === | + | === Example 02) (hScroll off and no drag) === |
| **Put it into a custom block called ##{SCROLLBAR2}##.** | **Put it into a custom block called ##{SCROLLBAR2}##.** | ||
| Line 98: | Line 98: | ||
| 'arrows': true, | 'arrows': true, | ||
| 'hScroll': false | 'hScroll': false | ||
| - | }); | ||
| - | |||
| - | new Drag('content2', { | ||
| - | 'modifiers': {y: 'height', x: 'width'}, | ||
| - | 'limit': { x:[100], y:[50] }, | ||
| - | onDrag: function(){ | ||
| - | scr2.update(); | ||
| - | } | ||
| }); | }); | ||
| Line 118: | Line 110: | ||
| \\ | \\ | ||
| - | :!: **If you don´t need the draging feature, please kick them completely out** :!: | + | :!: Switch **'hScroll': false** and the **dragging part** is completely **kicked out** :!: |
| - | <code> | + | |
| - | new Drag('contentX', { | + | |
| - | 'modifiers': {y: 'height', x: 'width'}, | + | |
| - | 'limit': { x:[100], y:[50] }, | + | |
| - | onDrag: function(){ | + | |
| - | scr2.update(); | + | |
| - | } | + | |
| - | }); | + | |
| - | </code> | + | |
| Line 135: | Line 117: | ||
| ===== Files ===== | ===== Files ===== | ||
| - | * Mootools v1.2.x: **template/inc_js/mootools/mootools.js** | ||
| * Java script: **template/inc_js/mootools/tools/scroll_bar.js** | * Java script: **template/inc_js/mootools/tools/scroll_bar.js** | ||
| * CSS file: **template/inc_css/specific/mootools/scroll_bar.css** | * CSS file: **template/inc_css/specific/mootools/scroll_bar.css** | ||
| + | * Mootools v1.2.x: **template/inc_js/mootools/mootools.js** //(see below)// | ||
| \\ | \\ | ||
| Line 543: | Line 525: | ||
| float: left; | float: left; | ||
| height: 15px; | height: 15px; | ||
| - | width: 635px; /* 255px; */ | + | width: 255px; /*635px; */ |
| position: relative; | position: relative; | ||
| background: #ddd; | background: #ddd; | ||
| Line 575: | Line 557: | ||
| </code> | </code> | ||
| + | \\ | ||
| + | |||
| + | === Mootools V1.2.x setup === | ||
| + | |||
| + | <note important> | ||
| + | If you are using mootools v1.2.x in FE, please update all other components like slimbox, accordion and so on -> [[english/other-enhancements/mootools/mootools-v12x|mootools-v12x]]. | ||
| + | |||
| + | \\ | ||
| + | **The scroll bar needs:** //([[english/other-enhancements/mootools/mootools-v12x#download|prepared mootools set]])// | ||
| + | * [[http://mootools.net/core|MooTools Core]] | ||
| + | * [[http://mootools.net/more|MooTools More]] | ||
| + | * Drag: Drag | ||
| + | </note> | ||
