Slideout.js Deployment & Usage Guide

A comprehensive guide for integrating, building, and deploying the Slideout.js touch navigation library.

Prerequisites

• Node.js >= 0.10 (required for development/building)
• npm (included with Node.js)
• Modern web browser for testing (Chrome, Firefox, Safari, IE10+, Edge)
• Git (for cloning the repository)

Installation

For End Users (Integrating into a Project)

Via NPM:

npm install slideout

Via Yarn:

yarn add slideout

Via Bower:

bower install slideout.js

Via CDN (easiest integration):

<script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></script>

For Developers (Contributing to the Library)

git clone https://github.com/Mango/slideout.git
cd slideout
npm install

Configuration

Required HTML Structure

Your markup must include a menu element and a panel element:

<nav id="menu">
  <header>
    <h2>Menu</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </header>
</nav>

<main id="panel">
  <header>
    <button class="toggle-button">☰</button>
    <h2>Panel</h2>
  </header>
  <p>Main content goes here...</p>
</main>

Required CSS

Include these base styles (critical for functionality):

body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 256px;
  min-height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  z-index: 0;
  display: none;
}

.slideout-menu-left { left: 0; }
.slideout-menu-right { right: 0; }

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #FFF; /* Required */
  min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

JavaScript Initialization

var slideout = new Slideout({
  'panel': document.getElementById('panel'),    // Required
  'menu': document.getElementById('menu'),      // Required
  'padding': 256,                               // Menu width (px)
  'tolerance': 70,                              // Drag tolerance (px)
  'side': 'left',                               // 'left' or 'right'
  'duration': 300,                              // Animation duration (ms)
  'easing': 'ease',                             // CSS easing function
  'touch': true                                 // Enable touch events
});

// Toggle button handler
document.querySelector('.toggle-button').addEventListener('click', function() {
  slideout.toggle();
});

Build & Run

Building the Distribution File

The project uses Browserify to create standalone builds:

# Build the distribution file (creates dist/slideout.js)
node browserify.js

This generates dist/slideout.js and you should minify it for production (use slideout.min.js).

Running Locally

Since this is a client-side library, serve files with any static server:

# Using Python 3
python -m http.server 8000

# Using Node.js http-server
npx http-server -p 8000

# Using PHP
php -S localhost:8000

Then open http://localhost:8000 in your browser. For mobile testing, use browser DevTools device emulation or access via local network IP.

Development Workflow

1. Edit source code in index.js
2. Run node browserify.js to rebuild
3. Refresh browser to test changes
4. Run tests (if available via npm test)

Deployment

Integration Methods

1. CDN Integration (Recommended for quick setup):

<script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1.0.1/slideout.min.js"></script>

2. Module Bundler (Webpack/Rollup/Parcel):

import Slideout from 'slideout';
// or
const Slideout = require('slideout');

3. Static Asset: Copy dist/slideout.min.js to your project's assets folder and include:

<script src="assets/js/slideout.min.js"></script>

Publishing to NPM (For Maintainers)

# Update version
npm version patch|minor|major

# Publish
npm publish

# Tag release on GitHub
git push origin master --tags

Hosting the Demo

Deploy the demo to GitHub Pages:

1. Ensure demo files are in the repository root or /docs folder
2. Enable GitHub Pages in repository settings
3. Select source branch (usually master or gh-pages)
4. Access via https://[username].github.io/slideout/

For other static hosting (Netlify, Vercel, Surge):

# Deploy to Surge.sh
surge .

# Deploy to Netlify (drag and drop dist folder via web UI or use CLI)
netlify deploy --prod --dir=.

Troubleshooting

Menu Not Visible or Behind Content

Symptoms: Menu doesn't appear or is obscured by the panel. Solutions:

• Ensure .slideout-menu has z-index: 0 and .slideout-panel has z-index: 1
• Verify .slideout-menu has position: fixed and explicit width (default: 256px)
• Check that .slideout-open .slideout-menu CSS rule has display: block
• Ensure the panel has a background-color set (required to hide the menu underneath)

Touch/Drag Not Working

Symptoms: Cannot swipe to open/close menu. Solutions:

• Verify touch: true is set in options (default is true)
• Check for conflicting touch event listeners on the panel element
• Ensure viewport meta tag is present: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
• Test on actual mobile device or use browser DevTools mobile emulation
• Check for data-slideout-ignore attributes on child elements that might be blocking touch

Panel Not Sliding Smoothly

Symptoms: Janky animation or no transition effect. Solutions:

• Ensure .slideout-panel has will-change: transform for GPU acceleration
• Verify no CSS conflicts with transform properties on panel or menu
• Check that duration option is set (default: 300ms)
• Ensure browser supports CSS transforms (IE10+ required)

Menu Opens But Won't Close

Symptoms: Menu opens but toggle button or touch doesn't close it. Solutions:

• Verify the toggle button event listener is properly attached after DOM loads
• Check if slideout.close() is being called (add console.log to verify)
• Ensure no JavaScript errors in console preventing execution
• Check if tolerance value is too high, preventing close gesture

IE 10/11 Specific Issues

Symptoms: Not working in Internet Explorer. Solutions:

• Library auto-detects MSPointer events, but ensure -ms- prefixes are present in your custom CSS if overriding styles
• Verify transform CSS properties include -ms-transform for IE9 (though library supports IE10+)
• Check that z-index values are explicitly set (IE can have stacking context issues)

Performance Issues on Mobile

Symptoms: Laggy scrolling or slow animations on mobile devices. Solutions:

• Ensure -webkit-overflow-scrolling: touch is set on .slideout-menu for momentum scrolling
• Avoid heavy images or complex nesting inside the menu
• Use will-change: transform sparingly on other elements (memory intensive)
• Consider setting touch: false if only using button toggle (reduces event listeners)

NPM/Build Errors

Symptoms: Cannot install or build the project. Solutions:

• Ensure Node.js version is >= 0.10
• Delete node_modules and run npm install again
• If browserify command not found, install globally: npm install -g browserify
• Check that dist folder exists or create it manually before building

This covers all the sections requested with specific details from the README and source code. </think># Slideout.js Deployment & Usage Guide

A comprehensive guide for integrating, building, and deploying the Slideout.js touch navigation library.

Prerequisites

• Node.js >= 0.10 (required for development/building)
• npm (included with Node.js)
• Modern web browser for testing (Chrome, Firefox, Safari, IE10+, Edge)
• Git (for cloning the repository)

Installation

For End Users (Integrating into a Project)

Via NPM:

npm install slideout

Via Yarn:

yarn add slideout

Via Bower:

bower install slideout.js

Via CDN (Recommended for quick setup):

<script src="https://cdnjs.cloudflare.com/ajax/libs/slideout/1