/*
* JQUERY NEWS TICKER 1.4
* https://www.jquerynewsticker.com/
*
* Customized By TieLabs
* updated: 25/03/2019
*/
(function($){
$.fn.ticker = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.ticker.defaults, options);
// check that the passed element is actually in the DOM
if ($(this).length == 0) {
if (window.console && window.console.log) {
window.console.log('Element does not exist in DOM!');
}
else {
alert('Element does not exist in DOM!');
}
return false;
}
/* Get the id of the UL to get our news content from */
var newsID = '#' + $(this).attr('id');
/* Get the tag type - we will check this later to makde sure it is a UL tag */
var tagType = $(this).get(0).tagName;
return this.each(function() {
// get a unique id for this ticker
var uniqID = getUniqID();
/* Internal vars */
var settings = {
position: 0,
time: 0,
distance: 0,
newsArr: {},
play: true,
paused: false,
contentLoaded: false,
dom: {
contentID : '#ticker-content-' + uniqID,
tickerID : '#ticker-' + uniqID,
wrapperID : '#ticker-wrapper-' + uniqID,
revealID : '#ticker-swipe-' + uniqID,
revealElem: '#ticker-swipe-' + uniqID + ' SPAN',
controlsID: '#ticker-controls-' + uniqID,
prevID : '#prev-' + uniqID,
nextID : '#next-' + uniqID,
}
};
// if we are not using a UL, display an error message and stop any further execution
if (tagType != 'UL' && tagType != 'OL') {
debugError('Cannot use <' + tagType.toLowerCase() + '> type of element for this plugin - must of type <ul> or <ol>');
return false;
}
// set the ticker direction
opts.direction == 'rtl' ? opts.direction = 'ticker-dir-right' : opts.direction = 'ticker-dir-left';
// if transition is empty - set the default transition type
if(opts.displayType == null || opts.displayType == undefined || opts.displayType == '')
opts.displayType = 'flipY';
// lets go...
initialisePage();
/* Function to get the size of an Object*/
function countSize(obj) {
var size = 0, key;
for (key in obj) {
if (obj.hasOwnProperty(key)) size++;
}
return size;
};
function getUniqID() {
var newDate = new Date;
return newDate.getTime();
}
/* Function for handling debug and error messages */
function debugError(obj) {
if (opts.debugMode) {
if (window.console && window.console.log) {
window.console.log(obj);
}
else {
alert(obj);
}
}
}
/* Function to setup the page */
function initialisePage() {
// process the content for this ticker
processContent();
// add our HTML structure for the ticker to the DOM
$(newsID).wrap('<div id="' + settings.dom.wrapperID.replace('#', '') + '"></div>');
// remove any current content inside this ticker
$(settings.dom.wrapperID).children().remove();
$(settings.dom.wrapperID).append('<div id="' + settings.dom.tickerID.replace('#', '') + '" class="ticker"><p id="' + settings.dom.contentID.replace('#', '') + '" class="ticker-content"></p><div id="' + settings.dom.revealID.replace('#', '') + '" class="ticker-swipe"><span><!-- --></span></div></div>');
$(settings.dom.wrapperID).removeClass('no-js').addClass('ticker-wrapper has-js ' + opts.direction);
// hide the ticker
$(settings.dom.tickerElem + ',' + settings.dom.contentID).hide();
// add the controls to the DOM if required
if (opts.controls) {
// add related events - set functions to run on given event
$(document).on('click', $(settings.dom.controlsID) , function (e) {
var button = e.target.id;
switch (button) {
case settings.dom.prevID.replace('#', ''):
manualChangeContent('prev');
break;
case settings.dom.nextID.replace('#', ''):
manualChangeContent('next');
break;
}
});
/* add controls HTML to DOM
* we don't need pause button so we remove it, but we take a backup from the previous snippet that contains a puase button.
*/
$(settings.dom.wrapperID).append('<ul id="' + settings.dom.controlsID.replace('#', '') + '" class="breaking-news-nav slider-arrow-nav "><li id="' + settings.dom.prevID.replace('#', '') + '" class="jnt-prev controls"></li><li id="' + settings.dom.nextID.replace('#', '') + '" class="jnt-next controls"></li></ul>');
}
/* Pause On Hover -------*/
if(opts.displayType == 'reveal'){
$(settings.dom.contentID).mouseenter(function () {
pauseTicker();
}).mouseleave(function () {
restartTicker();
});
}
setupContentAndTriggerDisplay();
}
/* Start to process the content for this ticker */
function processContent() {
// check to see if we need to load content
if (settings.contentLoaded == false) {
if($(newsID + ' LI').length > 0) {
$(newsID + ' LI').each(function (i) {
// maybe this could be one whole object and not an array of objects?
settings.newsArr['item-' + i] = {content: $(this).html()};
});
}
else {
debugError('Couldn\'t find HTML any content for the ticker to use!');
return false;
}
}
}
function setupContentAndTriggerDisplay() {
settings.contentLoaded = true;
// update the ticker content with the correct item
// insert news content into DOM
$(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
// set the next content item to be used - loop round if we are at the end of the content
if (settings.position == (countSize(settings.newsArr) -1)) {
settings.position = 0;
}
else {
settings.position++;
}
// get the values of content and set the time of the reveal (so all reveals have the same speed regardless of content size)
distance = $(settings.dom.contentID).width();
time = distance / opts.speed;
// start the ticker animation
revealContent();
}
// slide back cover or fade in content
function revealContent() {
$(settings.dom.contentID).css('opacity', '1');
if(settings.play) {
if (opts.displayType == 'reveal') {
// show the reveal element and start the animation
$(settings.dom.revealElem).show(0, function () {
$(settings.dom.contentID).show();
// set our animation direction
animationAction = opts.direction == 'ticker-dir-right' ? { marginRight: distance + 'px'} : { marginLeft: distance + 'px' };
$(settings.dom.revealID).css('margin-' + opts.direction, '0px').delay(20).animate(animationAction, time, 'linear', postReveal);
});
}
else{
$(settings.dom.revealID).hide();
// Fade
if( opts.displayType == 'flipY' ){
$(settings.dom.contentID).fadeIn(opts.fadeInSpeed, function () {
setTimeout(function(){
postReveal();
}, 10);
});
}
// Sliding
else{
$(settings.dom.contentID).velocity('stop').velocity( 'transition.' + opts.displayType + 'In' ,{ duration: opts.fadeInSpeed, complete: function () {
setTimeout(function(){
postReveal();
}, 10);
}});
}
}
}
else {
return false;
}
};
// here we hide the current content and reset the ticker elements to a default state ready for the next ticker item
function postReveal() {
if(settings.play) {
if (opts.displayType == 'reveal') {
// we have to separately fade the content out here to get around an IE bug - needs further investigation
$(settings.dom.contentID).delay(opts.pauseOnItems).fadeOut(opts.fadeOutSpeed);
$(settings.dom.revealID).hide(0, function () {
$(settings.dom.contentID).fadeOut(opts.fadeOutSpeed, function () {
$(settings.dom.wrapperID)
.find(settings.dom.revealElem + ',' + settings.dom.contentID).hide().end()
.find(settings.dom.tickerID + ',' + settings.dom.revealID ).show().removeAttr('style');
setupContentAndTriggerDisplay();
});
});
}
// Rest Animations
else {
// Fade
if( opts.displayType == 'flipY' ){
$(settings.dom.contentID).delay(opts.pauseOnItems).fadeOut(opts.fadeOutSpeed, function () {
setupContentAndTriggerDisplay();
});
}
// Sliding
else{
$(settings.dom.contentID).velocity('stop').velocity('transition.' + opts.displayType + 'Out' , {delay: opts.pauseOnItems , duration: opts.fadeOutSpeed, complete: setupContentAndTriggerDisplay });
}
}
}
else {
$(settings.dom.revealElem).hide();
}
}
// pause ticker
function pauseTicker() {
settings.play = false;
settings.pause = true;
if(opts.displayType != 'reveal'){
$content = $(settings.dom.wrapperID).find(settings.dom.contentID);
$content.removeAttr('style').show();
$.Velocity.hook($content, "translateY", "0");
$.Velocity.hook($content, "translateX", "0");
$.Velocity.hook($content, "perspective", "0");
$.Velocity.hook($content, "rotateY", "0");
$.Velocity.hook($content, "rotateX", "0");
}else{
// stop animation and show content - must pass "true, true" to the stop function, or we can get some funky behaviour
$(settings.dom.tickerID + ',' + settings.dom.revealID + ',' + settings.dom.revealElem + ',' + settings.dom.contentID).stop(true,true);
$(settings.dom.revealID + ',' + settings.dom.revealElem).hide();
$(settings.dom.wrapperID).find(settings.dom.contentID).show();
}
}
// play ticker
function restartTicker() {
settings.play = true;
settings.paused = false;
// start the ticker again
postReveal();
}
// change the content on user input
function manualChangeContent(direction) {
pauseTicker();
switch (direction) {
case 'prev':
if (settings.position == 0) {
settings.position = countSize(settings.newsArr) -2;
}
else if (settings.position == 1) {
settings.position = countSize(settings.newsArr) -1;
}
else {
settings.position = settings.position - 2;
}
$(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
break;
case 'next':
$(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
break;
}
// set the next content item to be used - loop round if we are at the end of the content
if (settings.position == (countSize(settings.newsArr) -1)) {
settings.position = 0;
}
else {
settings.position++;
}
restartTicker();
}
});
};
// plugin defaults - added as a property on our plugin function
$.fn.ticker.defaults = {
speed : 0.2,
debugMode : false,
controls : false,
direction : 'ltr',
pauseOnItems : 2000,
fadeInSpeed : 600,
fadeOutSpeed : 300,
displayType : 'reveal',
/** Predefiend displayType:
reveal = typing
flipY = fade - default display type
flipX
slideLeft
slideRight
slideUp
slideDown
perspectiveUp
perspectiveDown
*/
};
})(jQuery);
في ظل التحول الرقمي المتسارع، أصبح التسويق الإلكتروني أحد أهم الأدوات التي تعتمد عليها المؤسسات والشركات لتحقيق الانتشار والوصول إلى جمهور أوسع.
في هذا الحوار التسجيلي، نسلّط الضوء على مفهوم التسويق الإلكتروني، أهميته في العصر الحديث، وكيف غيّر قواعد اللعبة في عالم المال والأعمال.
ال