Days
Hours
Minutes
Seconds
Happy Ramadan! Enjoy limited time 30% discount. Coupon: RAMADAN24(Valid for annual subscription)
qxio-ios-color-wand-outline Grab The Deal

How to Load CSS / JS in Element

A new Asset Manager introduced in Quix 1.1.0 to unify the interface throughout Quix for adding and managing CSS and JavaScript. Asset Manager simplify the process of adding JavaScript and/or CSS from your elements view file.

The Asset Manager is just a class that is available throughout Quix files. There are 2 paths already registered as global constant so you can quickly resolve the path from your elements.

Constant Resolved Path
QUIX_URL /libraries/quix
QUIX_TEMPLATE_URL /templates/YOUR_TEMPLATE/quix

Adding Css

Assets::Css ( string $handle, string $src = false, int $order, string|bool|null $ver = false )
Parameters Description
$handle (string) (Required) Name of the script. Should be unique. You can also pass $slug as its unqiue for every element
$src URL of the script, eg: QUIX_URL."/assets/css/style.css"
$order (int) (Optional) Specifying assets order, if it has one, asset will load on specified order or default order.
$ver (string or bool or null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed Quix version. If set to null, no version is added.

Example

Assets::Css($slug, QUIX_TEMPLATE_URL."/elements/MY_ELEMENT/css/style.css", 12);

Replace MY_ELEMENT with your element folder name. By defining 12 you are telling Quix to load this assets to 12 number position. If total assets is less than provided order value, it will load end of the asset.

Adding InlineCss

Create style.php file insdie your element folder and you can write css code here. All css code will injected to your html header.

Beauty of this approach is, you can write conditional css with php and all the element fields available on this file.

Example

<?php if($field['title]):?>
#<?php echo $id?> .qx-title{ color: red; }
<?php endif?>

In this example, we checked if there anything in title field. If yes, we added title color. We can make it more dynamic like this :

<?php if($field['title]):?>
#<?php echo $id?> .qx-title{ <?php Css::prop('color', $field['title_color']);?> }
<?php endif?>

Adding Javascript

Assets::Js ( string $handle, string $src = false, array $deps = array(), int $order, string|bool|null $ver = false )
Parameters Description
$handle (string) (Required) Name of the script. Should be unique. You can also pass $slug as its unqiue for every element
$src URL of the script, eg: QUIX_URL."/assets/css/style.css"
$deps (array) (Optional) An array of registered script handles this script depends on.
$order (int) (Optional) Specifying assets order, if it has one, asset will load on specified order or default order.
$ver (string or bool or null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed Quix version. If set to null, no version is added.

Example

Assets::Js($slug, QUIX_TEMPLATE_URL."/elements/MY_ELEMENT/js/script.js", array('jQuery'), 12);

Replace MY_ELEMENT with your element folder name. By defining 12 you are telling Quix to load this assets to 12 number position. If total assets is less than provided order value, it will load end of the asset.

Adding Inline Javascript

Create another php file inside your element folder and call it line any other javascript file.

Assets::Js( QUIX_TEMPLATE_URL . '/elements/MY_ELEMENT/inline-js.php');

If you add php file using Assets::Js() it will automatically add in your html header. There are several benefits of this approach. You can pass any php value in your js file.

Example

Assets::Js( QUIX_TEMPLATE_URL . '/elements/MY_ELEMENT/inline-js.php', compact(['id']));

inline-js.php file

jQuery(document).ready(function(){
  jQuery("#<?php echo $id?>").css('width', 20);
});

In this example, we passed id from our view file(You can pass any php variable) and used it in your js file

Joomla SEO Service

Grow rapidly with our Joomla SEO service done by the veterans

With over 12 years of business and a vast array of Joomla templates and extensions, we know Joomla SEO better than anyone you could possiblly hire.

Improve my ranking
On This Page