HomeHome  SearchSearch  Rules & Guidelines  Staff List  MemberlistMemberlist  RegisterRegister  Log inLog in  
Announcements

September 13th, 2017: Adding tutorials for the badging community! We're looking for volunteers to feature and help us write guides - PM Panton to get started with our project!


July 3rd, 2017: Canvas Tutorials is currently undergoing a major revamp. Please excuse any hiccups or glitches.


Coming soon

About Us

Canvas creates and supports an IMVU education environment. We offer tutorials and assistance from some of the community's most active and knowledgeable. Tutorials by users, for users!

Staff
Staff Updates
Important Links
Statistics
We have 1428 registered users
The newest registered user is zZbannyezZ

Our users have posted a total of 2569 messages in 157 subjects
Canvas Time
Share | 
 

 Slim Scroll Fixed 2016

View previous topic View next topic Go down 
Gladiolus

avatar
View user profile
Role : Designer & Coder
Location : United States
http://migladiolus.tumblr.com/

PostSubject: Slim Scroll Fixed 2016 Tue Mar 29, 2016 8:57 pm



Slim Scroll Fixed 2016
Update of Turtle Trainers Slim Scroll Tutorial


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


Written Tutorial
_________________________________________________________

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





Click on Dashboard then File Management





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





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





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





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





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





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”





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





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





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





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.





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!





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 > <.





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.




__________________________________

Back to top Go down
 
Slim Scroll Fixed 2016
View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
 :: HBAD REALM :: HBAD • Coding-
Jump to: