How to use jquery.marquee.js on my website.

[Chaffinch<]

How to use jquery marquee.js on my website.
https://github.com/aamirafridi/jQuery.Marquee

DEMO:
http://jquery.aamirafridi.com/jquerymarquee/

To obtain the effect, similar to the :
http://webdesign-dp.de/pepes-sandbox/pe ... 2010.phtml created by Pepe
Can not see content
<!-- CustomBlock: BREITER_TICKER ========== -->

Thank you in advance for your help and guidance
Bogdan

[Oliver Georgi]

No good start for a topic. You only show samples that work. Send a link to your page. First check that you see your content without the ticker effect. After creating your custom block check it is really available in the template. Then you have to use the {BLOCK} replacer inside your main template…

[Chaffinch<]

Pepe wrote me this:
Einbinden der erforderlichen Formatierungs-Klassen in das verwendete Template
$GLOBALS['block']['custom_htmlhead']['laufschrift.css'] = LF.' <style type="text/css">
.ticker-container { width:100%; height:20px; padding-top:5px; background-color: #eee; }
.ticker p { font-family:"Courier New",Courier,monospace,Arial,Verdana,Helvetica; font-size:14px; font-weight:bold; color:#c00; }
</style>'.LF;
I currently have:
laufschrift.css and laufschrift.tmpl
I'm not a programmer and do not know how to create this "block"
Regards
Bopgdan

[Oliver Georgi]

Put the marquee jQuery script to template/lib/jquery/plugin. Name it something like jquery.marquee.js.

Inside your marquee template you can use this:

Code: Select all

<!-- CSS: 
.ticker-container { width:100%; height:20px; padding-top:5px; background-color: #eee; }
.ticker p { font-family:"Courier New",Courier,monospace,Arial,Verdana,Helvetica; font-size:14px; font-weight:bold; color:#c00; }
-->
<!-- JS: marquee -->
<!-- JS: 
$(function(){
	$('.marquee').marquee({
		speed: 15000,
		gap: 50,
		delayBeforeStart: 0,
		direction: 'left',
		duplicated: true
	});
});

Admin section -> page layout, select the page layout that should get your custom block. Fill in (blocks, custom) the name of the template block you like to use, maybe: MYBLOCK -> save page layout

Switch to the template which should hold the block. Use the replacer {MYBLOCK} for your marquee block inside main section. Then also see the field MYBLOCK {MYBLOCK}. Fill it with the html code you like to wrap around your marquee in addition. Maybe

Code: Select all

<div class="marquee">
{MYBLOCK}
</div>

It is also possible to use the JS/CSS thing there if you like to have a global solution without special content part template.

Check to have selected jQuery as JS Library.

That should be all in theory. You can mix that solution in content part template and/or with the special block for that.

[Chaffinch<]

I used to test the server
http://www.arsvetkrynica.pl/
I put on the server:
1) .../template/lib/jquery/plugin/jquery.marquee.js
2) On the >page layout< I created a block called: MYBLOCK (JS Library: Jquery 2.0.2)
3) I created > marquee template < ?

.../template/inc_cntpart/plaintext/ticker.tmpl

The testing template content:

Code: Select all

[PHP]
/* Einbinden der erforderlichen Formatierungs-Klassen in das verwendete Template */

$GLOBALS['block']['custom_htmlhead']['laufschrift.css'] = LF.'  <style type="text/css">
    .ticker-container { width:100%; height:20px; padding-top:5px; background-color: #eee; }
    .ticker p { font-family:"Courier New",Courier,monospace,Arial,Verdana,Helvetica; font-size:14px; font-weight:bold; color:#c00; }
  </style>'.LF;
[/PHP]
[TITLE]<h4>{TITLE}</h4>[/TITLE]
[SUBTITLE]<h5>{SUBTITLE}</h5>[/SUBTITLE]
 
<div class="ticker-wrap">
[TEXT]<marquee onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);"><div class="ticker">{TEXT}</div></marquee>[/TEXT]
</div>

Effect:
http://www.arsvetkrynica.pl/
Displays the red string.
I also have html errors
line 70 column 21 - Błąd: there is no attribute "onmouseover"
line 70 column 75 - Błąd: there is no attribute "onmouseout"
line 70 column 117 - Błąd: element "marquee" undefined

Something I performed wrong
Regards
Bogdan

[Oliver Georgi]

you mixed up with old code, useless PHP and so on.

Code: Select all

[TITLE]<h4>{TITLE}</h4>[/TITLE]
[SUBTITLE]<h5>{SUBTITLE}</h5>[/SUBTITLE]
 
<div class="ticker-wrap">
[TEXT]
<marquee><div class="ticker">{TEXT}</div></marquee>
<!-- CSS:
.ticker-container { width:100%; height:20px; padding-top:5px; background-color: #eee; }
.ticker p { font-family:"Courier New",Courier,monospace,Arial,Verdana,Helvetica; font-size:14px; font-weight:bold; color:#c00; }
-->
<!-- JS:
$(function(){
  $('marquee').on(
    'mouseover': function(){
      this.setAttribute('scrollamount', 0, 0);
    },
    'mouseout': function(){
     this.setAttribute('scrollamount', 6, 0);
    }
  );
});
-->
[/TEXT]
</div>

But I think, not well done at all. Seems the marquee script does not work. Please rethink based on jQuery Marquee documentation.

[Uwe367]

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.

[Oliver Georgi]

Do not post whole PlugIn JS code here, link is better.

That is enough if jQuery plugin folder and jquery.naming.js used:

Code: Select all

<!-- JS: marquee -->
<!-- JS: pause -->

Use the CSS and JS only when there is ticker text otherwise ignore

ticker.tmpl

Code: Select all

[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]
<!-- JS: marquee -->
<!-- JS: pause -->
<!-- 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}
</div>
[/TEXT]

[Uwe367]

Do not post whole PlugIn JS code here, link is better.

Ok.. i do it next Time.

That is enough if jQuery plugin folder and jquery.naming.js used:

Code: Select all

<!-- JS: marquee -->
<!-- JS: pause -->

Is this new? I only know it as i wrote it

[Oliver Georgi]

not new.

[Chaffinch<]

Welcome you gentlemen
I used your information from posts
http://forum.phpwcms.org/viewtopic.php? ... 33#p140136
and
http://forum.phpwcms.org/viewtopic.php? ... 33#p140137

It seems to me that:
The inscription moves too fast.(I tried to adjust:speed)
The inscription is reproduced
In Firefox 21.0 you can see the effect
In Ie 8 "inscription stands"
I can not cope with the setting
margin-left
That the inscription was inside a template.
Thank you very much for your help Oliver and Uwe

After applying TIPS template content I fell apart That's why I used a mix
http://forum.phpwcms.org/viewtopic.php? ... 33#p140132
Finally installed your last suggestion.

[Uwe367]

The settings you can make in the file ticker.tmpl.

Code: Select all

//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

Set Speed higher and the inscription moves slower.
Set duplicated on false and it will not be reproduced.

Do you have a link to understand the problem with IE8?
On my localhost it moves under IE8 and IE7.

I hope i could help you with tihs informations.

[Chaffinch<]

Hi Uwe!
I test your script on the page:
http://www.arsvetkrynica.pl
I changed the speed of the:
//speed in milliseconds of the marquee speed: 10000 Still no change
question : where and how do I set
margin-left
Regards
Bogdan

[Uwe367]

I browsed the source code from your page and i saw that jquery.marquee.js and jquery.pause.js be loaded twice.

Code: Select all

<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="template/lib/jquery/plugin/jquery.easing.min.js"></script>
  <script type="text/javascript" src="template/lib/jquery/plugin/jquery.ui.totop.js"></script>
  <script type="text/javascript" src="template/lib/jquery/plugin/jquery.ui.totop.head.js"></script>
  <script type="text/javascript" src="template/lib/jquery/plugin/jquery.jquery.marquee.js"></script>
  <script type="text/javascript" src="template/lib/jquery/plugin/jquery.jquery.pause.js"></script>
  <script type="text/javascript" src="template/lib/cookieDirective/1.5.js"></script>
  <script type="text/javascript" src="template/lib/jquery/plugin/jquery.marquee.js"></script>
  <script type="text/javascript" src="template/lib/jquery/plugin/jquery.pause.js"></script]

All what i found for margin left is this in jquery.marquee.js and i think it has to do with the runnig direction of inscription.

Code: Select all

//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 };
				}

[Chaffinch<]

Uwe If you could,send me a "blank" e-mali to me at the address: xxxx
That's I for diagnostic purposes, I sent you a "key" to the site.
You could judge, What did I do wrong )
Because I think that this is
If, of course,you have the time
Regards
Bogdan