Templates using jQuery

cmb · Post by **cmb** » Tue Jan 31, 2012 3:23 pm

Hi Template-Designers,

this thread should actually go to "Open Development", but I'm not sure, if all of you have an eye on that forum. So I post it here.

This is about problems caused by templates that use their own version of jQuery in the template the following way:

Code: Select all

<head>
<?php echo head() ?>
<script type="text/javascript" src=".../jquery.js"></script>
</head>

If head() is emitted before the inclusion of the "own" jQuery library (no matter wether it's shipped with the template or downloaded by CDN), that will cause all installed CMSimple plugins to fail, that use jQuery in combination with any jQuery plugin. E.g. it's not possible to use Pagemanager_XH anymore, but if the user saves nonetheless, the complete content.htm is purged!

That is because jQuery plugins hook directly to the jQuery "namespace". If another jQuery library is included later, all those definitions will be lost. So what to do? The most simple solution might be to change the order: include the own jQuery first, and then echo head(). But this won't work, if the template uses a jQuery plugin (e.g. suckerfish), and the <meta http-equiv="content-type" content="text/html;charset=utf-8"> might be written to the output too late (IIRC there's even a limit, that it should be sent in the first X bytes).

So you should consider to change those templates to use jQuery4CMSimple instead of using your "own" version. jQuery4CMSimple is bundled with CMSimple_XH since 1.4.1 and can be downloaded separately and installed for other versions (should work fine with CMSimple 3.x and CMSimple LE 3.4.x). The following code skeleton shows how to use it:

Code: Select all

<?php
// if jQuery4CMSimple is installed, include its jQuery library
if (is_readable($pth['folder']['plugins'].'jquery/jquery.inc.php')) {
    include_once $pth['folder']['plugins'].'jquery/jquery.inc.php';
    include_jQuery();
}
?>
<head>
<?php echo head();?>
<!-- additional template specific stuff, e.g. further stylesheets, JS etc. -->
<!-- to include jQuery plugins (e.g. superfish), you can use the following (note that you have to deliver superfish.js with your template: -->
<?php include_jQueryPlugin('superfish', $pth['folder']['template'].'superfish.js') ?>
</head>

<body id="body" <?php echo onload();?>>
<?php if (!is_readable($pth['folder']['plugins'].'jquery/jquery.inc.php')) { // jQuery4CMSimple is not installed! Emit a warning ?>
<div class="cmsimplecore_warning">This template requires <a href="http://cmsimple.holgerirmler.de/en/?Plugins:jQuery">jQuery4CMSimple</a>. Please <a href="http://cmsimple.holgerirmler.de/ccount/click.php?id=10">download</a> and install it first.</div>
<?php } ?>

Any comments appreciated.

Christoph

PS: The code posted above was buggy (I forgot a pair of quotes)! I've corrected it now.

PPS: I've changed the link to jQuery4CMSimple to point to the website (might be better, if the direct download link might change in the future). And consider changing the class of the surrounding <div>. I've set it to .cmsimplecore_warning as this will give an emphasized message, but it's only defined in CMSimple_XH.

bastingse · Post by **bastingse** » Sun Feb 28, 2016 9:05 am

Thanks Christoph for explanation regarding this problem.

Can you advice me (us) how to handle with the following issue?
I'm using a small script in the template that is showing a button on the bottom of the page to scroll up automatically slowly to the top. It works perfect but indeed.... pagemanager isn't working anymore.

here is a piece of) my template:

Code: Select all


<?php
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<?php echo head();?>
		<script type="text/javascript" src="<?php echo $pth['folder']['templateimages']?>jquery-1.4.min.js"></script>
		<script type="text/javascript" src="<?php echo $pth['folder']['templateimages']?>jquery.pjScrollUp.min.js"></script>
<script>
$(function() {
    $(document).pjScrollUp({
        offset: 210,
        duration: 850,
        aTitle: "Scroll Up",
        imgAlt: "Back to top",
        imgSrc: "image/up.png",
        selector: "my-id",
        easing: "linear",
        complete: function () {
            if (window.console && window.console.log) {
                console.log("complete!");
            }
        }
    });
});
</script>
		
</head>

<body bgcolor="#ffffff" topmargin="0" <?php echo onload();?>><a name="top"></a>

Thanks already!!

cmb · Post by **cmb** » Sun Feb 28, 2016 9:59 am

bastingse wrote:I'm using a small script in the template that is showing a button on the bottom of the page to scroll up automatically slowly to the top. It works perfect but indeed.... pagemanager isn't working anymore.

Simply replace the following lines

Code: Select all

      <script type="text/javascript" src="<?php echo $pth['folder']['templateimages']?>jquery-1.4.min.js"></script>
      <script type="text/javascript" src="<?php echo $pth['folder']['templateimages']?>jquery.pjScrollUp.min.js"></script>

with

Code: Select all

<?php
    require_once $pth['folder']['plugins'].'jquery/jquery.inc.php';
    include_jQuery();
    include_jQueryPlugin('pjScrollUp', $pth['folder']['templateimages'].'jquery.pjScrollUp.min.js');
?>

As jquery-1.4.min.js in your template folder is not needed anymore after that change, you can delete the file.

bastingse · Post by **bastingse** » Sun Feb 28, 2016 10:10 am

Replace those 2 lines returns in a white page now

cmb · Post by **cmb** » Sun Feb 28, 2016 10:30 am

bastingse wrote:Replace those 2 lines returns in a white page now

Ouch! I had a typo in the code, which I've just fixed. Please try again.

bastingse · Post by **bastingse** » Sun Feb 28, 2016 11:17 am

After Christoph and i had a pm session he fixed it!!
Thanks Christoph!!!

lck · Post by **lck** » Sun Feb 28, 2016 11:30 am

Can we hear the result, may be interesting.

bastingse · Post by **bastingse** » Sun Feb 28, 2016 11:52 am

For me this did the trick:

Code: Select all

		        
<?php
require_once $pth['folder']['plugins'].'jquery/jquery.inc.php';
include_jQuery();
?>

<script type="text/javascript" src="<?php echo $pth['folder']['templateimages']?>jquery.pjScrollUp.min.js"></script>

cmb · Post by **cmb** » Sun Feb 28, 2016 12:33 pm

bastingse wrote:For me this did the trick:
[…]

Not sure why this workaround was necessary; somehow include_jQueryPlugin() didn't work as expected.

CMSimple_XH–Forum

Templates using jQuery

Templates using jQuery

Re: Templates using jQuery

Re: Templates using jQuery

Re: Templates using jQuery

Re: Templates using jQuery

Re: Templates using jQuery

Re: Templates using jQuery

Re: Templates using jQuery

Re: Templates using jQuery