# Magazine paging

**URL:** <https://community.glideapps.com/t/magazine-paging/21238>\
**Category:** Project Showcase\
**Created:** [January 16, 2021, 3:22am UTC](https://community.glideapps.com/t/magazine-paging/21238 "2021-01-16T03:22:53Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 16, 2021, 3:22am UTC](https://community.glideapps.com/t/magazine-paging/21238/1 "2021-01-16T03:22:53Z")

</div>

Hi! All gliders.

 ![スクリーンショット 2021-01-16 12.33.19](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/2/f2b6b01e5f7c8980d1834d826ac11392ea354ee9.jpeg)

I was playing with the new button bar.  
Prev / Next for inline lists was successful with the idea of Thinh Dinh. Thank you Thinh Dinh!  
However, I am creating a magazine-like screen with rich text + CSS. As a result, I couldn’t control rich text well with -1 / + 1 on the buttonbar.  
↓ Here is the current workaround for that.

> **[magazine-like-view](https://oceanic-airport-9976.glideapp.io/)**

Anyone have an idea to Prev / Next a screen made of rich text?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 16, 2021, 3:52am UTC](https://community.glideapps.com/t/magazine-paging/21238/2 "2021-01-16T03:52:27Z")

</div>

Possibly a floating button would work? What type of rich text are you inserting into the screen?

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 16, 2021, 4:03am UTC](https://community.glideapps.com/t/magazine-paging/21238/3 "2021-01-16T04:03:57Z")

</div>

Thank you Thinh Dinh!  
I’m writing CSS using a template column.  
It is a mechanism that reflects the image and text of each line.

 ![スクリーンショット 2021-01-16 12.55.06](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/5/d5efe0b0541e2957f9b371af8854b2534a708369.jpeg)

How do you make the action with the floating button?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 16, 2021, 4:07am UTC](https://community.glideapps.com/t/magazine-paging/21238/4 "2021-01-16T04:07:21Z")

</div>

It also has the custom action like the normal button, so just add increment/decrement flows like what I suggested in the other thread.

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 16, 2021, 4:13am UTC](https://community.glideapps.com/t/magazine-paging/21238/5 "2021-01-16T04:13:10Z")

</div>

I thought so and tried it, the inline list was successful, but the button doesn’t work for rich text.  
Am I doing something wrong?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 16, 2021, 4:16am UTC](https://community.glideapps.com/t/magazine-paging/21238/6 "2021-01-16T04:16:30Z")

</div>

Can you record a video of what’s not working? Thank you.

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [January 16, 2021, 2:19pm UTC](https://community.glideapps.com/t/magazine-paging/21238/7 "2021-01-16T14:19:53Z")

</div>

I do not think this is the best way to do this at all.

---

<div class="post-metadata">

**Author:** ![Valentine\_Madzhie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/valentine_madzhie/32/11453_2.png) [@Valentine\_Madzhie](https://community.glideapps.com/u/Valentine_Madzhie)\
**Post date:** [January 16, 2021, 5:57pm UTC](https://community.glideapps.com/t/magazine-paging/21238/8 "2021-01-16T17:57:54Z")

</div>

Hi

How did you get the floating circle to work?

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/8/f88ae47892fc16d5dd69911e806aa819dd864297.png)

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 18, 2021, 2:44am UTC](https://community.glideapps.com/t/magazine-paging/21238/9 "2021-01-18T02:44:14Z")

</div>

The circle is created with CSS.  
try this.

```
<div class="circle">
<p class="circle_p"> button<br>text </p>
</div>
<style>
@keyframes moveimg1 {
0% {transform: translateY(-800px);} /* ←Moving distance */
}
.circle{ 
margin-top: -50%;
display: grid;
place-content: center;
position: relative;
width: 80px; height: 80px;
border-radius: 50%;
background: rgba(255,0,0,0.6);
animation: moveimg1 2.5s; } /* ← Animation time */ 
p.circle_p{ 
text-align: center;
font-size: 1em;
line-height: 1em;
color: #fff;
width: 80px;
}
</style>
```

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 18, 2021, 3:14am UTC](https://community.glideapps.com/t/magazine-paging/21238/10 "2021-01-18T03:14:04Z")

</div>

Thank you Thinh Dinh!  
This question may be difficult to convey in the video.  
Therefore, I am modifying the contents of the appli so that it can be copied.

> **[magazine-like-view](https://oceanic-airport-9976.glideapp.io/)**

My purpose is to use Prev / Next to control the CSS layout I typed in rich text, which I use in the tabs (2) and (3).  
In (2), it is partially realized, but it is not very beautiful.  
If you give me any useful ideas, my hard work last weekend will be rewarded.  
(1) InlineList\_Paging ← Successful!  
(2) Test layout ← Successful?  
(3) Rich layout ← Not successful yet!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [January 18, 2021, 4:14am UTC](https://community.glideapps.com/t/magazine-paging/21238/11 "2021-01-18T04:14:56Z")

</div>

Good job with the HTML/CSS!

Here’s a video of how to do it.

> **[Screen Recording 2021-01-18 at 11.11.39 AM.m3u8](https://media.lowcode.agency/OAuWA5d0)**

Here’s the app link to copy back:

> **[magazine-like-view](https://many-airport-6198.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 18, 2021, 4:20am UTC](https://community.glideapps.com/t/magazine-paging/21238/12 "2021-01-18T04:20:26Z")

</div>

Thank you, thank you, and thank you ThinhDinh!  
I would like to take a peek at your magic immediately.

I saw it and came back.  
Very great!  
Especially the Play sound trick is a mechanism that is easy for users to understand.  
After this, I will enjoy following the details of Magic.  
Thank you again Thinh Dinh!

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 19, 2021, 9:19am UTC](https://community.glideapps.com/t/magazine-paging/21238/13 "2021-01-19T09:19:23Z")

</div>

With the help of Thinh Dinh, the prototype of the app with Prev / Next function has been completed.  
I was able to control the CSS screen with the Prev / Next function.  
★ Solved the problem that nothing was displayed at the first access.  
★Increment of “+1” is set for the transition from the TOP page.  
★ Inline List that transitions directly to any page has been set.

> **[E-BOOK](https://capricious-drink-5433.glideapp.io/)**

Perhaps even if the number of pages increases with this, I think that it can be handled as it is without changing the mechanism.  
Thank you Thinh Dinh.