Using fullpage.js to implement HTML page scrolling

Some instructions on how to use fullpage.js to scroll between sections in your web page. I am not a web developer, so this post will contain a minimum of javascripting, css styling and so on. I just wanted to see how fullpage.js can be incorporated so that individual web pages can be scrolled horizontally in an animated way. Step 1: Download fullpage.js Fullpage.js javascript can be downloaded from here: https://alvarotrigo.com/fullPage/ This will download a file called fullPage.js-master.zip. Once the zip file has been downloaded, extract it somewhere. Step 2: Create folder structures for your web page(s) I have created a folder called 'FullPage' containing the subfolders 'html' and 'resources' in which the HTML file(s) and style sheets/javascripts will be contained respectively: Step 3: Install the necessary styling and resources. In the 'resources' folder create a further two subfolders 'css' and 'javascript' in which to contain our styling and scripting files: In the fullPage.js-master.zip that was extracted, obtain the files jquery.fullPage.min.js and jqujquery.js files and copy them into the 'javascript' folder: Also obtain the 'jquery.fullPage.css' file and copy it into the 'css' folder: Step 4: Create an example web page. In the 'html' folder create a new html file 'Page.html' Edit the html page. Some things to note: styling applied to the scrolling arrow, the main html body which consists of sub-sections containing the individual slides we wish to scroll through, and the references to the fullpage javascripts that we downloaded and copied: Page.html [code language="html"] <!DOCTYPE html> <html> <head> <title>Example page</title> <meta charset="utf-8"> <link href="../resources/css/jquery.fullPage.css" rel="stylesheet prefetch"></link> <style> h1{ display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; font-face: verdana; color: blue; } .fp-controlArrow { position: absolute; z-index: 4; top: 50%; cursor: pointer; width: 0; height: 0; border-style: solid; margin-top: -38px; } .fp-controlArrow.fp-prev { left: 15px; width: 0; border-width: 38.5px 34px 38.5px 0; border-color: transparent red transparent transparent; } .fp-controlArrow.fp-next { right: 15px; border-width: 38.5px 0 38.5px 34px; border-color: transparent transparent transparent red; } </style> </head> <body class="lang-en tab-pips"> <article id="main"> <div class="section"> <div id="slide1" class="slide-wrapper current"> <h1 class="sansserif" align="center">Slide 1</h1> </div> <div id="slide2" class="slide-wrapper"> <h1 align="center">Slide 2</h2> </div> <div id="slide2" class="slide-wrapper"> <h1 align="center">Slide 3</h2> </div> </article> <script src='../resources/javascript/jquery.js'></script> <script src='../resources/javascript/jquery.fullPage.min.js'></script> <script> // variables var $header_top = $('.header-top'); var $nav = $('nav'); // fullpage customization $('#main').fullpage({ menu: '#menu', slideSelector: '.slide-wrapper', sectionsColor: ['#00b3d7', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff', '#ccc'], continuousHorizontal: true, continuousHorizontalKey: 'YWx2YXJvdHJpZ28uY29tX00zVVkyOXVkR2x1ZFc5MWMwaHZjbWw2YjI1MFlXdz12Nk0=', slidesNavigation: true, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){ console.log("slideLoad--" + "anchorLink: " + anchorLink + " index: " + index + " slideAnchor: " + slideAnchor + " slideIndex: " + slideIndex); }, onSlideLeave: function(anchorLink, index, slideIndex, direction){ console.log("----------------"); console.log("onSlideLeave--" + "anchorLink: " + anchorLink + " index: " + index + " slideIndex: " + slideIndex + " direction: " + direction); } }); </script> </body> </html> [/code] Step 5: Try it! I then view the Page.html in Internet Explorer. Notice that the styling/scripting provides us with the left/right control arrows that provide the scrolling animation when navigation through each slide and pips to achieve the same scrolling action: And on to the next slide:

Comments

Post a Comment

Popular posts from this blog

Using the Supervisor Controller Pattern to access View controls in MVVM

Image
As discussed on a StackOverflow post , this is considered bad practice, so only use this when necessary. Step 1: Create a new WPF project Step 2: Add event handling code A number of classes are needed for doing command bindings in MVVM. Create the following classes and add to your Visual Studio project: RelayCommand.cs [code language="csharp"] using System; using System.Windows.Input; namespace SupervisorControllingPattern { public class RelayCommand<T> : ICommand { private readonly Predicate<T> _canExecute; private readonly Action<T> _execute; public RelayCommand(Action<T> execute) : this(execute, null) { _execute = execute; } public RelayCommand(Action<T> execute, Predicate<T> canExecute) { if (execute == null) throw new ArgumentNullException(nameof(execute)); _execute = execute; _canExecute = canExecute; ...
Read more

Getting started with Tesseract optical character recognition (OCR) library in Visual Studio

Image
This post is a how-to guide on how to get up and running with using the tesseract optical character recognition (OCR) library in a Microsoft Visual Studio environment. The original link can be found at the following github location: https://tesseract-ocr.github.io/tessdoc/Compiling.html#windows Step 1: Build the latest library (using Software Network client) Download and extract the latest SW (Software Network https://software-network.org/) client from the following location: https://software-network.org/client/sw-master-windows-client.zip Open a DOS command prompt and run the following commands: [code language="xml"] sw setup sw build org.sw.demo.google.tesseract.tesseract-master [/code] As shown in the following screenshot: Step 2: Install git if you have not already done so You will need git to download the libraries needed for this project. Download link for obtaining the git for Windows executables etc here: https://git-scm.com/download/win...
Read more

How to send an e-mail via Google SMTP using C#

Image
First things first, some useful StackOverflow links: https://stackoverflow.com/questions/9201239/send-e-mail-via-smtp-using-c-sharp https://stackoverflow.com/questions/17462628/the-server-response-was-5-7-0-must-issue-a-starttls-command-first-i16sm1806350 To demonstrate how this is done I first create a new Visual Studio project: Some example code for sending an email via a Google email account (smtp.goolgle.com) - obviously replace this with email / credentials of your own... I put the code within a try-catch block in order to capture any errors that may occur while attempting this. [code language="csharp"] using System; using System.Net; using System.Net.Mail; namespace EmailSmtp { class Program { static void Main(string[] args) { try { // Credentials var credentials = new NetworkCredential("someEmail@gmail.com", "somePassword"); // Mail message var ...
Read more