Blocks and the Anker Tag

Hi,

today I build a One Pager from the receipt at ( One-pager site | Kirby ).

Now I cover each segment (for example: news) in an anker tag like this:

<a href="#" onclick="toggleElementDisplay('<?= $data->uid(); ?>-detail');">
 <section id="<?= $data->uid(); ?>" class="tile <?= $data->uid(); ?>">
<h2><?= $data->title() ?></h2>
<div id="<?= $data->uid(); ?>-detail" style="display:none;">
  <?php foreach ($data->blocktext()->toBlocks() as $block): ?>
    <div id="<?= $block->id() ?>" class="block block-type-<?= $block->type() ?>">
      <?= $block ?>
    </div>
  <?php endforeach ?>
</div>

The idea behind is simple: Start the page, see only tiles with the headline. If you click on the tile, the blocktext changes from display:none to display:block. That runs!

The html in the browser looks like this:
image

Now I add a Anker Tag in the blocktext to link to another page, for example: impressum
The code in the browser changes and the result is wrong:

Unbenannt2

Without an anker tag in the blocktext structure there is no problem and the site looks nice…
What did I do wrong here?

Thanks for helping?

Jürgen Reichelsdorfer

The “problem” here is that Kirby doesn’t know you don’t have “separate pages” for your content, but that you decided to output them all in 1 page.

You’ld have to alter the url() behaviour to make that happen. More info here: Overwrite url() in page model

Hi, thanksfor your information.

As a supplement: I edit the block text in the panel and add my example of the local page imprint (which is also available) to the link there.

The link itself works too. The page imprint is a separate page with header, body and footer and does not belong to the onepager. Do I have any influence in the blockeditor at all?
I develop locally in xampp and then transfer from the VSC via ftp. That works fine. I thought I could address the internal pages directly “imprint” and not “http: //localhost/..../impressum”. I fall on my face when publishing.

Is it possible, that the blocktext editor is not compatible with the receipt from the one-pager? I think, this is an important question, because I want to develop near at the standard (I am not the crack… ) and my users should use the tools from the standard.

You have to add your link with a leading slash /impressum.

Ok, that’s how I built it in. Unfortunately nothing has changed in the result. I could imagine that the block editor might have to go to the workshop again. If you need more details, I’ll be happy to send them to you. Just ask…

For comparison: A block without a link in the text:

Unbenannt5

It could of course also be a mistake with me … but which one?

Is impressum a first level page?

361 / 5000

Yes, the Imprint page is a top-level page and has its own page structure (snippet: header, imprint, footer). What I don’t understand: I only build the link into the block editor and don’t press it at all. Just because the link is in the text, the page gets mixed up at this point. As an example: I once linked google …

Unbenannt6

The link also works … The page section is still no longer displayed correctly …

Could you send me the project for inspection, I cannot really reproduce this.

you can test ist on lieblingspsalm.de. This site is under construction, but I update the site with actual snippets and the content. The tile “Neues von den Lieblingspsalmen” should be on the first left upper position. There are only six tiles defined.

if you want the code, please send me an email to j.reichelsdorfer@aditl.de with your target adress. I will send you the whole project …

After inspecting your website, I noticed that your anker tags wrap the complete content, so using anker tags inside those anker tags is not valid HTML and that’s also the reason why it messes up the markup.

Consider using summary/detail markup for these sections.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

I tried that with the summary before. In this context, however, it is not the right one. these tiles are currently only at the beginning of an idea. however, I have to agree with you that the nesting of anchor tags is not particularly clever. I missed that. that takes me one step further and I have to find another way. Many Thanks.

Oh yes, and in this case you can delete this whole section here. it has nothing to do with kirby as it turned out and was just a banal mistake by a layman. this contribution confuses more than it helps. excuse me on the one hand and thank you for the help on the other.

Ok, maybe a suggested solution after all. Motivated by the support, I searched again and found something: onclick () in in a DIV. I have replaced the anchor tag with a DIV tag. The short javascript behind it probably doesn’t care. the click works and the inner anchor tag works now too. that’s what I wished for …

at the very top you can see the original code … hmmm, if I haven’t got a buck again, it might be an idea for a solution after all.

On a side note, using inline JS like you do (onclick="blabla")is discouraged for security reasons. Better add an external script.

Note that your content should also be accessible when users have disabled JavaScript and consider other accessibility issues with hidden content in general.

Thank you very much. I gladly take this advice.
First of all, I’m still working on a few ideas. Friends of mine are testing this immature version at the same time. So it is already online even if it does not yet have any usable content.
i will take your advice when all of the following scripts are there (actually i want as few of them as possible).

maybe a side note and maybe it doesn’t belong in a support forum: maybe i don’t want to please everyone with this website. if i judge it that way, then there are definitely a lot of users on the internet who have no or only a few restrictions in their browser (e.g. no javascript). they just use the internet. If I can’t reach one or the other user group, then I just can’t reach them. i don’t live from selling psalms, it’s an offer to read and think about … i see a great advantage here for me and my job as a layperson compared to a professional programmer or agency service. but, anyway, I want to do it well as far as possible. therefore again my thanks to the help from you and from the forum of kirby.

That is of course totally up to you. You make your decisions about your target groups, what browsers and technologies you support.

But in general, it should be everybody’s aim to make their websites as easy to use and as accessible as possible, at least if you target a general audience.

And after all, this is an open forum and people come here for solutions, so the answers provided are not only intended for the individual thread opener but for all people who might run into similar problems in the future.

That’s very kind of you. I am happy that my “little” problem can help others. I didn’t look at it that way from this angle. Thank you very much for your final encouragement. I really thought that as a newbie I couldn’t really bring in anything here, except for beginner problems. Thank you and see you next time when it’s back to “Houston, I have a problem …”