Weebly Tricks #54 - FaceScroll Custom Scrollbar From Dynamic Drive

FaceScroll is actually a simple container to handle long and overflowing text. Its goal is to maintain your site's height no matter how long your text would be. In addition, FaceScroll has a smooth scrolling effect with simple editable inline styling. Thanks to Dynamic Drive for this useful trick.

CLICK HERE FOR LIVE DEMO

1. As usual, download the following files below by right clicking on it and choose "save link as".

facescroll.js
jquery.ui.touch-punch.min.js
facescroll.css

Upload it to your Weebly Template by going to Design > Edit CSS/HTML > Add new files > choose the files you've just downloaded. Save your template.

2. We need to insert the Javascript and CSS in to your page/ site's head. To do that, simply go to Pages > choose your preferred page title on the left > click the Advance Settings on the right > Scroll down and on the header code box, paste the following:

<link href="http://myweeblytricksdemo.weebly.com/files/theme/facescroll.css" rel="stylesheet" type="text/css">

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

<script type="http://myweeblytricksdemo.weebly.com/files/theme/jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="http://myweeblytricksdemo.weebly.com/files/theme/facescroll.js">
/***********************************************
* FaceScroll custom scrollbar (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>

<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo1').alternateScroll();
$('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
})
</script>

You simply need to change the red marked text with your own website address to pinpoint the files you've uploaded on step 1. After editing, click "save and edit" button.

3. Now for the HTML, drag one "embed code" element from your left and paste the following code:

<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">
Plan for your niche and its title. It should be specific because the broader it gets, the harder for you to manage.  Not only that, people will find it difficult to search your site when they use search engines like Google. Choose topics you know you can handle and always integrate them with the latest issues on internet. For example if your topic is about cats, if possible you must have a cat. You can also consider talking about “most played cat games on mobile” or the latest inventions like robot cats. Do not just stick to home related topics. Do not start a blog immediately using a top level domain rather choose a free subdomain. But before you create a one, check your preferred top level domain first if it’s still available. Your subdomain name should be similar to what you will buy later. There are many website providers you can start your blogging career. Choose the best you know and the easiest way to manage if you’re really a newbie. Know what they offer, their specialties and of course their pricing. Create at least 5 articles and experiment with them. Learn how to adjust the body and side bar width for future widgets. Write down your categories and subcategories. Study the commenting system. Treat yourself as a guest and feel how your site looks like. Change theme if necessary. Remember there are things you should configure now which can't be modified once your site has visitors. Complete your design with easy navigation. Most importantly add pages like About Us, Contact Us and your Privacy Policy. If you think you’re ready, you can now buy your own domain. If you have problems on buying online perhaps my other article can help, just click here. Choose a short, easy to remember domain that is related to your niche. You can now start writing real articles about your niche.
</div>

The yellow text will be your text content so change it with your own. If you want to edit the styling of your FaceScroll simply change the values of those in green text. The styling is self explanatory though you can always go to the code source for more info about FaceScroll.

If you can't get it working specially the styling, make sure you don't have this code (whatever version) in your page header or your whole site header:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Weebly automatically inserted the minified version of jquery in your template so don't duplicate it. Publish your site and tell me what you think.

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!