Login

02-12-2013, 03:31 PM

[eluser]yumology[/eluser]
I'm struggling terribly with creating a really well designed layout.

All pages in my site have the following common php views loaded:
head.php
navbar.php
footer.php

My problem that I'm stuck on is where do I put the Javascript?
At first I was putting it all in footer.php. But the problem there is that often I need to include javascript for one or more pages pages but rarely do I need to include javascript for all.

For instance my contact us page has a modal that pops up and my index page has a carousel. Both of these require javascript to initialize and control. If I put the javascript in a common footer then it's loading on pages that don't need it. The more pages I'm making the bigger my javascript in footer.php is getting. This is causing cross page issues. I can't move the javascript up into the page body because jquery is included in footer. So I can't have a jquery function calls before jquery is defined.

Should I make a separate javascript file for each page that needs javascript? Is that really the best method? Where would I put the js, in example.com/js or in application/views/js? How would I call it from CI? If I do that then I imagine my common items to be more like this:
head.php
navbar.php
[PAGE BODY]
footer.php (includes jquery file and navbar javascript)
[EXTRA JAVASCRIPT if needed]
htmlClosingTags.php

That just seems to be less elegant. I like elegance and keeping it dry and doing it smart. What's the best way to make this look good?

02-12-2013, 08:02 PM

[eluser]Aken[/eluser]
You should have one external javascript file with all of your JS code. Even if you don't need all of it on every page, it will be loaded once by the client (a viewer's browser, typically) and cached for each subsequent use. This file would then be added to just before the closing </body> tag (or sometimes in the header, depending on the JS used).

02-12-2013, 08:38 PM

[eluser]yumology[/eluser]
[quote author="Aken" date="1360724555"]You should have one external javascript file with all of your JS code. [/quote]
Aken I must be doing something majorly wrong then because this is more like what I'm dealing with:

script src="/js/jquery-1.9.1.min.js"
script src="/js/wysihtml5-0.3.0.js"
script src="/js/bootstrap-wysihtml5.js"
script src="/js/jquery.browser.js"
script src="/js/jquery.iframe-auto-height.plugin.1.9.1.min.js"
script src="/js/jquery.contactable.min.js"
script src="/js/bootstrap.min.js"
script src="/js/mysite-common.js"
script src="/js/mysite-thispage.js"

I can't even conceive of having one javascript file for my whole site...

02-13-2013, 04:57 PM

[eluser]yumology[/eluser]
[quote author="Gonzalez Rivera" date="1360738742"]You should confirm to JS Code with one External JawaScript file. It will work and its 100% confirmed. [/quote]

I don't now what this means. Can you elaborate in any way?

02-14-2013, 03:30 AM

[eluser]Otemu[/eluser]
Hi,

If you do take Aken method there is a number of ways to achieve this, one method can be found here http://www.monkeyphysics.com/articles/re...cript.html if you google am sure your find more.

Another way is to just pass the JavaScript files you want in your controller as an array, something like:

$data['myscripts'] = array('myscripts1.js','myscripts2.js', 'myscripts3.js');
and then in your footer just loop through these scripts

foreach($myscripts as $scripts){
echo $scripts;
}

And a very simple method is to have a switch statement, depending on url or controller being used just load the files that way

switch ($this->uri->segment(0)) {
case 'news':
echo "load news js";
break;
case 'aboutus':
echo "load company js";
break;
case 'gallery':
echo 'load my gallery js';
break;

}

02-14-2013, 04:04 AM

[eluser]edjon2000[/eluser]
Hi, I took a slightly different approach,

I tend to use a template style layout for my views and add the javascript calls as required in my controllers.

To explain this I have added an /includes folder to my views folder which contain a header.php(header) a template.php(main body) and a footer.php file which are constructed as follows.

(header.php)

Code:
<!DOCTYPE html>

&lt;html lang="en"&gt;

&lt;head&gt;

&lt;meta charset="utf-8"&gt;

&lt;title&gt;&lt;?php echo $page_title; ?&gt;&lt;/title&gt;

[removed]

//&lt;![CDATA[

base_url = '&lt;?php echo base_url(); ?&gt;';

//]]>

[removed]

&lt;link rel="shortcut icon" href="&lt;?php echo base_url(); ?&gt;favicon.ico" /&gt;

&lt;link href="&lt;?php echo base_url(); ?&gt;_assets/css/reset.css" rel="stylesheet" type="text/css" media="all"&gt;

&lt;link href="&lt;?php echo base_url(); ?&gt;_assets/css/layout.css" rel="stylesheet" type="text/css" media="all"&gt;

&lt;link href="&lt;?php echo base_url(); ?&gt;_assets/css/style.css" rel="stylesheet" type="text/css" media="all"&gt;

&lt;!--[if lt IE 7]>

   &lt;link href="&lt;?php echo base_url(); ?&gt;_assets/css/ie/ie6.css" rel="stylesheet" type="text/css" media="screen"&gt;

  <![endif]--&gt;

  &lt;!--[if lt IE 9]>

   [removed][removed]

  <![endif]--&gt;

&lt;?php if (isset($extra_head_content))

   echo $extra_head_content; ?&gt;

&lt;?php if (isset($extra_head_content_2))

   echo $extra_head_content_2; ?&gt;

&lt;?php if (isset($extra_head_content_3))

   echo $extra_head_content_3; ?&gt;

&lt;?php if (isset($extra_head_content_4))

   echo $extra_head_content_4; ?&gt;

