Developing (v7+)

Adding javascript, how to and best practices?

Permalink 1 user found helpful March 06, 2011 at 4:57 PM

Hi

I spent several hours yesterday trying to power up my c5 theme with javascript and eventually got it working but I know the way I've added my code is bad practice.

I was trying to call jquery.scrollTo.js which I know is in the core c5 installation and I tried following 2 methods (adding a controller.php file and adding my code to header_required.php) without sucess. Eventually I got it working by putting scrollTo in 'mythemeroot'/js/jquery.scrollTo.js and adding this to the header.php

<script type="text/javascript" src="<?php echo $this->getThemePath()?>/js/jquery.scrollTo.js"></script>

I know this is not the correct way to do things so I'm trying to clean up my code. My question is which is the best way to add javascript (controller.php or header_required.php) and why its better to do things that way than simply hard coding a call to the script in my header.php.

It would also be really handy to know how to do this so if you could provide a quick example that would be great. I'm schooled in html/css but am not very up on php so please give full syntax if possible.

Mnkras replied on Mar 6, 2011 at 5:31 pm Permalink Best Answer Reply

$html = Loader::helper('html');
$this->addHeaderItem($html->css('somecss.css'));
$this->addHeaderItem($html->javascript('somejs.js'));

for that code to work, the file has to be in
/css
or
/concrete/css

/js
or
/concrete/js

if you are pulling from a package,
yo do the code like this:

$html = Loader::helper('html');
$this->addHeaderItem($html->css('somecss.css'), 'pkghandle');
$this->addHeaderItem($html->javascript('somejs.js'), 'pkghandle');

and it pulls from /packages/pkghandle/js or /css

for blocks if there is a css or js folder it will be auto included

photoman replied on Mar 7, 2011 at 3:13 pm Permalink Reply

Thanks Mnkras,

I'm having a little trouble getting this to work. Where would I place this code in the header.php file, before or after

<?php
Loader::element('header_required');
?>

Also what is the syntax that wraps either side of your script, just a simple php tag or a <script> tag?

Mnkras replied on Mar 7, 2011 at 3:34 pm Permalink Reply

you would place that code before the header_required, it will wrap css is a link tag and javascript with a script tag

photoman replied on Mar 8, 2011 at 9:59 am Permalink Reply

Thanks Mnkras, I'm afraid its still not working. It seems like the jquery.scrollTo.js file is not getting picked up so I've tried copying it to

c5installdir/js
c5installdir/concrete/js (the file is here by default)
c5installdir/themes/mytheme/js

but no success. Here's my full code, any idea where I've gone wrong?

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<!-- Site Header Content //-->
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style>
<script type="text/javascript">
   $html = Loader::helper('html');
   $this->addHeaderItem($html->javascript('jquery.scrollTo.js'));
