FSN - Fullscreen Site Navigation

Documentation


Created: 10/13/2012
By: Keepyourweb

Overview


FSN (Fullscreen Site Navigation) is a JavaScript plugin that lets to build in the easy and quick way a fullscreen website.

Fullscreen website is a site that occupies the whole of the space inside of a browser window whichever it is: stretched or minimized.

FSN can be integrated into any cms or website template: it provides only the structure and the algorithm to make it work, the rest is on the designer hand.
So you can understand that it's very flexible and it adapts to any user requirement.

FSN is compatible with all browsers:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE9
  • IE8
  • IE7

The main folder


The plugin is contained in fsn folder.

Folder structure:

fsn/
|-- config.js               // Configuration file
|-- plugin.js               // Fsn plugin
|-- require-jquery.js       // RequireJS 2.1.1 + jQuery 1.8.2 project

Copy and paste the fsn folder into your project.

Include the plugin


To include the plugin just insert the following line code into your document <head>.

<!-- fsn plugin -->
<script data-main="fsn/plugin" src="fsn/require-jquery.js"></script>

In the attribute data-main put the plugin.js file path.

FSN use the AMD library (Asynchronous Module Definition) Require.js in combination with jQuery, more information at this link http://requirejs.org/docs/jquery.html.

Build the basic structure


Before start you should know that FSN structure is divided into multiple sections, every section contains one or more pages which in turn will take the window resolution.
The site is navigable vertically between sections and horizontally between pages.

1) FSN Wrap

First of all create the fsn wrap in the <body>.
It will be the container of the whole FSN structure composed of sections and pages.

<!-- fsn wrap -->
<div id="fsn" style="visibility: hidden">

	... 
	
</div>

The visibility style is set to hidden to hide the javascript loading delay before it renders the content.

2) FSN Sections

At this point divide the fsn wrap in sections.
Section is the element that will contain the pages.

Use html5 <section> tag for every section that you want, like this:

<!-- fsn section -->
<section>

	...
	
</section>

More info about sections

3) FSN Pages

Done this insert the pages into sections.
Page is the element that will contain the content visible to the final user.

Use html5 <article> tag for every page that you want, like this:

<!-- fsn page -->
<article>

	...
	
</article>

More info about pages

Example


Here how will be the basic structure:

<!DOCTYPE html>
<html>
<head>
 
	<!-- fsn plugin -->
	<script data-main="fsn/plugin" src="fsn/require-jquery.js"></script>
 
</head>
<body>
 
	<!-- fsn wrap -->
	<div id="fsn" style="visibility: hidden">

		<!-- fsn section -->
		<section>

			<!-- fsn page -->
			<article>
				<p>Content - Section 1 Page 1</p>
			</article>

			<!-- fsn page -->
			<article>
				<p>Content - Section 1 Page 2</p>
			</article>

		</section>

		<!-- fsn section -->
		<section>

			<!-- fsn page -->
			<article>
				<p>Content - Section 2 Page 1</p>
			</article>

			<!-- fsn page -->
			<article>
				<p>Content - Section 2 Page 2</p>
			</article>

		</section>

	</div>
 
</body>
</html>

Bar


Bar is a fixed element always visible on the window sides.

It is not possible to insert more than one bar.

To insert the bar use the html5 <header> tag and put it on the top of the fsn-wrap, like this:

<!-- fsn wrap -->
<div id="fsn" style="visibility: hidden">

	<!-- fsn bar -->
	<header>

		...

	</header>

	...

Bar is useful to insert the logo or the main menu.

For bar style you can use its class fsn-bar.

Bar position


Bar is an independent element and can be placed into any window side, that is manages by configuration file.
Position accepts four values:

  • top: bar will be on the top side of the window and will take the full window width;
  • right: bar will be on the right side of the window and will take the full window height;
  • bottom: bar will be on the bottom side of the window and will take the full window width;
  • right: bar will be on the left side of the window and will take the full window height;

Bar Settings


To set bar open the configuration file fsn/config.js.
Here the settings list.

option accepted values description
bar | position [top, right, bottom, left] Bar position on the window sides

Sections


Section is the element that contains the pages.
You can think about section as the parent that groups all pages of the same family.