&lt;?php if (isset($extra_head_content_5))

   echo $extra_head_content_5; ?&gt;

&lt;?php if (isset($extra_head_content_6))

   echo $extra_head_content_6; ?&gt;

&lt;/head&gt;

&lt;body id="page1"&gt;

<div id="main">

...........................................

..............................................

................................................

(template.php)

Code:
&lt;?php $this->load->view('includes/header'); ?&gt;

<div id="content">

  <div class="wrapper">

    &lt;?php if (isset($featured)) $this->load->view($featured); ?&gt;

    &lt;?php if (isset($main_content_1)) $this->load->view($main_content_1); ?&gt;

    &lt;?php if (isset($main_content_2)) $this->load->view($main_content_2); ?&gt;

  </div>&lt;!-- End of div wrapper --&gt;

</div>&lt;!--end of div content--&gt;

  &lt;?php $this->load->view('includes/footer'); ?&gt;

02-14-2013, 04:14 AM

[eluser]edjon2000[/eluser]
and (footer.php)

Code:
........

........

........

</footer>&lt;!-- end of div #footer --&gt;

  <div class="benchmark">

    &lt;?php echo 'Page loaded in ' . $this->benchmark->elapsed_time() . ' seconds'; ?&gt;

  </div>

</div>

&lt;/body&gt;

&lt;/html&gt;

So to call a simple page, I would have this in my controller/method

Code:
&lt;?php

/**

 * Description of home

 *

 * @author Jon

 */

class Home extends CI_Controller {

 function __construct()

 {

  parent::__construct();

 }

 function index()

 {

  $data = array();

  $data['page_title'] = 'Home';

  #$data['extra_head_content'] = '[removed][removed]';

  #$data['featured'] = 'site/featured_area_view';

  $data['main_content_1'] = 'site/home_view';

  $data['main_content_2'] = 'site/forms_view';

  $data['vac_name'] = $this->list_model->generate_vacancy_list();

  $data['sec_name'] = $this->list_model->generate_sector_list();

  #$data['loc_name'] = $this->list_model->generate_location_list();

  $data['vacancies'] = $this->vacancy_model->get_vacancies(array('vacancy_featured' => 'Yes', 'vacancy_active' => 'Yes'));

  $this->load->view('includes/template', $data);

 }

}

/* End of file home.php */

/* Location: ./application/controllers/site/home.php */

from this point on I can add javascript paths/calls using

Code:
$data['extra_head_content_n'] = 'path to my javascript files or javascript calls';

where n is a number from 1 to whatever is in my header.php file.

This approach came in handy when a client of mine wanted to be able to edit certain pages themselves
so on those particular page controllers/methods I added js paths and calls to enable the tinymce editor.

This may not be the best approach but it worked for me

Jon

02-14-2013, 10:44 AM

[eluser]yumology[/eluser]
edjon2000, that's great. I have adapted my code to be something very similar to yours. I am happy with this for now. Here is what it looks like:

Code:
<!DOCTYPE html>

&lt;html lang="en"&gt;

&lt;head&gt;

 &lt;meta http-equiv="refresh"/&gt;

 &lt;meta charset="utf-8"&gt;

 &lt;title&gt;&lt;?php echo isset($pageTitle) ? "Mysite- $pageTitle" : "mysite"; ?&gt;&lt;/title&gt;

 &lt;!-- CSS --&gt;

 &lt;link rel="stylesheet" href="/css/bootstrap.min.css"&gt;

 &lt;link rel="stylesheet" href="/css/font-awesome.min.css"&gt;

 &lt;link rel="stylesheet" href="/css/site.css"&gt;

 &lt;link rel="stylesheet" href="/css/bootstrap-wysihtml5.css"&gt;

 &lt;link rel="stylesheet" href="/css/contactable.css"&gt;

 &lt;!-- Javascript Preload Required for some scripts --&gt;

 <scrip.t src="/js/jquery-1.9.1.min.js"></scrip.t>

 <scrip.t src="/js/wysihtml5-0.3.0.js"></scrip.t>

 <scrip.t src="/js/bootstrap-wysihtml5.js"></scrip.t>

 <scrip.t src="/js/jquery.browser.js"></scrip.t>

 <scrip.t src="/js/jquery.iframe-auto-height.plugin.1.9.1.min.js"></scrip.t>

        <scrip.t src="/js/bootstrap.min.js"></scrip.t>

&lt;/head&gt;

&lt;?php

 // Load navbar, sidebar, and main body

 $this->load->view('common/navbar');

 if (isset($pageClientSidebar)) {

  $this->load->view('common/sidebar');

 }

 $this->load->view($pageName); 

?&gt;

 <footer>

  <div class="row-fluid">&lt;!-- Row --&gt;

   &lt;?php echo 'Page loaded in ' . $this->benchmark->elapsed_time() . ' seconds'; ?&gt;

  </div>&lt;!-- End of Row --&gt;

  <div id="contactable"></div>

 </footer>

<scrip.t type="text/javascript">

&lt;?php 

 // Use include here instead of script tags so that we can use php in our js

 include '/js/ims-common.js';

 if (isset($pageJS)) {

  include '/js/' . $pageJS;

 } 

?&gt;

</scrip.t>

&lt;/body&gt;

&lt;/html&gt;

02-14-2013, 10:55 AM

[eluser]edjon2000[/eluser]
Glad it helped you out Smile

, as I said it is not necessarily the best way but for that particular site it worked fine, I also use a similar approach on some of the other sites I have constructed where loading speed is a consideration.

Jon