addHeaderItem

Permalink 2 users found helpful
Hi,

I am trying to use the addheaderitem function, the problem I have is that I am trying to use an external hosted js file. Each time I do it it adds v=xxxxxxxx on to the end and I get an error returned because it's not expected. Am I doing something wrong, my code looks like

$this->addHeaderItem($html->javascript('http://www.google.com/jsapi?key=xxxxxxxxx'));

engagingit
 
Shotster replied on at Permalink Reply
Shotster
What exactly does the output (mark-up) look like?

-Steve
jordanlev replied on at Permalink Reply
jordanlev
Just output the javascript tag yourself instead of using the $html->javascript helper:
$script_tag = '<script type="text/javascript" src="http://www.google.com/jsapi?key=xxxxxxxxx"></script>';
$this->addHeaderItem($script_tag);
engagingit replied on at Permalink Reply
engagingit
Great Cheers I'll give that a shot.
marticps replied on at Permalink Reply
marticps
It works also with css?
I have:
$css_style = '<style type="text/css">body{background-color:red;}</style>';
$this->addHeaderItem($css_style);


in the view.php of a block and it does not work.
Thanks
citytech2 replied on at Permalink Best Answer Reply
citytech2
Hi marticps,
Try this:

public function on_page_view() {
    $this->addHeaderItem($this->special_css());
}
private function special_css (){
  $css = "body{background-color: red}";
  return '<style type="text/css">'.$css.'</style>'; 
}


Citytech
JohntheFish replied on at Permalink Reply
JohntheFish
Now that looks familiar...
citytech2 replied on at Permalink Reply
citytech2
Special thanks to you @John. :)
marticps replied on at Permalink Reply
marticps
Thanks to you both :)
mkly replied on at Permalink Reply
mkly
To build off this you build your css from an array pretty easily
protected static $on_page_view_before_headers_sent = false;
protected $inline_css_output = '';
protected $inline_css = array(
  'body' => array(
    'background' => '#FFF',
    'color' => '#333333'
  ),
  'p' => array(
    'margin-bottom' => '5px',
    'font-size' => '20px'
  ),
  '.some-class' => array(
    'color' => '#DD2244',
  ),
  '#some-id' => array(

Then you can
protected function build_inline_css_output() {
  $this->inline_css_output = "<style>\n";
  foreach($this->inline_css as $selector => $properties) {
    $this->inline_css_output .= "$selector {\n";
    foreach($properties as $property => $value) {
      $this->inline_css_output .= "  $property: $value;\n";
    }
    $this->inline_css_output .= "}\n";
  }
  $this->inline_css_output .= "</style>\n";
}

Then you can throw it in the header with
public function on_page_view() {
  // We don't even bother adding to header
  // if header already sent since they
  // won't get there anyway
  if(headers_sent() === false) {
    $this->on_page_view_before_headers_sent = true;
    $this->build_inline_css_output();
    if($this->inline_css_output) {
      $this->addHeaderItem($this->inline_css_output);
    }
  }
}

And in case it on_page_view didn't run you can still
public function view() {
  // This doesn't matter so much for css
  // if we add it twice as it does for js
  // But it prevents our cool kid friends
  // from making fun of us
  if($this->on_page_view_before_headers_sent === false) {
    $this->build_inline_css_output();
    if($this->inline_css_output) {
      $this->set('inline_css', $this->inline_css_output);
    }
  }
}

then in your view.php
<?php if($inline_css): ?>
  <?php echo $inline_css ?>
<?php endif; ?>

I find this really helpful when you need to throw your css inline because you can't trust addHeaderItem() to get output. Similar pattern can work with javascript as well.

Probably typos in there or whatever.

EDITs: ya lots of typos

EDITss: Also, addHeaderItem with javascript is kind of irelevant at this point. You should probably be adding javascript to the footer like this anyway to avoid the header issue altogether.
public function on_page_view() {
  $html = Loader::helper('html');
  // addFooterItem() works whether headers have been sent or not.
  $this->addFooterItem($html->javascript('something.js'));
}