To create a section use the html5 <section> tag and insert it into the fsn wrap.

<!-- fsn section -->
<section data-title="products">
   ...
</section>

You can create endless sections.

Sections attributes


Attributes provide additional information about sections, the sintax is data-[property]="value".

attribute example description
data-title
<section data-title="Products"> ... </section>
Section title, value that will use to create the menu
data-menu
<section data-menu="false"> ... </section>
If set to false, the section will be not appear on the menu

Pages


Page is the final element of the FSN structure.
Page is responsive, it takes the window resolution and adapts to the changes when it is resized.

To create a page use the html5 <article> tag and insert it into its section parent.

<!-- fsn section -->
<section data-title="products">
 
   <!-- fsn page -->
   <article data-title="iPhone" data-link="apple-iphone">
      
	  <p>The iPhone is a line of smartphones designed and marketed...</p>
	  
   </article>
 
   ...
 
</section>

You can create endless pages.

Layout page


The image below represents how is composed the layout page:

You can set the layout page by the configuration file. See page settings.

Page Link


Each page has its own link which is set by the attribute data-link, like this:

<article data-link="apple-iphone"> ... </article>

This means that you can surf the site simply putting the link in the address bar or create text link to reach the page, like this:

<a title="Apple iPhone" href="http://www.yourdomain.net/#apple-iphone">iPhone</a>

If you don't set the link, FSN will do it automatically with this rule: link="p[section_index][page_index]"

Ajax content


To load external contents via ajax use the attribute data-ajax putting the document path that you want, like this:

<article data-link="apple-iphone" data-ajax="pages/apple-iphone.html"></article>

The whole page content will be replaced with the ajax content.

During the loading content is shown a loader in the middle of the page. You can set the loader color (black or white) from the configuration file.

Page background


Through the attribute data-background you can set a background for the page, it accepts three value types:

Hex Color - If you want a background color put the color hex value.

<article data-background="#ff9900"> ... </article>

Pattern - If you want a background pattern put the image path.

<article data-background="images/pattern.png"> ... </article>

Image - if you want an image which adapt itself to the page size put the image path preceded by fullscreen:.

<article data-background="fullscreen:images/image.jpg"> ... </article>

FSN waits until the image is loaded before showing it.

Page scroll


FSN lets to customize the scrollbars providing a rich collection of options.

FSN integrates jScrollPane, a cross-browser and cross-device library which converts the default browser scrollbars into a customizable HTML structure.

In configuration file you can choose if the page can be scrollable or not by using the option pageScroll.

  • page scrollable - the page body has height variable and can scroll its content;
  • page fixed - the page body takes the window height and can't scroll its content;

In the first case the page will behave as a normal web page, in fact it will have a custom scrollbar on the right side of the window with which you can scroll all its content.
In second case the page will not have any scrollbar but the page body, that is the wrapper of the content, will take the window height.

To make the page scrollable open the configuration file and set scrollPage: true.

Scrollable blocks

Is possible also to have indipendent scrollable blocks inside the page, thus insert a div with class fsn-scroll like this:

<article data-link="company">
 
   <div class="fsn-scroll" data-height="200">
      ...text...
   </div>
 
</article>

The attribute data-height is needful to manage the div height, it accepts two types value:

  • integer: height in px;
  • number percent: percentage of the page body height;

The percentage is computable only if the page is fixed and has its own height, so set scrollPage: false.

Here an example of two responsive and scrollable blocks:

<article data-link="company">
 
   <div class="fsn-scroll" data-height="40%">
      ...text...
   </div>
   
   <div class="fsn-scroll" data-height="60%">
      ...text...
   </div>
 
</article>

Settings

To style the scrollbar open the configuration file fsn/config.js.
Here the settings list.

Track:

option accepted values description
scrollbar | track | width *number* Total scrollbar width
scrollbar | track | padding *number* Padding between track and cursor
scrollbar | track | margin *number* Margin between content and scrollbar
scrollbar | track | background *hex color* Track background color
scrollbar | track | borderRadius *number* Radius for rounded corners

Cursor:

option accepted values description
scrollbar | cursor | background *hex color* Cursor background color
scrollbar | cursor | borderWidth *number* Cursor border width
scrollbar | cursor | borderColor *hex color* Cursor border color
scrollbar | cursor | borderRadius *number* Radius for rounded corners
scrollbar | cursor | opacity [0-1] Cursor opacity

