Turn page in javascript

JavaScript Redirect

Summary: in this tutorial, you will learn how to use JavaScript to redirect to a new URL or page.

Introduction to the JavaScript redirect

Sometimes, you want to redirect users from one page to another page that has a different URL.

For example, you can create an app landing page that purely redirects the users to the Google Play or Apple Store, depending on the operating system that their smartphones have.

• Detect the operating system of the smartphones
• Redirect to Apple Store if the OS is iOS and Google Play if the OS is Android.

The redirection can be done in the web browsers using JavaScript redirection API.

It’s important to note that JavaScript redirection runs entirely on web browsers. Therefore it doesn’t return the status code 301 (move permanently) like a server redirection.

Therefore, if you move the site to a separate domain or create a new URL for an old page, you should always use the server redirection.

Redirect to a new URL

To redirect web browsers to a new URL from the current page to a new one, you use the location object:

location.href = 'new_url';Code language: JavaScript (javascript)

location.href = 'https://www.javascripttutorial.net/';Code language: JavaScript (javascript)

Assigning a value to the href property of the location object has the same effect as calling the assign() method of the location object:

location.assign('https://www.javascripttutorial.net/');Code language: JavaScript (javascript)

Either of these calls will redirect to the new URL and create an entry in the history stack of the browser. It means that you can go back to the previous page via the Back button of the browser.

To redirect to a new URL without creating a new entry in the history stack of the browser, you use the replace() method of the location object:

location.replace('https://www.javascripttutorial.net/');Code language: JavaScript (javascript)

The following example creates a page that redirects web browsers to Google Play or Apple Store if the OS is Android or iOS. Otherwise, it’ll show a message indicating that the OS is not supported:

index.html

html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>JavaScript Redirect title> head> body> div class="message"> div> script src="js/app.js"> script> body> html>Code language: HTML, XML (xml)

js/app.js

const apps = < Android: 'https://play.google.com/', iOS: 'https://www.apple.com/store', >; const platform = () => < let userAgent = navigator.userAgent || navigator.vendor || window.opera; if (/windows phone/i.test(userAgent)) return 'Windows Phone'; if (/android/i.test(userAgent)) return 'Android'; if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return 'iOS'; return null; >; const redirect = () => < let os = platform(); if (os in apps) < location.replace(apps[os]); >else < const message = document.querySelector('.message'); message.innerText = 'Your OS is not supported'; > >; redirect();Code language: JavaScript (javascript)

First, define an apps object with the keys are OS and values are URLs of the Google Play and Apple Store:

const apps = < Android: 'https://play.google.com/', iOS: 'https://www.apple.com/store', >;Code language: JavaScript (javascript)

Second, define a function that detects the OS:

const platform = () => < let userAgent = navigator.userAgent || navigator.vendor || window.opera; if (/windows phone/i.test(userAgent)) return 'Windows Phone'; if (/android/i.test(userAgent)) return 'Android'; if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) return 'iOS'; return null; >;Code language: JavaScript (javascript)

Third, create the redirect() function that detects the OS and redirects the web browser based on the detected OS:

const redirect = () => < let os = platform(); if (os in apps) < location.replace(apps[os]); >else < const message = document.querySelector('.message'); message.innerText = 'Your OS is not supported'; > >;Code language: JavaScript (javascript)

Finally, call the redirect() function:

Redirect to a relative URL

The following script redirects to the about.html which is on the same level as the current page.

location.href = 'about.html';Code language: JavaScript (javascript)

The following script redirects to contact.html page located in the root folder:

location.href = '/contact.html';Code language: JavaScript (javascript)

Redirect upon page loading

If you want to redirect to a new page upon loading, you use the following code:

window.onload = function( ) < location.href = "https://www.javascripttutorial.net/"; >Code language: JavaScript (javascript)

Summary

• To redirect to a new URL or page, you assign the new URL to the location.href property or use the location.assign() method.
• The location.replace() method does redirect to a new URL but does not create an entry in the history stack of the browser.

Источник

Make a flip book with HTML5

Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5.

Let’s code

"flipbook"> 
"hard"> Turn.js  
"hard"> Page 1  Page 2  Page 3  Page 4 
"hard"> 
"hard">  

"text/javascript"> $("#flipbook").turn(< width: 400, height: 300, autoCenter: true >); 

Features

• ✓ Works on iPad and iPhone.
• ✓ Simple, beautiful and powerful API.
• ✓ Allows to load pages dynamically through Ajax requests.
• ✓ Pure HTML5/CSS3 content.
• ✓ Two transition effects.
• ✓ Works in old browsers such as IE 8 with turn.html4.js

Requirements

Browser Support

Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8

Devices

Improvements

Turn.js 4 includes a set of significant performance improvements on its core.

• ✓ Effects are now quite smoother on the browser platform.
• ✓ The new DOM composition guarantees the same performance no matter the amount of pages.

Complements

turn.html4.js — The HTML4 version of turn.js.

zoom.js — The new zoom feature of turn.js, See a sample.

scissors.js — Cuts a page in two parts for turn.js.

hash.js — Controls the navigation history using pushState and URI hashes.

API Documentation

The turn.js API was conveniently built as an UI plugin for jQuery, it provides access to a set of features and allows you to define the user interaction.
The complete documentation is available here, it’s also available in PDF format.

Options

Properties

Methods

Events

CSS Classes

Support

You can browse all issues on GitHub.
If you’d rather report issues using your email, you could contact us to: support@turnjs.com

Licensing

The turn.js project is released under the BSD license and it’s available on GitHub. This license doesn’t include features of the 4th release.

About

I’m Emmanuel García, a front-end developer from Venezuela, who loves to push the web forward with new technologies.

I look forward to releasing new projects. One of those will allow you to split HTML content into pages depending on the size of the pages. While loading pages with turn.js, this library would have an infinity potential. Think about detecting the number of pages automatically, creating a table of contents that knows where every page is, and adding functions like font size.

I’m also interested in using pdf.js and node.js for a new library that will convert pdf files into pure HTML5 (text/CSS3) files to provide content for the frontend with turn.js.

Follow me on Twitter: @blasten or Github
Reach me out: blasten@gmail.com

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

The page flip effect for HTML5

License

blasten/turn.js

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

readme.md

Get the turn.js 4th release on turnjs.com

What’s new in turn.js 4th release?

• Added option autoCenter
• Added option zoom
• Added property animating
• Added property zoom
• Added method center
• Added method destroy
• Added method is
• Added method zoom
• Added event missing
• Added event zooming
• Added class .even
• Added class .fixed
• Added class .hard
• Added class .odd
• Added class .own-size
• Added class .sheet
• Added the ignore attribute
• New turn.html4.js
• New scissors.js
• Changed the class .turn-page to .page
• Improved the animation frame generator with requestAnimationFrame
• Improved the animation speed for hard pages with CSS3 transitions
• Redesigned the event sequence to listen to only three events
• Fixed issue #79
• Fixed issue #91
• Fixed issue about the event order turning + turned
• Fixed issue about appending pages in wrong locations

Make a flip book with HTML5

Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine. It works in all modern browsers including touch devices.

• New addPage for creating pages dynamically.
• New display for single and double pages.
• Gradients for non-webkit browsers.

#magazine< width: 800px; height: 400px; > #magazine .turn-page< background-color:#ccc; >

div id pl-s">magazine"> div>span class pl-s">text">Page 1span>div> div>span class pl-s">text">Page 2span>div> div>span class pl-s">text">Page 3span>div> div>

JavaScript code:

$('#magazine').turn(gradients: true, acceleration: true>);

Released under a non-commercial BSD license

Источник