Syaratnya adalah menabur informasi secara terus menerus maka pilihlah gaya ticker.

Sekarang saya menggunakan [ticker-style.css] bersama dengan [jquery.ticker.js]

Ini berfungsi dengan baik di Layar Penuh namun saat menjelajah di Seluler/Tabel - teksnya terpotong (lihat tangkapan layar di bawah) - Saya mencoba bermain-main dengan lebar namun renderingnya tidak seperti yang diharapkan.

Bisakah Anda membantu di sini.

Terima kasih sebelumnya.

/*
    jQuery News Ticker 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, version 2 of the License.
 
    jQuery News Ticker 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 jQuery News Ticker.  If not, see <http://www.gnu.org/licenses/>.
*/
(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,
                    titleID: '#ticker-title-' + uniqID,
                    titleElem: '#ticker-title-' + uniqID + ' SPAN',
                    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,
                    playPauseID: '#play-pause-' + uniqID
                }
            };

            // if we are not using a UL, display an error message and stop any further execution
            if (tagType != 'UL' && tagType != 'OL' && opts.htmlFeed === true) {
                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 = 'right' : opts.direction = 'left';
            
            // 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"><div id="' + settings.dom.titleID.replace('#', '') + '" class="ticker-title"><span><!-- --></span></div><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
                    $(settings.dom.controlsID).on('click mouseover mousedown mouseout mouseup', function (e) {
                        var button = e.target.id;
                        if (e.type == 'click') {    
                            switch (button) {
                                case settings.dom.prevID.replace('#', ''):
                                    // show previous item
                                    settings.paused = true;
                                    $(settings.dom.playPauseID).addClass('paused');
                                    manualChangeContent('prev');
                                    break;
                                case settings.dom.nextID.replace('#', ''):
                                    // show next item
                                    settings.paused = true;
                                    $(settings.dom.playPauseID).addClass('paused');
                                    manualChangeContent('next');
                                    break;
                                case settings.dom.playPauseID.replace('#', ''):
                                    // play or pause the ticker
                                    if (settings.play == true) {
                                        settings.paused = true;
                                        $(settings.dom.playPauseID).addClass('paused');
                                        pauseTicker();
                                    }
                                    else {
                                        settings.paused = false;
                                        $(settings.dom.playPauseID).removeClass('paused');
                                        restartTicker();
                                    }
                                    break;
                            }   
                        }
                        else if (e.type == 'mouseover' && $('#' + button).hasClass('controls')) {
                            $('#' + button).addClass('over');
                        }
                        else if (e.type == 'mousedown' && $('#' + button).hasClass('controls')) {
                            $('#' + button).addClass('down');
                        }
                        else if (e.type == 'mouseup' && $('#' + button).hasClass('controls')) {
                            $('#' + button).removeClass('down');
                        }
                        else if (e.type == 'mouseout' && $('#' + button).hasClass('controls')) {
                            $('#' + button).removeClass('over');
                        }
                    });
                    // add controls HTML to DOM
                    $(settings.dom.wrapperID).append('<ul id="' + settings.dom.controlsID.replace('#', '') + '" class="ticker-controls"><li id="' + settings.dom.playPauseID.replace('#', '') + '" class="jnt-play-pause controls"><a href=""><!-- --></a></li><li id="' + settings.dom.prevID.replace('#', '') + '" class="jnt-prev controls"><a href=""><!-- --></a></li><li id="' + settings.dom.nextID.replace('#', '') + '" class="jnt-next controls"><a href=""><!-- --></a></li></ul>');
                }
                if (opts.displayType != 'fade') {
                    // add mouse over on the content
                    $(settings.dom.contentID).mouseover(function () {
                        if (settings.paused == false) {
                            pauseTicker();
                        }
                    }).mouseout(function () {
                        if (settings.paused == false) {
                            restartTicker();
                        }
                    });
                }
                // we may have to wait for the ajax call to finish here
                if (!opts.ajaxFeed) {
                    setupContentAndTriggerDisplay();
                }
            }

            /* Start to process the content for this ticker */
            function processContent() {
                // check to see if we need to load content
                if (settings.contentLoaded == false) {
                    // construct content
                    if (opts.ajaxFeed) {
                        if (opts.feedType == 'xml') {                           
                            $.ajax({
                                url: opts.feedUrl,
                                cache: false,
                                dataType: opts.feedType,
                                async: true,
                                success: function(data){
                                    count = 0;  
                                    // get the 'root' node
                                    for (var a = 0; a < data.childNodes.length; a++) {
                                        if (data.childNodes[a].nodeName == 'rss') {
                                            xmlContent = data.childNodes[a];
                                        }
                                    }
                                    // find the channel node
                                    for (var i = 0; i < xmlContent.childNodes.length; i++) {
                                        if (xmlContent.childNodes[i].nodeName == 'channel') {
                                            xmlChannel = xmlContent.childNodes[i];
                                        }       
                                    }
                                    // for each item create a link and add the article title as the link text
                                    for (var x = 0; x < xmlChannel.childNodes.length; x++) {
                                        if (xmlChannel.childNodes[x].nodeName == 'item') {
                                            xmlItems = xmlChannel.childNodes[x];
                                            var title, link = false;
                                            for (var y = 0; y < xmlItems.childNodes.length; y++) {
                                                if (xmlItems.childNodes[y].nodeName == 'title') {                                                       
                                                    title = xmlItems.childNodes[y].lastChild.nodeValue;
                                                }
                                                else if (xmlItems.childNodes[y].nodeName == 'link') {                                                   
                                                    link = xmlItems.childNodes[y].lastChild.nodeValue; 
                                                }
                                                if ((title !== false && title != '') && link !== false) {
                                                    settings.newsArr['item-' + count] = { type: opts.titleText, content: '<a href="' + link + '">' + title + '</a>' };                                                  count++;                                                    title = false;                                                  link = false;
                                                }
                                            }   
                                        }       
                                    }           
                                    // quick check here to see if we actually have any content - log error if not
                                    if (countSize(settings.newsArr < 1)) {
                                        debugError('Couldn\'t find any content from the XML feed for the ticker to use!');
                                        return false;
                                    }
                                    settings.contentLoaded = true;
                                    setupContentAndTriggerDisplay();
                                }
                            });                         
                        }
                        else {
                            debugError('Code Me!'); 
                        }                       
                    }
                    else if (opts.htmlFeed) { 
                        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] = { type: opts.titleText, content: $(this).html()};
                            });     
                        }   
                        else {
                            debugError('Couldn\'t find HTML any content for the ticker to use!');
                            return false;
                        }
                    }
                    else {
                        debugError('The ticker is set to not use any types of content! Check the settings for the ticker.');
                        return false;
                    }                   
                }           
            }

            function setupContentAndTriggerDisplay() {

                settings.contentLoaded = true;

                // update the ticker content with the correct item
                // insert news content into DOM
                $(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
                $(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) { 
                    // get the width of the title element to offset the content and reveal  
                    var offset = $(settings.dom.titleID).width() + 20;
    
                    $(settings.dom.revealID).css(opts.direction, offset + 'px');
                    // show the reveal element and start the animation
                    if (opts.displayType == 'fade') {
                        // fade in effect ticker
                        $(settings.dom.revealID).hide(0, function () {
                            $(settings.dom.contentID).css(opts.direction, offset + 'px').fadeIn(opts.fadeInSpeed, postReveal);
                        });                     
                    }
                    else if (opts.displayType == 'scroll') {
                        // to code
                    }
                    else {
                        // default bbc scroll effect
                        $(settings.dom.revealElem).show(0, function () {
                            $(settings.dom.contentID).css(opts.direction, offset + 'px').show();
                            // set our animation direction
                            animationAction = opts.direction == 'right' ? { marginRight: distance + 'px'} : { marginLeft: distance + 'px' };
                            $(settings.dom.revealID).css('margin-' + opts.direction, '0px').delay(20).animate(animationAction, time, 'linear', postReveal);
                        });     
                    }
                }
                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) {     
                    // 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);
                    // deal with the rest of the content, prepare the DOM and trigger the next ticker
                    if (opts.displayType == 'fade') {
                        $(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()
                                .end().find(settings.dom.tickerID + ',' + settings.dom.revealID)
                                    .removeAttr('style');                               
                            setupContentAndTriggerDisplay();                        
                        });
                    }
                    else {
                        $(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()
                                    .end().find(settings.dom.tickerID + ',' + settings.dom.revealID)
                                        .removeAttr('style');                               
                                setupContentAndTriggerDisplay();                        
                            });
                        }); 
                    }
                }
                else {
                    $(settings.dom.revealElem).hide();
                }
            }

            // pause ticker
            function pauseTicker() {                
                settings.play = false;
                // 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.titleID + ',' + settings.dom.titleElem + ',' + settings.dom.revealElem + ',' + settings.dom.contentID).stop(true, true);
                $(settings.dom.revealID + ',' + settings.dom.revealElem).hide();
                $(settings.dom.wrapperID)
                    .find(settings.dom.titleID + ',' + settings.dom.titleElem).show()
                        .end().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.titleElem).html(settings.newsArr['item-' + settings.position].type);
                        $(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);                      
                        break;
                    case 'next':
                        $(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
                        $(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++;
                }   
            }
        });  
    };  

    // plugin defaults - added as a property on our plugin function
    $.fn.ticker.defaults = {
        speed: 0.10,            
        ajaxFeed: false,
        feedUrl: '',
        feedType: 'xml',
        displayType: 'reveal',
        htmlFeed: true,
        debugMode: true,
        controls: true,
        titleText: '',  
        direction: 'ltr',   
        pauseOnItems: 3000,
        fadeInSpeed: 600,
        fadeOutSpeed: 300
    };  
})(jQuery);
/* Ticker Styling */
.ticker-wrapper.has-js {
    margin: 0;
    padding: 0;
    width: 780px;
    height: 32px;
    display: block;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color:inherit;
    font-size: inherit;
}
.ticker {
    width: 710px;
    height: 23px;
    display: block;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    @media #{$xs}{
        width: 200px;
    }
}
.ticker-title {
padding-top: 9px;
color: #990000;
font-weight: bold;
background-color: #fff;
text-transform: capitalize;
}
.ticker-content {
    margin: 0px;
    /* padding-top: 9px; */
    position: absolute;
    color: #506172;
    font-weight: normal;
    background-color: #fff;
    overflow: hidden;
    white-space: nowrap;
    font-family: "Roboto",sans-serif;
    font-size: 16px;
}
.ticker-content:focus {
 none;
}
.ticker-content a {
text-decoration: none;
color: #1F527B;
}
.ticker-content a:hover {
text-decoration: underline;
color: #0D3059;
}
.ticker-swipe {
padding-top: 9px;
position: absolute;
top: 0px;
background-color: #fff;
display: block;
width: 800px;
height: 23px;
}
.ticker-swipe span {
margin-left: 1px;
background-color: #fff;
border-bottom: 1px solid #1F527B;
height: 12px;
width: 7px;
display: block;
}
.ticker-controls {
padding: 8px 0px 0px 0px;
list-style-type: none;
float: left;
}
.ticker-controls li {
padding: 0px;
margin-left: 5px;
float: left;
cursor: pointer;
height: 16px;
width: 16px;
display: block;
}

