Hi! All gliders.
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.
Anyone have an idea to Prev / Next a screen made of rich text?
Possibly a floating button would work? What type of rich text are you inserting into the screen?
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.
How do you make the action with the floating button?
It also has the custom action like the normal button, so just add increment/decrement flows like what I suggested in the other thread.
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?
Can you record a video of what’s not working? Thank you.
I do not think this is the best way to do this at all.
Hi
How did you get the floating circle to work?
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>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.
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!
Good job with the HTML/CSS!
Here’s a video of how to do it.
Here’s the app link to copy back:
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!
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.
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.