I created a template for CP
Plain Text and it works on my localhost.
Save this file to the directory
template/lib/jquery/plugin/jquery.marquee.js:
jquery.marquee.js
Code: Select all
/**
* jQuery.marquee - scrolling text horizontally
* Date: 20/02/2013
* @author Aamir Afridi - aamirafridi(at)gmail(dot)com | http://aamirafridi.com/jquery/jquery-marquee-plugin
*/
;(function($) {
$.fn.marquee = function(options) {
return this.each(function() {
// Extend the options if any provided
var o = $.extend({}, $.fn.marquee.defaults, options),
$this = $(this),
$marqueeWrapper,
containerWidth,
animationCss,
elWidth;
//check if element has data attributes. They have top priority
o = $.extend({}, o, $this.data());
//no gap if not duplicated
o.gap = o.duplicated ? o.gap : 0;
//wrap inner content into a div
$this.wrapInner('<div class="js-marquee"></div>');
//Make copy of the element
var $el = $this.find('.js-marquee').css({
'margin-right': o.gap,
'float':'left'
});
if(o.duplicated) {
$el.clone().appendTo($this);
}
//wrap both inner elements into one div
$this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');
//Save the width of the each element so we can use it in animation
elWidth = $this.find('.js-marquee:first').width() + o.gap;
//Save the reference of the wrapper
$marqueeWrapper = $this.find('.js-marquee-wrapper');
//container width
containerWidth = $this.width();
//adjust the animation speed according to the text length
//formula is to: (Width of the text node / Width of the main container) * speed;
o.speed = ((parseInt(elWidth,10) + parseInt(containerWidth,10)) / parseInt(containerWidth,10)) * o.speed;
//if duplicated than reduce the speed
if(o.duplicated) {
o.speed = o.speed / 2;
}
function pause() {
if($.fn.pause) {
$marqueeWrapper.pause();
//fire event
$this.trigger('paused');
}
}
function resume() {
if($.fn.resume) {
$marqueeWrapper.resume();
//fire event
$this.trigger('resumed');
}
}
//Animate recursive method
var animate = function() {
if(!o.duplicated) {
$marqueeWrapper.css('margin-left', o.direction == 'left' ? containerWidth : '-' + elWidth + 'px');
animationCss = { 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : containerWidth };
}
else {
$marqueeWrapper.css('margin-left', o.direction == 'left' ? 0 : '-' + elWidth + 'px');
animationCss = { 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : 0 };
}
//fire event
$this.trigger('beforeStarting');
//Start animating
$marqueeWrapper.animate(animationCss, o.speed , 'linear', function(){
//fire event
$this.trigger('finished');
//animate again
if(o.pauseOnCycle) {
setTimeout(animate, o.delayBeforeStart);
}
else {
animate();
}
});
};
//bind pause and resume events
$this.on('pause', pause);
$this.on('resume', resume);
if(o.pauseOnHover) {
$this.hover(pause, resume);
}
//Starts the recursive method
setTimeout(animate, o.delayBeforeStart);
});
};//End of Plugin
// Public: plugin defaults options
$.fn.marquee.defaults = {
//speed in milliseconds of the marquee
speed: 5000,
//gap in pixels between the tickers
gap: 20,
//pause time before the next animation turn
delayBeforeStart: 0,
//'left' or 'right'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: false,
//on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: false,
//on cycle pause the marquee
pauseOnCycle: false
};
})(jQuery);
Save this file to the directory
template/lib/jquery/plugin/jquery.pause.js
jquery.pause.js
Code: Select all
/*!
* Pause jQuery plugin v0.1
*
* Copyright 2010 by Tobia Conforto <tobia.conforto@gmail.com>
*
* Based on Pause-resume-animation jQuery plugin by Joe Weitzel
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation; either version 2 of the License, or(at your option)
* any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program; if not, write to the Free Software Foundation, Inc., 51
* Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
/* Changelog:
*
* 0.1 2010-06-13 Initial release
*/
(function() {
var $ = jQuery,
pauseId = 'jQuery.pause',
uuid = 1,
oldAnimate = $.fn.animate,
anims = {};
function now() { return new Date().getTime(); }
$.fn.animate = function(prop, speed, easing, callback) {
var optall = $.speed(speed, easing, callback);
optall.complete = optall.old; // unwrap callback
return this.each(function() {
// check pauseId
if (! this[pauseId])
this[pauseId] = uuid++;
// start animation
var opt = $.extend({}, optall);
oldAnimate.apply($(this), [prop, $.extend({}, opt)]);
// store data
anims[this[pauseId]] = {
run: true,
prop: prop,
opt: opt,
start: now(),
done: 0
};
});
};
$.fn.pause = function() {
return this.each(function() {
// check pauseId
if (! this[pauseId])
this[pauseId] = uuid++;
// fetch data
var data = anims[this[pauseId]];
if (data && data.run) {
data.done += now() - data.start;
if (data.done > data.opt.duration) {
// remove stale entry
delete anims[this[pauseId]];
} else {
// pause animation
$(this).stop();
data.run = false;
}
}
});
};
$.fn.resume = function() {
return this.each(function() {
// check pauseId
if (! this[pauseId])
this[pauseId] = uuid++;
// fetch data
var data = anims[this[pauseId]];
if (data && ! data.run) {
// resume animation
data.opt.duration -= data.done;
data.done = 0;
data.run = true;
data.start = now();
oldAnimate.apply($(this), [data.prop, $.extend({}, data.opt)]);
}
});
};
})();
And now the template file for the
CP Plain Text.
This file must be saved to the directory
template/inc_cntpart/plaintext/ticker.tmpl
ticker.tmpl
Code: Select all
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
<!-- JS: {TEMPLATE}lib/jquery/plugin/jquery.marquee.js -->
<!-- JS: {TEMPLATE}lib/jquery/plugin/jquery.pause.js -->
<!-- JS: $(function(){
var $mwo = $('.marquee-with-options');
$('.marquee').marquee();
$('.marquee-with-options').marquee({
//speed in milliseconds of the marquee
speed: 5000,
//gap in pixels between the tickers
gap: 50,
//gap in pixels between the tickers
delayBeforeStart: 0,
//'left' or 'right'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true,
//on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: true
});
//pause and resume links
$('.pause').click(function(e){
e.preventDefault();
$mwo.trigger('pause');
});
$('.resume').click(function(e){
e.preventDefault();
$mwo.trigger('resume');
});
//toggle
$('.toggle').hover(function(e){
$mwo.trigger('pause');
},function(){
$mwo.trigger('resume');
})
.click(function(e){
e.preventDefault();
})
}); -->
<!-- CSS:
small {
font-size: 14px;
}
h1 {
margin-bottom: 20px;
padding-bottom: 10px;
text-align: center;
}
h2 {
border-bottom: 1px dotted #ccc;
padding-bottom: 5px;
margin-bottom: 10px;
}
.marquee, .marquee-with-options {
width: 600px;
overflow: hidden;
border:1px solid #ccc;
} -->
<div class="marquee-with-options">[TEXT]{TEXT}[/TEXT]</div>
Now create a new CP Plain Text and select the ticker.tmpl.
Write a little Text in the Textfield, save it and see what happens in Frontend.
Instructions how to use it in a {CUSTOM_BLOCK} follows in the next days.
That's why I used a mix
)