jQuery JavaScript Plugin

Hello, I’m a Kirby newbie.

I need to transfer a finished page into a running Kirby CMS. I created a new page in the panel and simply inserted the HTML code. So far, it’s working very well. Only the new page uses the jQuery plugin for sticky table cells. This needs a .js and .css. My question now is where to copy them to so kirby can find them.

This is how it should look like: https://maxrabe.com/pina/

And that’s how it looks right now: https://wrz.uni-potsdam.de/pina/service/forschungsprojekte

Thanks a lot.

The CSS in the head tag of the template, the JavaScript usually before the closing body tag.

Thank you, but I meant in which folder the .js and .css. files put in. Hopefully :confused: they are in the right place in the html code.

Into /assets/js or whatever subfolders the /assets folder has… (if there is an assets folder, that is)

1 Like

Ok, I created a folder there and put them in. Unfortunately it does not work yet. I do not know much about programming. This makes troubleshooting a bit difficult for me.

What have you actually put into this page of yours? A complete HTML page? Which template is used to render this page?

I have been assigned the administration of a website based on Kirby and have to add another page. Someone else has created this new page (the link above). I have inserted the source code (minus the source code of an empty page) into the panel. It all works perfectly except for the sticky header.
The template (in the panel) is called “page” but I can’t find such in the “templates” folder.

I still don’t understand. Do you mean to say that you have inserted the complete HTML for the new page in the Panel? So everything from the doctype definition to the closing html tag? If you do it that way, you would have to add the script there as well.

This would, however, defeat the purpose of using a CMS…

Usually, the content goes into the text file, the HTML into a template file.

I know, but I have to insert this page 1:1 and the guy who created this single page, did not do this in Kirby. So I tried to copy the complete html code into the backend and it works perfectly except for this sticky header script.
Is it not possible to link to these script files somehow?

If I were you, I would do the following:

  1. Create a page folder with an empty text file, e.g content/pina/pina.txt.
  2. Then create a php template /site/templates/pina.php.
  3. Into that pina.php template, insert the complete HTML that you originally pasted into the Panel.
  4. Before the closing body tag, add this line:
<?php echo js('assets/js/path-to-js-file') ?>
1 Like

The page remains empty (except the header etc.). I guess that the template is not connected to the .txt-file. The new template cannot be found in the panel either. :disappointed:

Template file and text file must have the same name, for example pina.txt and pina.php. Or, if you are in a multi-language environment, the text files must be named pina.de.txt etc., i.e. with the language extension.

Excuse me, the blank page was due to a bug in my local installation. Online it works. However, the Sticky-Table-Plugin still does not work. And a second problem is that the menu on this page would not accept any changes.

It would be useful if you could post your current template code, or rather – since this is problably a lot of stuff – link to a gist or a repo with this template

Took a while, I hope that’s what you need. Thanks for your time.

Oh! Well, that template loads styles and scripts in the middle of the HTML, so there might be things that interfere and you might be loading stuff twice now, because there is a script tag somewhere in the middle that already tries to load sticky tables. So you would have to either remove that, or add the correct path there. See https://github.com/Sebbomophon/pina/blob/a26ab3916098912167d972c7c7b4cef0db95761f/vergleich.php#L164

Check your browser console for errors. This is not something we can sort out for you, because it is not a Kirby related issue.

1 Like

Apparently, it was the paths. Many thanks for your patience.