... Elxis version 2009.3 codename Aphrodite is out, download it from Elxis Download Center (EDC) ...

XHTML valid method to load CSS using DOM

From Elxis Official Documentation

Jump to: navigation, search

Some times we create an application for Elxis CMS, such as a module, that uses an external CSS file but we can not append a link to the Elxis head html section as the headers have already sent. In this mini tutorial I will show you an XHTML valid method to load your external CSS file into the Elxis head section using Javascript DOM. I will first remind you which is the proper method to append anything on Elxis head section if headers have not already sent.


Append CSS to Elxis head using addCustomHeadTag

This method is recommended for Elxis components and bots. We will use the addCustomHeadTag method of the mainframe object (globally accessible in Elxis).

//where our css file is located?
$cssurl = 'http://url/to/css/file.css';
//append to elxis head. ATTENTION: Use before echo anything!
$mainframe->addCustomHeadTag('<link href="'.$cssurl.'" rel="stylesheet" type="text/css" media="all" />');

That's all. Elxis will automatically display the link to the CSS file inside the head section of the page HTML.


Append CSS to Elxis head using Javascript DOM

When we work with modules we can not use the addCustomHeadTag method. We will use Javascript DOM to append the link to the CSS to the visitor's browser. 

<script type="text/javascript">
/* <![CDATA[ */
var header = document.getElementsByTagName("head")[0];
var csslink = document.createElement("link");
csslink.setAttribute("rel", "stylesheet");
csslink.setAttribute("type", "text/css");
csslink.setAttribute("href", "http://url/to/css/file.css");
csslink.setAttribute("media", "all");
header.appendChild(csslink);
/* ]]> */
</script>

Our external CSS file is loaded into the head section of the page!


Notes

  • Javascript DOM will not work if javascript is turned off on the visitor's browser.
  • Don't expect to see the link to the CSS file in the page's source code using right click -> view source! DOM appends the link in the HTML rendered by your browser, not on site's HTML!
  • DOM: Document Object Model. For more information visit DOM on W3C.


Author: Ioannis Sannos (datahell) elxis.org
Post your questions on the Elxis forums

Retrieved from "http://wiki.elxis.org/wiki/XHTML_valid_method_to_load_CSS_using_DOM"
Personal tools