Slim Scroll Fixed 2016

Role : Designer & Coder Location : United States

Slim Scroll Fixed 2016
Update of Turtle Trainers Slim Scroll Tutorial

• Tutorial By: Gladiolus • Difficulty: Medium • Last Edited: 03/29/2016

Written Tutorial
_________________________________________________________
Slim Scroll Fixed 2016 Hg6qUgb

Create an account for AlterVista. This is the account in which your slim scroll code will be displayed.

Slim Scroll Fixed 2016 UbEmRBA

Click on Dashboard then File Management

Slim Scroll Fixed 2016 OigFMrI

Create an account for FileDrive, if you all ready have one log into the one you want your tabs to be displayed on

Slim Scroll Fixed 2016 RUk432p

Create a file and name it the tab you will be using it as, I am making my home tab so I will be naming it Home
Note: Make sure the formatting is set at html not css

Slim Scroll Fixed 2016 GNeMQoJ

Paste the following code at the top of the Coding Box

Code:: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>

Download the most recent file of JQuery-SimScroll via GitHub, Click the version number to download
GitHub Download Link

Slim Scroll Fixed 2016 IOVZ3zp

The file will be downloaded in a Zip forum so you will need to unzip it by selecting “Extract All”. If you have Windows 10 the folder will have the option above.
Note: If you do not have this option you can Google search and download any Unzipping Program

Slim Scroll Fixed 2016 LYnafPP

Open the folder and locate the file named “jquery.slimscroll.min”
Note: This file must have the extension ending in MIN

Slim Scroll Fixed 2016 Lx2Cv9o

Go back to your AlterVista account and locate the button names “Upload Files” under the File Management Tab. Click and download the file we located in Step 8 named “jquery.slimscroll.min”

Slim Scroll Fixed 2016 XY2DVjE

Copy the link address of the file in Altervista by right clicking on the file. If this option does not work click on the file and copy the address of the tab that popped up

Slim Scroll Fixed 2016 3eMQR8Y

Edit the tab we created in Step 4 and 5 using Filedrive, then paste the code below after the codes we pasted earlier.

Code:: <script type="text/javascript" src="#"></script>

Paste the copied location where the pound sign is (#) by selecting the sign and pasting the code

Slim Scroll Fixed 2016 NzXcCCq

Create a JavaScript file called “scroll.js” in Altervista.
Note: The extension is ’.js’ for JavaScript. Your file should not look like 'scroll.js.html’; if so you must rename the file and take out the .html extension

Slim Scroll Fixed 2016 JPQabzF

Edit the file and paste the code within the file. Make sure to save the file before closing the page.

Code:: $(function(){
$('#content').slimScroll({
width: '100%',
height: '100%',
color: '#FF0000',
allowPageScroll: false,
});
});

Note: If you want to change the scroll bar color edit the color code between the single parentheses with a color hex. This must start with # and end with a 6 digit number.

Slim Scroll Fixed 2016 RVxns7p

Edit your tab in filedrive again and add the code below after the codes we added in the previous times.

Code:: <script type="text/javascript" src="#"></script>

Copy the link address of the scroll file we created in Altervista and replace the pound sign (#) in the new code with that link.
Note: DO NOT SAVE YET!

Slim Scroll Fixed 2016 TE9xmwb

Paste the code below after the script coding we previously did in all steps below. You can add any text in the middle of the arrows (> <)
Note: If you want to use the “Easy Editor” if is easier to make all the text in another tab the way you want it and paste the html coding of that within the content code > <.

Slim Scroll Fixed 2016 PIkaWZv

Now your code is all done and ready to use. To use in other tabs just copy the entire coding seen in Step 17 and paste the code in that tab.