Slidexy Template Help


Design author and support: Chris Dawson, tallhatDesign - http://www.tallhat.com Development author (HTML5 and scripting build): Romaric Pascal - http://rhumaric.com

Support: Please address any support communications in the first instance to Chris at tallhatDesign. We cannot guarantee support replies to all communications, but will do our best to help - the files are supplied 'as is'


Slidexy is a modern HTML5 'one-page' template with jQuery multi-directional autoscroll transitions between the sections. It is also responsive in that it reflows/simplifies on small viewports e.g. mobiles, and there are two navigation formats dependent on the device. It was designed to work well on iPad devices, and with a simple scrolling page alternative presentation on iPhone.


The template has been tested on the major desktop browsers, and iPad and iPhone devices.

There are some CSS3 elements at work in this template e.g. the radial background gradient is specified for various browsers. There is also a fallback PNG background for those browsers (IE) that do not support radial gradients in this way.

Included files

CSS files, HTML5 file, script files (jQuery, modernizr, iscroll etc.), 'img' (images) folder for UI graphics and backgrounds, 'photos' folder for placeholder content images, a few layered PSDs (logo, homepage-bg, navigation backgrounds)

The key CSS file is 'style.css' - this contains both the desktop and mobile specifications for the various classes. Most of the customisation will be done here.

Customising the file

By it's nature (i.e. the fact that the layout is created on-the-fly by auto-spreading the 'articles' on larger screens), this template is designed to support 5 or 6 'articles' (I won't call them 'pages' as the whole file is a page) - that are accessed via the top navigation bar.

It's certainly *possible* to add more articles, but this is a fairly complex procedure as all the articles need to be built into the javascript functions that move them around when the page loads). adding lots of extra articles would mean understanding the JS functions and customising them to include references to the new article IDs. Also, with too many articles, the load time/performance may become an issue with a single page site as all content is necessarily loaded first. In general this technique is best used for small scale sites.

Don't forget mobile AND desktop layouts: As explained above BOTH the desktop AND mobile CSS specifications for the various classes are in the same key style.css file. All specs pertaining to the 'desktop' (dynamic slidy) presentation are preceded by the .iscroll label and start around line 378 in the style.css file. The specs preceding the .scroll set mainly relate to either common or mobile/non-iscroll presentation.

Appearance of the main navigation bar/menu

Desktop version: the width is defined at line 402 of the style.css file: width: 34em; and then it's pulled into the middle of the screen with. margin-left: -17em; You can edit this width but be aware that anything more than 34em wide is problematic on iPad portrait mode. Perhaps this of this as the maximum. There are 2 'end' graphics for the nav bar, currently just square and there's a marker underneath the current link. These 'ends' and 'marker' and nav background can be changed by altering the nav-background.png and nav-sprites.png files.

Layouts and backgrounds of sections

Desktop version: I've provided a selection of layouts with different placements of text columns and background PNGs for each article. Each section has it's own set of specs in the style.css file - look for e.g. .iscroll .s2 {} (for section2)

On the desktop (.iscroll) display the .s2 and > h1 declarations (the H1 is actually hidden unless on a narrow width viewport) are used to position the PNG - see widths, top and left margins. For this s2 examples we're looking at line numbers: 524-544.

NB If you add a lot of content to a section make sure you test/tweak the height values to accommodate all the text content - test on ipad etc. too (s5 is set up for longer content)

NB If you change the widths of .content divs in the CSS make sure you test the positions of the overflow scrollbars on small height windows - these are individually tweaked at line 751 in style.css e.g. .s2 div.jspVerticalBar {right: 43px;}

The purpose of this template is to act as a good base on which to build a dynamic sliding one-pager site with good ipad and mobile fallbacks. I have therefore steered clear of adding lots of extraneous design elements e.g. contact form CSS declarations which can on course be added as required.

A note on file sizes and performance

This template is fairly complex and relies of the loading of all content on initial page load. The sample backgrounds are PNGs - for these simple flat colour graphics they compress well and allow transparency. However, if you add a lot of photographic imagery or complex gradients/noise etc. to the backgrounds the total file size will shoot up and you may run into load time or performance issues on older equipment. Just something to be aware of!

Testing desktop and mobile presentations

Nothing beats testing on devices directly, but it's easy enough to 'roughly' test your mobile build by simply reducing the width of the viewport window in your browser. This should switch you to the 'mobile' version.

jQuery scrollbars

These appear on iPad and desktop for 'longer' content sections that overflow. The styling for these is line 724 in style.css


The template uses 2 Google Web Fonts that are hosted/served from Google's servers. These can of course be changed to web safe system fonts or other web fonts.

Transition 'easing'

the jQuery easing equation (easeInOutCirc) is built into the index.htm script - it's possible to change this, but there isn't a full easing library file included with lots of options/equations. see http://jqueryui.com/demos/effect/easing.html and http://jqueryui.com/ui/jquery.effects.core.js for other options/ideas. You can change the speed of the transition: find: $('#scroller').animate(css,850, 'easeInOutCirc' in the index.htm file and change the 850 (milliseconds) value.

Good luck! Chris Dawson