jQuery Cookbook > Dimensions > Centering an Element Within the Viewport

Table of Contents

Download Safari Books Online apps: Apple iOS | Android

Entire Site

Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

This Book

jQuery Cookbook

Search

Table of Contents

Ch. 2. Selecting Elements with jQuery

Ch. 3. Beyond the Basics

Ch. 4. jQuery Utilities

Ch. 5. Faster, Simpler, More Fun

Ch. 6. Dimensions

Introduction

Finding the Dimensions of the Window and Document

Finding the Dimensions of an Element

Finding the Offset of an Element

Scrolling an Element into View

Determining Whether an Element Is Within the Viewport

Centering an Element Within the Viewport

Absolutely Positioning an Element at Its Current Position

Positioning an Element Relative to Another Element

Switching Stylesheets Based on Browser Width

Ch. 7. Effects

Ch. 8. Events

Ch. 9. Advanced Events

Ch. 10. HTML Form Enhancements from Scratch

Ch. 11. HTML Form Enhancements with Plugins

Ch. 12. jQuery Plugins

Ch. 13. Interface Components from Scratch

Ch. 14. User Interfaces with jQuery UI

Ch. 15. jQuery UI Theming

Ch. 16. jQuery, Ajax, Data Formats: HTML, XML, JSON, JSONP

Ch. 17. Using jQuery in Large Projects

Ch. 18. Unit Testing

Colophon

6.7. Centering an Element Within the Viewport

6.7.1. Problem

You want to scroll the window to center an element within the viewport.

6.7.2. Solution

Get the viewport’s dimensions; determine the width, height, and offset of the element; and use a little math to center the element in the viewport:

You are currently reading a PREVIEW of this book.

Get instant access to over
$1 million worth of books and videos.

Start a Free Trial