Welcome Guest, Not a member yet? Register   Sign In
Numerous CSS and Scripts Loading in Every View

I blame it on work (the cause of all of lifes problems)
I'm sure that quote should be about beer, and say its the solution to all of lifes problems Tongue

[quote author="Dam1an" date="1242782764"][quote author="jdfwarrior" date="1242782504"]So wait... is inline css bad?? Oh noes! hehe[/quote]

I hope (for your own sake) that you're joking

And I didn't mean inline in that sense, just all in the header block... yours is even worse Tongue[/quote]

ummmm... crap, I've already reprogrammed 75% of my code to include js inline and minimize the number of .js loads... j/k :bug:

Thanks for the constructive feedback.

Quote:Map which css and javascript go where and if you find a pattern you can join the common css and javascript with specific css and javascript for groups of pages, for example a forms.js and forms.css.
So combine the .js and .css, by literally putting the javascript and css code in one file? Ok.. makes sense when talking about having only 1 html load.

Can you explain a little more on "map which css and javascript..." in terms of code example. You mean add some line of code in my config file or routes file?

With mapping i meant checking which javascript code and css styles are used on which page.

For example if you have a search box on your site and it gets displayed on every page you can put the javascript code in a frontend.js and the css styles in a frontend.css file. If the only place you display a modal is in the forms, you can create a forms.js and forms.css but if most pages are forms you better put it in the frontend.js/.css files to minimize the files that need to be loaded.
If the backend and frontend both have many forms you could create common.js/.css files. If the only form on the frontend is the contact form you add a js/css file for the specific plugin.

The downside of this method is the fact plugins can be in multiple files so when you want to update the plugin you need to check each file if it contains the plugin code. To detect the plugin code faster in files that contain multiple plugins you can add a comment with the plugin names in the order they can be found in the file.
*  autocomplete, modal

/* autocomplete */

/* modal */
Above is a sample that could be used in javascript and css files.

I never hinted that js and css should be in one file.

[eluser]Lou K[/eluser]
Hey folks,

(FYI: In response to the debate about where to place CSS/JS includes within a page: according to YSlow, which is the greatest tool ever for improving real and perceived site performance, CSS should go in the <head> block and JS should go just before the end of the document. CSS can then be used to progressively render the page, whereas JS, which can sometimes halt rendering, isn't loaded until the page is already rendered. Good rule of thumb. See http://developer.yahoo.com/performance/r...ml#css_top)

I came up with a way to handle js/css includes on a view-by-view basis that has worked pretty well for me on a recent project... I wouldn't want to build a CI app without it!

Basically, I have css and js helpers that provide the methods require_css() and require_js(), which take a single argument--the location of a JS/CSS file relative to the JS/CSS base directory.

These helpers just provide quick, global access to methods in the Static_content_support library, which does the heavy lifting of managing static content. I use a display_override hook to wrap views with a header and footer, and this hook gives Static_content_support a chance to insert the actual JS/CSS includes into the page's HTML before pushing it to the user.

So, the Static_content_support library builds an array of required js/css files throughout the controller's execution, and then inserts them into the final page, along with global CSS/JS files that it includes itself. This approach is nice for a couple of reasons:

-It lets you dynamically change the location of static content. Static_content_support can have logic to point to S3 for production, for example.
-It lets you merge core CSS/JS into a single, minified file, which can speed up page loading for production. If a core CSS/JS file is requested by a view, the Static_content_support library recognizes that the file doesn't need to be loaded individually.
-It allows the developer to break CSS and JS into many files, for the sake of organization, knowing that they will be combined into a single file on production.
-It allows special cases, such as HTTPS, to be handled in a single place, by the library.

I've combined this Static_content_support code with a publishing script that combines core files together and minifies them before publishing them to S3. Additionally, image URLs within CSS files are updated to their production equivalents when publishing. This means, basically, that I never have to think about Static content, and everything works the way it should, which is pretty sweet.

You can checkout the Static_content_support library here: http://pastie.org/493948. Within my views, the code looks like:

<?php require_js('plugins/jquery.validate') ?>
<?php require_js('plugins/jquery.alphanumeric') ?>
<?php require_js('user/change_information') ?>
<?php require_css('user/my_account') ?>

(extensions are added automatically, if necessary).

I use a similar method as well. I use different plugins for certain pages, so I use in my controller
$data['js'] = array('jquery/jquery_live','jquery/jquery_cycle');
I have a jquery subfolder under views, and have /application/views/jquery
<scrpt type="text/javascript" src="&lt;?=base_url();?&gt;js/jquery.live.packed.js"></scrpt>
Then I use in the main view
   foreach($js as $j)
I do this because I'll use the jquery UI for a page needing drag-n-drop, animation easing.

Use the Template library. It's a much better way of using views, and you can load js or css files as and when you want.

I wouldn't work without it now.



Just throwing my 2 cents in, I created the External Library that I use all the time. Some people have created mods for it that I haven't included yet (but I do mean to at some point). It just makes it really easy to load css and js files for individual pages and keep them all in the &lt;head&gt;

Theme © iAndrew 2016 - Forum software by © MyBB