.ticker-controls li.jnt-play-pause {
background-image: url('../images/controls.png');
background-position: 32px 16px;
}
.ticker-controls li.jnt-play-pause.over {
background-position: 32px 32px;
}
.ticker-controls li.jnt-play-pause.down {
background-position: 32px 0px;
}
.ticker-controls li.jnt-play-pause.paused {
background-image: url('../images/controls.png');
background-position: 48px 16px;
}
.ticker-controls li.jnt-play-pause.paused.over {
background-position: 48px 32px;
}
.ticker-controls li.jnt-play-pause.paused.down {
background-position: 48px 0px;
}
.ticker-controls li.jnt-prev {
background-image: url('../images/controls.png');
background-position: 0px 16px;
}
.ticker-controls li.jnt-prev.over {
background-position: 0px 32px;
}
.ticker-controls li.jnt-prev.down {
background-position: 0px 0px;
}
.ticker-controls li.jnt-next {
background-image: url('../images/controls.png');
background-position: 16px 16px;
}
.ticker-controls li.jnt-next.over {
background-position: 16px 32px;
}
.ticker-controls li.jnt-next.down {
background-position: 16px 0px;
}
.js-hidden {
display: none;
}
.no-js-news {
padding: 10px 0px 0px 45px;
color: #fff;
}
.left .ticker-swipe {
/*left: 80px;*/
}
.left .ticker-controls, .left .ticker-content, .left .ticker-title, .left .ticker {
float: left;
}
.left .ticker-controls {
padding-left: 6px;
}
.right .ticker-swipe {
/*right: 80px;*/
}
.right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker {
float: right;
}
.right .ticker-controls {
padding-right: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>Trending now</strong>
                            <!-- <p>Rem ipsum dolor sit amet, consectetur adipisicing elit.</p> -->
                            <div class="trending-animated">
                                <ul id="js-news" class="js-hidden">
                                    <li class="news-item">Dolor sit amet, consectetur adipisicing elit.</li>
                                    <li class="news-item">Spondon IT sit amet, consectetur.......</li>
                                    <li class="news-item">Rem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                                </ul>
                            </div>

enter image description here

0
fmourtaza 3 September 2020, 14:30

1 menjawab

Jawaban Terbaik

Masalahnya adalah Anda menyetel lebar tetap untuk elemen ticker. Wadah ticker memiliki lebar 720px berapa pun ukuran layarnya, dan pada layar < 767px wadah untuk teks bergulir hanya 230px.

Ubah CSS jika itu milik Anda, atau jika tidak, Anda dapat menambahkan aturan ini setelah CSS Ticker yang disertakan:

@media (max-width: 767px){
  .ticker-wrapper.has-js,
  .ticker,
  .trending-tittle .ticker {
        width: 100%!important;
  }
}

Ini mengatur mereka untuk menggunakan lebar penuh layar.

1
FluffyKitten 8 September 2020, 03:37