Welcome Guest, Not a member yet? Register   Sign In
How to add dynamic CSS and JS - need help
#1

(This post was last modified: 01-29-2016, 06:16 AM by KarinaRode.)

Hi, I'm new to CodeIgniter.

I've been trying to use this code http://dondanu.com/add-dynamic-css-and-j...deigniter/
(another article i've found was 2013 http://jamshidhashimi.com/2013/04/12/dyn...ader-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!
Reply
#2

(This post was last modified: 01-29-2016, 08:52 AM by DreamOfSleeping.)

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.
Reply
#3

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';
Reply
#4

No no. 'assets/css/' is that example path from the original article http://dondanu.com/add-dynamic-css-and-j...deigniter/

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/'
Reply
#5

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.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB