Script into <head> area

Template's <head> area

Forum: http://forum.phpwcms.org/viewtopic.php?p=101300#p101300 (OG)

Put Mootools or any other JavaScript that might be called also from inside phpwcms into your template's head area.

Always use a frontend_render script that looks like this - the script filename (here: $block['custom_htmlhead']['…script…']) is always used as array index:

<?php
 
   /* Load my special Mootools script */
   $block['custom_htmlhead']['mootools.js']   = '  <script src="'.TEMPLATE_PATH.'inc_js/mootools/mootools-release-1.11.js" type="text/javascript"></script>';
 
   /* Load Mootools in newer releases < V1.4.3 r380 */
   initMootools();
 
 
   /* Load Mootools in newer releases >= V1.4.4 r381 */
   initJSLib();
 
   /* Load My custom JavaScript */
   $block['custom_htmlhead']['my.js']      = '  <script src="'.TEMPLATE_PATH.'inc_js/my.js" type="text/javascript"></script>';
   /* or alternatively */
   $block['custom_htmlhead']['my.js']      =    getJavaScriptSourceLink('template/inc_js/my.js');
 
   /* Load some other <head> positions */
   $block['custom_htmlhead']['favicon1']      = '  <link rel="icon" href="favicon.ico" type="image/x-icon" />';
   $block['custom_htmlhead']['favicon2']      = '  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />';
 
   /* IE <=6 Style Hack */
   $block['custom_htmlhead']['IEhack']  = '  <!--[if lt IE 7]><style type="text/css"> #inner { height:300px; } </style><![endif]-->';
 
   /* Hm I want to overwrite some default CSS */
   $block['custom_htmlhead']['mycss']  = '  <style type="text/css">' . LF . '  <!--' . LF;
   $block['custom_htmlhead']['mycss'] .= '   #header { ' . LF;
   $block['custom_htmlhead']['mycss'] .= '      background: #F9E931 url(template/img/mozilla.png) no-repeat left top !important;' . LF;
   $block['custom_htmlhead']['mycss'] .= '      background: #F9E931 url(template/img/ie.gif) no-repeat left top;' . LF;
   $block['custom_htmlhead']['mycss'] .= '   }';
   $block['custom_htmlhead']['mycss'] .= LF . '  //-->' . LF . '  </style>';
?>


Special case CSS-file at /template/inc_css/* In this case we can use an own array ['block']['css']. It´s home base is /template/inc_css/* .
E.g.:

$GLOBALS['block']['css']['reg_tabs_accordion01_login'] = 'specific/reg_tabs_accordion01_login.css';


Since phpwcms r411:

Forum: …and some more too

Notation: <!-- [CSS:|JS:] instruction -->

The designated spaces are mandatory!!


CSS:

<!-- CSS: {TEMPLATE}inc_css/my.css -->


- As Inline CSS: Equal CSS used this way is rendered only once and also always put into the <head> section.

<!-- CSS: body {background:yellow;} -->
<!-- CSS:
  body {
    background:yellow;
  }
  a {
    text-decoration: none;
    background: transparent url({TEMPLATE}img/link.png) no-repeat left center;
    padding-left: 25px;
  }
-->


JavaScript:

<!-- JS: {TEMPLATE}inc_js/calendarDateInput/calendarDateInputX.js -->
<!-- JS: {TEMPLATE}inc_js/MyFolder/MyScript.js -->


- Integrate plugins (jQuery) e.g. using the files:

  • template/lib/jquery/plugin/ui-1.8.custom.min.js
  • template/lib/jquery/plugin/jquery.easing.min.js
<!-- JS: ui-1.8.custom.min -->
<!-- JS: easing.min -->


Similarly, for MooTools:

Load Plugin or More as described and based on current JavaScript framework/library. It will also render <srcipt src=”” /> in head.

- Integrate e.g. MooTools 1.2x with the files in:

  • template/lib/mootools/plugin-1.2/mootools.flext.js
  • template/lib/mootools/plugin-1.2/mootools.Quickie-yui.js
<!-- JS: flext -->
<!-- JS: Quickie-yui -->


- Loading More Components:

<!-- JS: myplugin -->
<!-- JS: MORE:Fx/Fx.Elements,Fx/Fx.Accordion -->


- And the best now is multi line JavaScript put as <script /> in head section.

Be aware – every equal JavaScript section like used in looped Content Parts is rendered only once.
To be detected as JavaScript it will need ;, // und/oder /*.
Just end your JavaScript line by ; is the safest way:

<!-- JS:
  // My Custom JS
  alert('hey dude it works as expected');
-->



Module's <head> area

Forum: http://forum.phpwcms.org/viewtopic.php?p=113969#p113969 (breitsch)

To get css or js files included in the frontend output (in the head) of your module add them to your code like:

// load js functions
$block['custom_htmlhead']['javascript.js'] = '  <script src="'.$phpwcms['modules'][$crow['acontent_module']]['dir'].'template/js/javascript.js" type="text/javascript"></script>';
  //load inline css
$block['custom_htmlhead']['inlinecss.css'] ='<style type="text/css">'.LF.'  .classname  {property:value;}'.LF.'</style>';
  //load external style sheet
$GLOBALS['block']['custom_htmlhead']['externalcss.css'] = LF.'  <style type="text/css">'.LF.'@import url("'.$phpwcms['modules'][$crow['acontent_module']]['dir'].'template/css/externalcss.css");'.LF.'</style>';

last key of the $block array must be unique!

english/technics/internal-function-call/script-into-head-area.txt · Last modified: 2011/08/31 00:54 by Knut Heermann (flip-flop)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0