Page transition


The navigation between one page and the other entail two transition, as rapresented below:

The first transition, the blue block, is the page shift, whereas the second transition, the red block, is the page body shift or rather its content shift.
In this way you can manage the two transitions separately, then create delays and smooth effects...the possibilities are endless!

Thanks of a rich easing effects collection you can create all kind of transitions that you want.

FSN integrates jQuery Easing, a jQuery plugin to give advanced easing options.

The transitions are managed by the configuration file. See page settings.

Pages attributes


Attributes provide additional information about pages, the sintax is data-[property]="value".

attribute example description
data-title
<article data-title="Mission"> ... </article>
Page title, value that will use to create the menu
data-link
<article data-link="mission"> ... </article>
Page link
data-ajax
<article data-ajax="pages/mission.html"> ... </article>
Document path to load via ajax
data-background
<article data-background="#ff0000"> ... </article>
Page background
data-menu
<article data-menu="false"> ... </article>
If set to false, the page will be not appear on the menu

Pages settings


To set page open the configuration file fsn/config.js.
Here the settings list.

option accepted values description
pages | width *number* Page body width in pixel, 0 to set width 100%
pages | alignment [left, center, right] Page body alignment relative to the page
pages | margin *number* Top and bottom margin between the page and the page body
pages | scrollPage [true, false] Enable/Disable the page scroll
pages | speed *number* Speed of the page transition
pages | easing [jswing, def, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce] Animation easing of the page transition
pages | loader [white, black] Ajax loader color
pages | animationBody | enable [true, false] Enable/Disable the page body transition
pages | animationBody | shift *number* Shift of the page body transition
pages | animationBody | delay *number* Delay of the page body transition relative to the page transition speed
pages | animationBody | easing [jswing, def, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce] Animation easing of the page body transition

Footer


Footer is a fixed element always visible on the bottom window side.

It is not possible to insert more than one footer.

To insert the footer use the html5 <footer> tag and put it on the bottom of the fsn-wrap, like this:

<!-- fsn wrap -->
<div id="fsn" style="visibility: hidden">

	...

	<!-- fsn footer -->
	<footer>

		...

	</footer>
	
</div>

Footer is useful to insert company information, credits, links...

For footer style you can use its class fsn-footer.

Menu


FSN integrates a dynamic menu system, it can creates autonomously the menu tree on the basis of the sections and pages present.

To create a menu use the html5 <nav> tag.

<!-- fsn bar -->
<header>
	
	<!-- fsn menu -->
	<nav data-menu="section:all;level:all"></nav>

</header>

Menu configuration

The menu is configurable through the attribute data-menu, the syntax is:

data-menu="section:[option];level:[option]"

As you can see to make a menu is needful to set two value on data-menu:

section indicates to FSN which sections read, it accepts three options:

  • all: all sections;
  • this: option valid only if the menu is on a page, in this case FSN will read the parent section;
  • [section index]: indicates to FSN which section read by the index (the first section has index 1);

level indicates to FSN the menu level, it accepts three options:

  • all: section and pages
  • 1: only section;
  • 2: only pages;

You can insert menu only on bar, footer and page elements.

The final result will be:

<nav data-menu="section:all;level:all">
	
	<!-- CODE PRODUCED BY by FSN -->
	
	<ul class="fsn-menu-family fsn-level-1">
		<li class="fsn-menu-item fsn-level-1 fsn-first">
			<span style="cursor: pointer;">Company</span>
			<ul class="fsn-menu-family fsn-level-2">
				<li class="fsn-menu-item fsn-level-2 fsn-first">
					<span style="cursor: pointer;">Mission</span>
				</li>
				<li class="fsn-menu-item fsn-level-2">
					<span style="cursor: pointer;">About Us</span>
				</li>
				<li class="fsn-menu-item fsn-level-2 fsn-last">
					<span style="cursor: pointer;">Team</span>
				</li>
			</ul>
		</li>
		<li class="fsn-menu-item fsn-level-1 fsn-last">
			<span style="cursor: pointer;">Products</span>
			<ul class="fsn-menu-family fsn-level-2">
				<li class="fsn-menu-item fsn-level-2 fsn-first">
					<span style="cursor: pointer;">iPhone</span>
				</li>
				<li class="fsn-menu-item fsn-level-2">
					<span style="cursor: pointer;">iPad</span>
				</li>
				<li class="fsn-menu-item fsn-level-2 fsn-last">
					<span style="cursor: pointer;">iMac</span>
				</li>
			</ul>
		</li>
	</ul>