</script>
<script type="text/javascript">
$(document).ready(function() {
   $('a.panel').click(function () {

Viewing 15 lines of 49 lines. View entire code block.

 
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
 
<!-- Site Header Content //-->
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style>
 
<script type="text/javascript">
   $html = Loader::helper('html');
   $this->addHeaderItem($html->javascript('jquery.scrollTo.js'));
</script>
 
<script type="text/javascript">
 
$(document).ready(function() {
 
   $('a.panel').click(function () {
 
      $('a.panel').removeClass('selected');
      $(this).addClass('selected');
 
      current = $(this);
 
      $('#wrapper').scrollTo($(this).attr('href'), 800);      
 
      return false;
   });
 
   $(window).resize(function () {
      resizePanel();
   });
 
});
 
function resizePanel() {
 
   width = $(window).width();
   height = $(window).height();
 
   mask_height = height * $('.item').length;
 
   $('#debug').html(width  + ' ' + height + ' ' + mask_height);
 
   $('#wrapper, .item').css({width: width, height: height});
   $('#mask').css({width: width, height: mask_height});
   $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
 
}
 
</script> 
 
<?php
Loader::element('header_required');
?>
 
<!-- CSS to add scroll bar when logged in //-->
<?php global $u; if ($u->isLoggedIn()) {  ?>
<style type="text/css">
<!--
body { overflow:visible; }
#wrapper { overflow:visible; }
-->
</style>
<?php  } ?>
 
</head>
<body>

Mnkras replied on Mar 8, 2011 at 10:08 am Permalink Reply

hmm, are you doing this in a package? if not, try making it into one and in the package controller, stick that code in the on_page_view method

jordanlev replied on Mar 8, 2011 at 6:32 pm Permalink Reply

$this->addHeaderItem will only work from a controller (which is primarily used for blocks, not theme page types).

I think you can just do this, though:

<?php
$html = Loader::helper('html');
echo $html->javascript('jQuery.scrollTo.js');
?>

(make sure that's after Loader::element('header_required') though -- because it relies on jquery already being loaded)

If that doesn't work, just use your original method -- nothing wrong with that (plus, it lets you keep your js file in c5installdir/themes/mytheme/js instead of c5installdir/js, which means all of your theme files are kept in one place).

-Jordan

photoman replied on Mar 8, 2011 at 7:11 pm Permalink Reply

Thanks jordanlev. Your code does make jquery.scrollTo.js appear as if its active in the html but for some reason it doesn't run the remaining scripts in my code. Not sure why.

The reason I'm trying to use c5's scrollTo.js is that its in the core installation so any updates will be installed automatically when I update c5.

I have a small problem with using my original code

<?php echo $this->getThemePath()?>/js/jquery.scrollTo.js">

as it appears to remove the # links on the page (Its a one page website which uses scrollTo for navigating to the relevant areas eg mythemedir/#page1, mythemedir/#page2 etc.

I think this has something to do with the php bringing in the theme path so maybe an alternative would be to pull in scrollTo from an outside url. Any thoughts on this?

jordanlev replied on Mar 8, 2011 at 7:32 pm Permalink Reply

Not sure I understand -- you want to use C5 core jquery file or you want to customize your own? If you want to use C5's, you shouldn't place your own copy in the top-level js directory.

Unfortunately I've never used scrollTo so I'm not sure why it would or wouldn't be working properly.
:(

photoman replied on Mar 8, 2011 at 7:54 pm Permalink Reply

I have managed to get this working using the code as per my last post but referring to my original post I don't think copying the jquery file I need into my theme directory is good practice if the file is available in the core c5 installation. Using the c5 version also has the advantage of updating the file when c5 is updated.

As an alternative to the above it would be also possible to bring the latest version of the plugin in from an external url eghttp://code.google.com. As I'm fairly new to c5 I'm not sure which method is best to use.

jordanlev replied on Mar 8, 2011 at 8:01 pm Permalink Reply

I would lean towards using C5's built-in js file, for the sake of simplicity and to get the updates when the core updates. But really it's not going to make much of a difference either way -- if you have something that works I'd go with it.

Shotster replied on Mar 9, 2011 at 11:45 am Permalink Reply

Two problems I see with the code you've posted...

1) The Loader::helper() and addHeaderItem() PHP code is not wrapped in PHP tags.

2) There is no need to put the addHeaderItem() code inside a <script> tag. The addHeaderItem() method itlself adds to the document head a script tag that references an external JS file.

-Steve

CDMadmin replied on Dec 21, 2013 at 2:22 pm Permalink Reply

I have a similar question - I'd like to implement the javascript in the link below so that my custom drop down menu has better mobile functionality. But I don't know where to put the code and how to call the javascript so that the drop-down menu uses it. I'm not familiar with javascript at all, which is why I'm at a loss.

http://osvaldas.info/drop-down-navigation-responsive-and-touch-frie...

I appreciate any help!

Forums

Developing (v7+)

Adding javascript, how to and best practices?

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?