Skip to content

Latest commit

 

History

History
executable file
·
198 lines (153 loc) · 6.19 KB

examples.md

File metadata and controls

executable file
·
198 lines (153 loc) · 6.19 KB
Raw
handle canonical title description
examples
Web Ticker Examples | Using the various webticker options
A guide showing how you update existing ticker data, stopping the animations, using different ease functions or setting up your ticker with images.

##Examples

Below are examples of different methods that can be used with the web ticker.

Example 1: Updating the Ticker Content {#update}

  • WebTicker v3.0.0 has just been released! Read the new documentation.
  • WebTicker v3.0.0 now has commercial licenses available

HTML

The Markup Used for Initializing the Web Ticker

<ul id="webticker-update-example" >
	<li data-update="item1">WebTicker v3.0.0 has just been released! Read the new documentation.</li>	
	<li data-update="item2">WebTicker v3.0.0 now has commercial licenses available. Check which license is applicable for you.</li>
</ul>

Starting the Web Ticker

The first ticker is running the default options with an exception to the height, which is being set to 75px.

$("#webticker-update-example").webTicker({
	height:'75px'
});

Updating the Data

The update method is called using the below trigger.

$("#update-newsticker1").click(function(){
	$("#webticker-update-example").webTicker('update',
		'<li data-update="item1">Web Ticker v3.0.0 has just been released! And the documentation has become even better!</li> 
		 <li data-update="item2">The Web Ticker v3.0.0 commercial license no longer binds you to make your projects open source.</li> 
		 <li data-update="item3">An OEM License is also available if your would like to make the WebTicker part of your website builder</li>
		 <li data-update="item4">Maze Digital will now be commercially supporting the Web Ticker</li>',
		'swap',
		true,
		false
	);
});

Example 2: Stop/Continue Ticker Scrolling {#stop-cont}

  • WebTicker v3.0.0 has just been released!
  • These items will be constantly repeated.

Settings Used

The second ticker is using some of the available options; such as having hover-pause disabled, transition set to 'ease' and 'duplicate' set to true.

$("#webticker-stop-continue-example").webTicker({
	height:'75px', 
	duplicate:true, 
	rssfrequency:0, 
	startEmpty:false, 
	hoverpause:false, 
	transition: "ease"
});

Methods Used

The stop method is called using:

$("#stop-newsticker2").click(function(){
	$("#webticker-stop-continue-example").webTicker('stop');
});

The continue method is called using:

$("#continue-newsticker2").click(function(){
	$("#webticker-stop-continue-example").webTicker('cont');
});

Example 3: Transition Easing {#transitions}

  • Maze Digital - Crafting Digital Experiences
  • Web Ticker v3.0.0 another digital experience crafted by Maze Digital

Methods Used

The ease transition method is called using:

	$("#ease-financeticker").click(function(){
		$("#webticker-transition-ease").webTicker('transition', 'ease');
	});

The linear transition method is called using:

	$("#linear-financeticker").click(function(){
		$("#webticker-transition-ease").webTicker('transition', 'linear');
	});

Example 4: Right-to-left {#right-to-left}

  • وقد تم الافراج عن عادل WebTicker 3.0.0! الرخص التجارية المتاحة.
  • WebTicker 3.0.0 עתה שוחרר! רישיונות מסחריים זמינים.

HTML

<ul id="right-to-left-webticker" dir="ltr">
	<li data-update="item1"> وقد تم الافراج عن عادل WebTicker 3.0.0! الرخص التجارية المتاحة.</li>	
	<li data-update="item2"> WebTicker 3.0.0 עתה שוחרר! רישיונות מסחריים זמינים.</li>
</ul>

Settings Used

The ticker can be set to scroll from left to right using the following initializing settings.

$("#right-to-left-webticker").webTicker({
	height:'75px', 
	direction: 'right'
});

Example 5: Images {#images}

HTML

The fifth ticker includes images instead of plain text.

<div class="ticker-wrapper">
	<ul id="images-webticker">
		<li>
			<img style='width:200px; height: 150px;' src="/workspace/assets/img/webticker/MER_800_600.jpg"/>
		</li>
	</ul>
</div>

Example 6: RSS {#rss}

Rss Feeds are automatically supported by the ticker; note that as per javascript cross-domain restrictions you can only load RSS feeds from your own website.

$("#webticker").webTicker({
	rssurl:'http://maze.digital/rss/', 
	rssfrequency:5
});