News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Add custom js/css in head only in specific posts?

Started by spiros, June 19, 2021, 05:44:42 AM

Previous topic - Next topic

spiros


Kindred

Almost anything is possible, if you know how to code it.

In this case, possible but bothersome
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

spiros

Add functionality to specific pages which depends on extra css/js to work. ie https://datatables.net/ without loading it all over the forum.

Sir Osis of Liver

You should be able to use $_REQUEST['action'] to get id_board, id_topic, or id_message, depending on how specific you want to be, then use a conditional in the header code to display the additional content.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Sir Osis of Liver

Hmm, that won't do what you want.  You can identify the current topic with $context['subject'], and maybe do something with $message['id'], but I'm not getting that.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Sesquipedalian

If you are willing to load the CSS or JavaScript files on all pages where it might be needed, then all you need to do is to write the custom CSS and/or JavaScript to look for a specific CSS class and add that class to the posts that you want to affect.

For SMF 2.1, you can use the 'integrate_prepare_display_context' hook to append your custom class name to $output['css_class'] for any post you want to affect.

In SMF 2.0 it is slightly trickier, since neither the 'integrate_prepare_display_context' hook nor $output['css_class'] exist. But with a couple lines of file editing you could backport both of those to 2.0 and then proceed in the same way.
I promise you nothing.

Sesqu... Sesqui... what?
Sesquipedalian, the best word in the English language.

spiros

Wow, Sesquipedalian, that is very clever solution indeed! I use SMF 2.  If I understand correctly, if a specific css class exists in that page, then the JavaScript will load the extra css/js files, if not, then it will load nothing. Is that right?

I only wish I had the technical expertise for that.

Sesquipedalian

Not quite. The method I described will always load the CSS and JavaScript files, but will only run them if elements with the necessary class are found on the page.

Your earlier post was asking for a way to selectively load the custom CSS and JS on pages when it is needed, but that is difficult to do because the decisions about which CSS and JS to include in the HTML <head> are made before SMF starts processing individual posts.

My suggestion is instead that you accept that you will need to load that CSS and JS on every page that might use it, and then selectively trigger that CSS and JS by applying a special class to the individual posts that you want this custom CSS and JS to apply to.
I promise you nothing.

Sesqu... Sesqui... what?
Sesquipedalian, the best word in the English language.

spiros

I think what you describe is the way it works by default (talking about https://datatables.net), one needs to have this function

$(document).ready( function () {
    $('#myTable').DataTable();
} );


And if it finds a myTable class, then the css/js are applied to transform the table.

spiros

By the way, is there anything wrong with having css/js at the footer? It improves page rendering times. Only jquery seemed to not like that position, as datatables did not work properly, all other css/js was ok.

Sesquipedalian

JS is fine in the footer, unless you need it to run before the body content of the HTML is loaded.

CSS is always supposed to go in the HTML head, regardless whether you put it inside style tags or link to it as a separate file. You could, however, put some JavaScript in the HTML footer that inserted more CSS into the head element. It's ugly, but it works in a pinch.
I promise you nothing.

Sesqu... Sesqui... what?
Sesquipedalian, the best word in the English language.

Advertisement: