CSS or Javascript on certain pages

101 Posts

gcruz Reply #1, 19 years, 11 months ago

I’ve looked all over the documentation for this, but maybe someone can help me out before I go crazy.

I’d like to break my css into manageable chunks of code.

For example, for forms related css, I want to have a forms.css. It wouldn’t make sense to load forms.css on pages that doesn’t have any form elements.

How do have it show up in the head of my template, but only show the css link for a specific document (the ones with forms)?

The same for Javascript. I don’t want js to load on pages that don’t use specific scripts.

Thanks for your help!

7,075 Posts

davidm Reply #2, 19 years, 11 months ago

Don’t go crazy wink

You can indeed break your css into manageable chunks of code (you couldn’t use a better word, since what I am going to point you toward explains how to use MODx chunks in your CSS). Some call it modular css, I call it plain common sense and a MODx blessing : native server side css capabilities make this child play. Yes, MODx is not limited to a text/html document type which is real cool.

Just read [Tutorial] Use CSS as MODx document
With this technique, you won’t need multiple css files, but multiple chunks which you’ll insert in your CSS document. You can of course enjoy the same benefits you enjoy in your html templates, that is content re-use (sure makes our life easier

). Why is that ? Because your CSS document is dynamic and parsed by MODx. You can have chunks in there, but possibly snippets too (though right now, I didn’t try it, but I guess you could implement a random background pretty easily for instance...). One thing : TVs won’t work, don’t ask me why, Susan found that out I don’t remember the thread... I think it has to do with the parsing order. If I find it I’ll update my post here.

Now about js, I have never tried this with Javascript, but I suppose it’s theoretically possible (here is an interresting thought...).

As for the need to adapt your CSS or js according to which page you’re on, that’s also possible but it will involve having multiple templates. Unless... wait a minute, I just got an idea ! I’ve never tested this but it would be an interresting thing to try out : download the OutputIfPage snippet and use it to modulate your CSS call according to which page you’re on (Man, I am gonna test this tomorrow that would lower the number of necessary templates grin

)

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

101 Posts

gcruz Reply #3, 19 years, 11 months ago

Outputif looks like it is going to reduce the amount of templates I’ll need as well!

Outputif works great with chunks too!

I can’t test the css as document since I don’t have FURLs working yet.

I believe this is what I was looking for! I know I can use that snippet for other things I need to use conditional statements based on document ID.

Thanks for the quick response!

7,075 Posts

davidm Reply #4, 19 years, 11 months ago

Glad you enjoy it as much as I do grin

FURLs are not hard to set up with MODx, it’s worth giving it a shot, CSS as document is really nice I can’t work without it now...

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

1,010 Posts

TobyL Reply #5, 19 years, 11 months ago

You can indeed break your css into manageable chunks of code (you couldn’t use a better word, since what I am going to point you toward explains how to use MODx chunks in your CSS). Some call it modular css, I call it plain common sense and a MODx blessing : native server side css capabilities make this child play. Yes, MODx is not limited to a text/html document type which is real cool.

Just a note about generating your css dynamically and transparent proxies. If visitors to your site are connected through a transparent proxy server they may not experience the dynamic nature of your css. The proxy only sees one url for your css file and will cache the file the first time it encounters it. When a visitor navigates to a different page linked with the same css file (but different dynamic content) they will see the cached first version. Not quite what you intended... Some proxy servers are notoriously persistent when it comes to css files. (I ran into this myself just about a week ago when my ISP decided to introduce a transparent proxy without telling it’s clients)

The way to overcome this, at least if you are running on an apache server, is to add something like the following to your .htaccess file: (Off course this only works if your apache server has mod_expires installed.)

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType text/css "now"
</IfModule>

