Topic Closed

I have found a problem with Colorbox after updating from TS 4.x to TS 5.x

In my theme template I have lines

   <?php  common::AddColorBox(); ?>
   <script>$(document).ready(function(){$(".fotobox").colorbox();});</script>

And I have successfully use link with class="fotobox" to open images in colorbox style on TS 4.x.

But on TS 5.x this  no longer work.

May be I need to make some changes in template?

5 years ago#9435

juergen
1.5K Posts
57.8K Downloads
16 Plugins
design, web development & visual effects

Change the line

<script>$(document).ready(function(){$(".fotobox").colorbox();});</script>

to

<?php $page->jQueryCode .= '$(".fotobox").colorbox();'; ?>

 

Since Typesettter 5 all JavaScript libraries including jQuery will be loaded at the very end of the <body> element. Therefore, using JavaScript in the <head> that requires jQuery will cause errors.

5 years ago#9439

Thank You!

I have read in posts something about this new feature of TS  but didn't associate it to my problem. May be this solution should be in FAQ? 

In http://www.typesettercms.com/Docs/Javascript

5 years ago#9440

juergen
1.5K Posts
57.8K Downloads
16 Plugins
design, web development & visual effects

I have read in posts something about this new feature of TS  but didn't associate it to my problem.

It has turned out that putting the scripts at the very end of the markup improves page loading performance (enabling "progressive rendering"), especially on mobile devices.
So it's sort of "Best Practice" nowadays. With Typesetter 5 we have yet to get used to it.

BTW: using …

<?php
$page->head_js[] = "/path/to/some/script.js";      // LOAD A JS FILE
$page->head_script .= "\n var welcome = 'Helllo World!'; \n";     // WRITE JS CODE TO THE PAGE
$page->jQueryCode .= "$(document).ready( function(){ alert(welcome); });";     // EXECUTE JS CODE WHEN THE DOM IS LOADED
?>

…is always better than adding separate <script> tags to the template. This way Typesetter will be able to combine/concatenate the script code and load things in proper order.

You can still have vanilla Javascript in the <head> section of the page by adding a <script> tag to the template. But there are only rare cases where we actually need this.
With TS 5 we just do not have jQuery at this point.

Another tip: When things like tihs occur, check your browsers console for errors.
In our case it would have shown an error message like "$ is undefined", which is always a sign that for some reason jQuery is not/not yet loaded ($ = jQuery).

If more tricky Javacript errors occur, posting such a message to the forum can help a lot to find the cause and speed things up.

 

May be this solution should be in FAQ? 

Yes there are quite some docs to be updated.
BTW: You can do this yourself. As a logged-in forum member you can edit the docs pages. Find the "Edit" link at the bottom..

 

Edited: 5 years ago#9441

juergen
1.5K Posts
57.8K Downloads
16 Plugins
design, web development & visual effects

May be this solution should be in FAQ? 

Added

5 years ago#9442

daisychain
9 Posts

How do I add CDN scripts with this method? If I try e.g.

$page->head_js[] = "https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.1/isotope.pkgd.js";

the prefix for my site is to the url and I get 'file not found'.

Also, to add multiple scripts, do I just repeat that line each time, or is there a shorter way?

5 years ago#9493

juergen
1.5K Posts
57.8K Downloads
16 Plugins
design, web development & visual effects

...the prefix for my site is to the url and I get 'file not found'.

The function which deals with the script calls/inclusions is here. Maybe we need sth. like a $page->head_js_cdn array for that purpose.

Sorry, I don't have an answer for this one. A good question though.

Maybe Josh can enlighten us?

 

Also, to add multiple scripts, do I just repeat that line each time, or is there a shorter way?

You could pre-build an array with multiple script paths to be added and merge it with the head_js array afterwards but it wouldn't be much shorter, so I'd recommend to repeat the line - it's also easier to read IMO.

 

 

Edited: 5 years ago#9494

juergen
1.5K Posts
57.8K Downloads
16 Plugins
design, web development & visual effects

How do I add CDN scripts with this method?

For now the only way I can find is to load external scripts dynamically, e.g. as seen below

<?php
  //[...]
  gpOutput::GetHead();

  $external_js[] = "https://somecdn.com/some-jquery-plugin.js";
  $external_js[] = "https://somecdn.com/another-jquery-plugin.js";
 
  $page->head_script .= "\nvar external_js = " . json_encode($external_js) . "; \n";
  $page->head_script .= "\nfor (var i=0; i<external_js.length; i++){
    var script = document.createElement('script');
    script.type = 'application/javascript';
    script.src = external_js[i];
    // script.onload = function(){ /* do sth. if needed */ };
    document.body.appendChild(script);
  } \n";

  // INIT the plugins using $page->jQueryCode
  $page->jQueryCode .= "\n$('#myElement').some_jquery_plugin({ 
    option1 : 'value1', 
    option2 : 'value2' 
  });\n";

  //[...]
?>

Maybe there is already a better way I have overseen.
If not, it should be implemented into the CMS, e.g. like
$page->head_external_js[] = 'https://somecdn.com/some-jquery-plugin.js';

 

Edited: 5 years ago#9495

juergen
1.5K Posts
57.8K Downloads
16 Plugins
design, web development & visual effects

Maybe there is already a better way I have overseen.

;-) There is one.

After looking again into the MoveScript function I just realized, we can actually use …

$page->head .= '<script src="https://somecdn.com/some-jquery-plugin.js"></script>';

… because it will be moved to the scripts block at the end of the body element.

/edit: I added this to the Documentation

 

Edited: 5 years ago#9496

daisychain
9 Posts

Thank you, this worked for me. Still a few kinks but I have to work out if it's in the scripts/code or an upgrade issue.

5 years ago#9497

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register