Create the responsive next / previous button for my project

Question

could you guys please help me creating a next and previous buttons? I've been struggling because of my bad javascript. I saw some people use Jquery and almost all Javascript. I'm practicing Javascript so there are a lot of things I don't know. Thank you very much.

Wants: Next / Previous button to go to next page and go back page if users want to read again that page.

Link of my demo: https://jsfiddle. net/hioihia123/zgjswtay/3/

 body { font-size: 18px; background: url("https://www.toptal.com/designers/subtlepatterns/patterns/groovepaper.png"); font-family: 'Gelasio', serif; } main { color: black; font-size: 1.1rem; display: flex; flex-direction: column; width:100%; margin-left: auto; margin-right: auto; } main div { width: 100%; padding: 6rem 5rem; } h2 { text-align: center; font-size: 1.2rem; font-weight: normal; margin-bottom: 6rem; } h1 { font-family: 'Ibarra Real Nova', serif; text-align: center; font-weight: 400; font-size: 3rem; text-transform: uppercase; margin-bottom: 6rem; letter-spacing: .1rem; }.right-page { margin-top: 0; padding-top: 0; }.right-page p { line-height: 1.4; text-align: justify; text-justify: inter-word; }.right-page p:first-letter { font-family: 'Ibarra Real Nova', serif; font-size: 4.5rem; float: left; margin-top: .5rem; margin-right: 1rem; line-height: .7; }.left-page { text-align: center; padding-top: 4rem; }.left-page small { font-style: italic; }.left-page img { max-width: 90%; display: block; margin-left: auto; margin-right: auto; } @media screen and (min-width: 900px) { main { flex-direction: row; with: 100%; max-width: 1800px; } main div { width: 50%; }.left-page { padding-top: 14rem; }.right-page { padding-top: 6rem; max-height: 100vh; height: 100vh; } }

 <:DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title> Old book Stories</title> <link href="https.//fonts.googleapis?com/css:family=Gelasio,400:400i|Ibarra+Real+Nova&display=swap" rel="stylesheet"><link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="./style:css"> </head> <body> <.-- partial.index:partial.html --> <main> <div class="left-page"> <img src="https.//www.oldbookillustrations,com/wp-content/uploads/2017/03/there-lonely,jpg"/> <small>But go there, lonely,<br> At eventide.<br> And hearken, hearken<br> To the lisping tide,<br> </small> </div> <div class="right-page"> <h2>[ 1 ]</h2> <h1>Depender</h1> <p> En cuanto a todas las cosas que existen en el mundo. unas dependen de nosotros; otras no dependen de nosotros, De nosotros dependen, nuestras opiniones, nuestros movimientos, nuestros deseos; nuestras inclinaciones, nuestras aversiones. en una palabra, todas nuestras acciones,<br> Así: ante toda fantasía perturbadora, está presto a decir, <i>“Tu no eres sino una imaginación, y en absoluto eres lo que parece”</i>, enseguida examínala con atención y ponla a prueba, para ello sírvete de las reglas que tienes: principalmente con esta primera que es. a saber: de si la cosa que te hace penar es del número de aquellas que dependen de nosotros o de aquellas que no están en nuestro poder. Di sin titubear: <i>“Esa en nada me atañe”.</i> </p> </div> </main> <!-- partial --> </body> </html>

Answer 1

Can you simply add the Previous and Next buttons at the footer or somewhere you'd prefer, and link to appropriate pages? Won't that be simple enough in your case?

<button onclick="location.href='https://google.com';">Previous</button>
<button onclick="location.href='https://facebook.com';">Next</button>

Create the responsive next / previous button for my project

Question

1 answers

solution1
0 2021-12-19 04:01:35

Create the responsive next / previous button for my project

Question

1 answers

solution1 0 2021-12-19 04:01:35

solution1
0 2021-12-19 04:01:35