Don’t assume that because you don’t experience any problem, your visitors won’t either. If I was to use dynamic css I would place something like this in my .htaccess file for sure. I’m not (using dynamic css) simply for the reason that I like the advantage of cached (local or on a proxy) stylesheets. I rather have a stylesheet which is a few hundred bytes longer which is downloaded once then a stylesheet that appears to be efficient in file size but has to be downloaded at every page view.

eForm | eForm support | eForm @ wiki

MODX Staff
10,725 Posts

opengeek Reply #6, 19 years, 11 months ago

Another simple approach I often use is to create a TV that holds additional HEAD content, then use @INHERIT or simply customize a default value for each page as necessary to include custom JS or CSS files.

Put the TV tag in your template right before the closing HEAD tag.

...
[*head-extra*]
</head>
...

For those that prefer a snippet-based approach, you can create a snippet and use the various MODx API methods that allow you to register JS and CSS into the page content, including right before the closing HEAD tag. See the following...

regClientCSS
regClientScript
regClientStartupScript

Jason Coward
Chief Architect @ MODX
http://www.jasoncoward.com | http://twitter.com/drumshaman | https://github.com/opengeek

1,010 Posts

TobyL Reply #7, 19 years, 11 months ago

For those that prefer a snippet-based approach, you can create a snippet and use the various MODx API methods that allow you to register JS and CSS into the page content, including right before the closing HEAD tag. See the following...

Here’s just such a snippet for css files:

<?php
# Snippet addCssFile - add css stylesheets from a TV
# Written by Jelle jage
#
# usage:
# 1. Create a TV with a list of css file names (checkbox, dropdown etc)
#     Do not use an output widget for the TV!
#     Assign the TV to your template(s)
# 2. Add snippet call somewhere in your template(s). Position is not
#     important as the snippet will not output anything itself (output is
#     generated by $modx->regClientCSS()
#
# Parameters:
# &tvname - name of the TV you have just created
# &csspath - path to your css files, defaults to assets/site/

$TVname = isset($tv)?$tv:'addStyle';
$cssPath = isset($csspath)?$csspath:'assets/site/';
if(!$TVname) return ""; //bail out if no template variable supplied

//get TV output (if any) and register as css file
if( $TVarr = $modx->getTemplateVarOutput(array($TVname)) ){
$stylesheets = $TVarr[$TVname][1];
if(empty($stylesheets)) return ''; //bail out if no value
if(strpos($stylesheets,'||'))
$stylesheets = explode('||',$stylesheets);
else
$stylesheets = array($stylesheets);
//register stylesheets
foreach($stylesheets as $cssFile)
$modx->regClientCSS('<link rel="stylesheet" type="text/css" href="'.$cssPath.$cssFile.'" />');
}
//no need to return anything here
return "";
?>

You can easily adapt this to use it with javascript after reading the links opengeek supplied.

eForm | eForm support | eForm @ wiki

7,075 Posts

davidm Reply #8, 19 years, 11 months ago

@Jason : Thanks, I didn’t think of using TVs there, how dumb huh

That’s great...

@TobyL : Interresting, I have had some unresolved issues which were probably tied to this proxy thing... And about AddCSS, how didn’t I think of this one, ~~already had it on my HDD~~ Edit : Nope, it was addCss rolleyes

Did you add this to the resources ?
I guess lot of people would enjoy that one

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

1,010 Posts

TobyL Reply #9, 19 years, 11 months ago

Quote from: davidm at Nov 06, 2006, 06:09 AM

@Jason : Thanks, I didn’t think of using TVs there, how dumb That’s great...

@TobyL : Interresting, I have had some unresolved issues which were probably tied to this proxy thing... And about AddCSS, how didn’t I think of this one, ~~already had it on my HDD~~ Edit : Nope, it was addCss

Did you add this to the resources ?
I guess lot of people would enjoy that one

No, I just quickly whipped it up as an answer to this topic... but I can offcourse

There you go... You can find it here. I’ve extended it a bit to make it more usefull, and gave it a more appropriate name.

eForm | eForm support | eForm @ wiki