</nav>

Current item has class fsn-current.

Exclude Pages or Sections from the menu

Set the data-menu attribute to false on each page or section that you want exclude from the menu, here an example:

<article data-title="iPhone" data-link="apple-iphone" data-menu="false">
	...
</article>

This page will be not appear on the menu.

Custom item menu

By default the menu item is a <span> element:

<span style="cursor: pointer;">Company</span>

To create a custom item menu, insert in the attribute data-item the html code that you want, here an example:

<nav data-menu="section:all;level:1" data-item="<a href='#' class='item-{{link}}'>Menu - {{title}}</a>"></nav>

data-item accepts two variables:

  • {{link}}: the page link - set by the page data-link attribute;
  • {{title}}: the page/section title - set by the page/section data-title attribute;

Now the final result will be:

<nav data-menu="section:all;level:1" data-item="<a href='#' class='item-{{link}}'>Menu - {{title}}</a>">
	
	<!-- CODE PRODUCED BY by FSN -->
	
	<ul class="fsn-menu-family fsn-level-1">
		<li class="fsn-menu-item fsn-level-1 fsn-first">
			<a style="cursor: pointer;" href="#" class="item-company" >Menu - Company</a>
		</li>
		<li class="fsn-menu-item fsn-level-1 fsn-last">
			<a style="cursor: pointer;" href="#" class="item-products" >Menu - Products</a>
		</li>
	</ul>

</nav>

Note also, compared to the previous example, that it was printed only the section level, infact level is set to 1.

Menu Attributes

attribute example description
data-menu
<nav data-menu="section:this;level:2"></nav>
To set menu
data-item
<nav data-menu="section:all;level:all" data-item="<span><img src="arrow.png" />{{title}}</span>"></nav>
To create custum item menu

Keyboard arrows


FSN lets to surf also with the keyboard arrows for a higher user experience.
Use the right and left arrows to surf between pages, up and down arrows to surf between sections.

Settings

To manage keyboard navigation open the configuration file fsn/config.js.
Here the settings list.

option accepted values description
controllers | keyboard | enable [true, false] Enable/Disable the keyboard navigation

Arrows


Arrows are two buttons on the right and left window sides created automatically by FSN that let to surf between pages.

Arrows being on the window sides have the ability to hide themselves if the window is too small, this to avoid going over the page content..

An example of code produced by FSN:

<div class="left fsn-navigation-arrow"><div> <!-- left arrow -->
<div class="right fsn-navigation-arrow"><div> <!-- right arrow -->

Settings

To manage arrows navigation open the configuration file fsn/config.js.
Here the settings list.

option accepted values description
controllers | arrows | enable [true, false] Enable/Disable the arrows navigation
controllers | arrows | visibilityControl [true, false] Enable/Disable the ability to hide themselves if the window is too small
controllers | arrows | position [top, center, bottom] Arrows position on the window sides
controllers | arrows | width *number* Arrows width
controllers | arrows | height *number* Arrows height
controllers | arrows | marginWindow *number* Margin from the window side

Dot buttons


Dot buttons are elements created automatically by FSN on the window sides and let you to track the current page (or section) and surf between them.

An example of code produced by FSN:

<div class="fsn-dots">
	<div title="Mission" class="fsn-dots-item fsn-current"></div>
	<div title="About Us" class="fsn-dots-item"></div>
	<div title="Team" class="fsn-dots-item"></div>
</div>

Current dot has class fsn-current.

Settings

To manage dot buttons navigation open the configuration file fsn/config.js.
Here the settings list.

Sections dots

