#scroll panel

[lorsupp]

Lovely Hell Episode 55

[htmluse]

New Post has been published on Html Use

New Post has been published on http://www.htmluse.com/jquery-scrollpanel-simple-vertical-scrollpanel/

jQuery Scrollpanel - Simple vertical scrollpanel

Download   Demo

jQuery scrollpanel replaces the native vertical browser scrollbar with a CSS-stylable custom scrollbar. This script is used in h5ai in the tree sidebar.

1. INCLUDE JS FILES

<script src="jquery-1.10.2.min.js"></script> <script src="jquery.mousewheel-3.1.3.js"></script> <script src="../jquery.scrollpanel-pkg.version.js"></script>

2. HTML

<div id="mycontainer"> Some text content. <span class="bar"/> <div class="foo"/> </div>

3. JAVASCRIPT

$('#mycontainer').scrollpanel();

4. CONFIGURATION

The only option that can be passed to the contructor is a class prefix which defaults to ‘sp-‘.

$(selector).scrollpanel( prefix: 'sp-' );

Styles can freely be applied:

#mycontainer width: 140px; height: 200px; border: 1px solid #ccc; .sp-scrollbar width: 10px; margin: 4px; background-color: #ccc; cursor: pointer; .sp-thumb background-color: #aaa; .sp-scrollbar.active .sp-thumb background-color: #999; }

[devsigner]

Creating a Scrollable Text Panel in FC

Steps: 1) Use the rectangle tool in Catalyst, located in the top right hand tools panel to draw a rectangle similar to the one shown above. 2) Next, select the text tool. 3) Click somewhere near the top left hand corner of your rectangle and start typing your text. I copied a paragraph of lorem ipsum text from a generator. 4) Copy and paste or add text until your text extends longer than the rectangle you drew. 5) Select the black cursor (select tool) from the tools panel, and click and drag to select both the text you added, and the rectangle you drew on the artboard. 6) In the floating heads up display(HUD), select Convert Artwork to Component, and choose 'Scroll Panel' 7) Notice the yellow 'Component Issues' warning in the right hand corner of the floating HUD. 8) Click the 'edit parts' button. We need to identify which area we want to scroll. 9) We are now in 'Edit in place' mode. 10) Select only the text, and note how the HUD has changed to display 'Convert to ScrollPanel Part' 11) Click 'Scrolling Content', to identify that the text should be scrolled. 12) Notice now that the text has a slightly different outline than before. We can now adjust the size of the text such that it fits within our rectangle. 13) Click and drag the bottommost handle of the text outline, and drag upwards such that the text fits within the bounds of the rectangle. 14) Now, lets add a vertical scrollbar so that we can actually scroll the text. 15) Drag a VScrollBar component from the 'Wireframe Components' section and place it where ever you'd like. 16) Now we have all the pieces for a scrollable text panel wried up correctly. Press CMD+Enter to run your project. 17) You should be able to user the scrollbar to see all of the text you initially entered. Once you get the hang of it, feel free to customize your scrollbar/panel/text like I did. Enjoy! Does this work for you?