+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: Best Practices (https://forum.codeigniter.com/forumdisplay.php?fid=12)
+--- Thread: How to add dynamic CSS and JS - need help (/showthread.php?tid=64228)
How to add dynamic CSS and JS - need help - KarinaRode - 01-29-2016
Hi, I'm new to CodeIgniter.
I've been trying to use this code http://dondanu.com/add-dynamic-css-and-js-in-codeigniter/
(another article i've found was 2013 http://jamshidhashimi.com/2013/04/12/dynamically-add-javascript-and-css-files-in-codeigniter-header-page/ )
It says:
1. Add new config item in your config file:
PHP Code:
$config['css_path'] = 'assets/css/';
2. Create new helper file “helper/queuescript_helper.php”
3. In your controller file use below code,
PHP Code:
$data['css'] = array('bootstrap.css','custom.css');
$data['js'] = array('bootstrap.js','custom.js');
4. In your view,
PHP Code:
<?php queue_css($css);?>
<?php queue_js($js);?>***
I ended up with this code (after rewriting it a bit):
PHP Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
if ( ! function_exists('css_url'))
{
function css_url()
{
$CI =& get_instance();
return base_url() . $CI->config->item('css_path');
}
}
/**
* Load CSS
* Creates the <link> tag that links all requested css file
* @access public
* @param string
* @return string
*/
if ( ! function_exists('queue_css'))
{
function queue_css($file, $media='all')
{
if(!empty($file)){
foreach($file as $e) {
$element = '<link rel="stylesheet" href="' . css_url() . $e . '"';
foreach ( $atts as $key => $val )
$element .= ' ' . $key . '="' . $val . '"';
$element .= ' />'."\n";
echo $element;
}
}
}
}
/**
* Load JS
* Creates the <script> tag that links all requested js file
* @access public
* @param string
* @param array $atts Optional, additional key/value attributes to include in the SCRIPT tag
* @return string
*/
if ( ! function_exists('js_url'))
{
function js_url()
{
$CI =& get_instance();
return base_url() . $CI->config->item('js_path');
}
}
if ( ! function_exists('queue_js'))
{
function queue_js($file, $atts = array())
{
if(!empty($file)){
$element = '<script type="text/javascript" src="' . js_url() . $file . '"';
foreach ( $atts as $key => $val )
$element .= ' ' . $key . '="' . $val . '"';
$element .= '></script>'."\n";
echo $element;
}
}
}
/* End of file queuescript_helper.php */
I added queuescript into autoload:
PHP Code:
$autoload['helper'] = array('html', 'url', 'queuescript');
There was an error:
"Undefined variable: atts" and "Invalid argument supplied for foreach()"
line 27, that is:
PHP Code:
foreach ( $atts as $key => $val )
But I added $atts = array() into line 21
PHP Code:
queue_css($file, $media='all',$atts = array())
My base url is http://localhost/public_html
path to css folder is: public_html/styles
js folder is next to the codeigniter application folder
in config I've got (I tried all variants of path):
PHP Code:
$config['css_path'] = 'styles/';
$config['js_path'] = '../js/';
My browser doesn't see nor js nor css files. (I've restarted my wamp server).
Please, help!
RE: How to add dynamic CSS and JS - need help - DreamOfSleeping - 01-29-2016
Hey, I'm really no expert, so appogogies if what I says is not helpful!
You say your base url is http://localhost/public_html and your css path is 'assets/css/';
Your css url function returns return base_url() . 'assets/css/'
So that makes http://localhost/public_htmlassets/css/'
That would have a slash missing between 'public_html' and 'assets'.
Have you tried right clicking and looking at the source of the webpage to see what ends up being written in the html.
RE: How to add dynamic CSS and JS - need help - DreamOfSleeping - 01-29-2016
Also, I might misunderstanding but you say
path to css folder is: public_html/styles
but your config says
$config['css_path'] = 'assets/css/';
should it not be $config['css_path'] = 'public_html/styles';
RE: How to add dynamic CSS and JS - need help - KarinaRode - 01-29-2016
No no. 'assets/css/' is that example path from the original article http://dondanu.com/add-dynamic-css-and-js-in-codeigniter/
Mine is http://localhost/public_html/styles
and my js folder is in the same folder the public_html is located.
and this is in my config.php for css and js folders paths:
PHP Code:
$config['css_path'] = 'styles/';
$config['js_path'] = '../js/';
RE: How to add dynamic CSS and JS - need help - KarinaRode - 01-29-2016
Problem resolved!
I should have add echo into the piece of code for a header:
PHP Code:
<?php echo queue_css($css); ?>
<?php echo queue_js($js); ?>And I forgot to add one of my styles responsible for layout, that's why everything looked odd.