option accepted values description
controllers | dots | sections | enable [true, false] Enable/Disable buttons for sections
controllers | dots | sections | visibilityControl [true, false] Enable/Disable the ability to hide themselves if the window is too small
controllers | dots | sections | position [topleft, centerleft, bottomleft, topright, centerright, bottomright] Dots position on window sides
controllers | dots | sections | side *number* Width and Height of the dots
controllers | dots | sections | margin *number* Margin between dots
controllers | dots | sections | marginWindow *number* Margin from the window side

Pages dots

option accepted values description
controllers | dots | pages | enable [true, false] Enable/Disable dot buttons for pages
controllers | dots | pages | position [topleft, topcenter, topright, bottomleft, bottomcenter, bottomright] Dots position on window sides
controllers | dots | pages | side *number* Width and Height of the dots
controllers | dots | pages | margin *number* Margin between dots
controllers | dots | pages | marginWindow *number* Margin from the window side

Events


Through events you can intercept some situations during the navigation on the site, such as fsn ready, page changed...
Here the complete events list at your disposal:

FSN ready

Event triggered when FSN is initialized, rendered and ready to be navigated.

$(function() {
			
	$('#fsn').on('fsn-ready', function(e) {
		console.log('FSN ready');
	});
	
});

The handler passed to ready is guaranteed to be executed after FSN is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

Page changed

Event triggered when the current page was changed.

$(function() {
			
	$('#fsn').on('fsn-pageChanged', function(e, $page) {
		console.log('Page changed');
	});
	
});

Section changed

Event triggered when the current section was changed.

$(function() {
			
	$('#fsn').on('fsn-sectionChanged', function(e, $section) {		
		console.log('section changed');
	});
	
});

Page ready

Event triggered when a page is initialized and all ajax contents are loaded.

$(function() {
	
	// <article id="mission" data-title="mission"...
	
	$('#mission').on('fsn-ready', function(e, $page) {
		console.log('page mission ready');
	});
	
});

Page set current

Event triggered when a page becomes current.

$(function() {
	
	// <article id="mission" data-title="Mission"...
	
	$('#mission').on('fsn-setCurrent', function(e, $page) {
		console.log('page mission set current');
	});
	
});

Page is current

Event triggered when a page becomes current and completes its transition.

$(function() {
	
	// <article id="mission" data-title="Mission"...
	
	$('#mission').on('fsn-current', function(e, $page) {
		console.log('page mission is current');
	});
	
});

Page no current

Event triggered when a page is no more current.

$(function() {
	
	// <article id="mission" data-title="Mission"...
	
	$('#mission').on('fsn-noCurrent', function(e, $page) {
		console.log('page mission no more current');
	});
	
});

Section current

Event triggered when a section becomes current.

$(function() {
	
	// <section id="company" data-title="Company"...
	
	$('#company').on('fsn-setCurrent', function(e, $section) {
		console.log('section company set current');
	});
	
});

Section is current

Event triggered when a section becomes current and completes its transition.

$(function() {
	
	// <section id="company" data-title="Company"...
	
	$('#company').on('fsn-current', function(e, $section) {
		console.log('section company is current');
	});
	
});

Section no current

Event triggered when a section is no more current.

$(function() {
	
	// <section id="company" data-title="Company"...
	
	$('#company').on('fsn-noCurrent', function(e, $section) {
		console.log('section company no more current');
	});
	
});

Integration with jQuery plugins


FSN can work perfectly with all jQuery plugins, once it is ready.
So, just wrap the plugin call in this way:

$(function() {
			
	$('#fsn').on('fsn-ready', function(e) {
		
		// This will be execute once FSN will be ready.
		$('#slideshow').startSlideshow();
		
	});
	
});

Another Example:

$(function() {
			
	$('#fsn').on('fsn-ready', function(e) {
		
		// Also page and section events require FSN ready.
		$('#mission').on('fsn-current', function(e, $page) {
			
			console.log('page mission is current');
			
		});
		
	});
	
});

IE6 Alert


FSN warns the IE6 users that their browser is obsolete and recommends them to update it to enjoy the best browsing experience.

Settings

To set IE6 Alert open the configuration file fsn/config.js.
Here the settings list.

option accepted values description
ie6Alert | enable [true, false] Enable/Disable IE6 Alert

FSN - Fullscreen Site Navigation | Documentation - made with FSN - Copyright © 2012, Keepyourweb