Support » Plugin: PJ News Ticker » Issue when hiding ticker on mobile

  • Resolved kimberleythompson

    (@kimberleythompson)


    Hi there, thanks for a great plugin! 🙂

    I just wanted to let you know of a small issue that we have found recently on one of our client’s websites. We have a scenario where we need to hide the PJ Ticker on mobile, but when we do this the container width becomes a minus value and breaks part of the animation loop, resulting in breaking the website. We applied a temporary fix (see below), but realise that if the plugin gets updated in the future then we will lose this. It would be amazing if a fix could be applied in a future update please.

    /**
     * PJ News Ticker - starts the marquee animation on all elements of class="pjnt-content"
     */
    
    (function($) {
    	$.fn.pjntinit = function() {
    		return this.each(function() {
    			var originalHtml = $(this).html();
    			var originalWidth = parseInt($(this).width());
    			var containerWidth = parseInt($(this).parent().width());
    			if(containerWidth < 0){
    				containerWidth = 0;
    				originalWidth = 1;				
    			}
    			var hasGap = $(this).data('gap');
    			if (hasGap === false && containerWidth > 0) {
    				// we need to repeat at least once..
    				$(this).append(originalHtml);
    				// then repeat again until the total content is wide enough
    				while (parseInt($(this).width()) < (containerWidth + originalWidth)) {
    					$(this).append(originalHtml);
    				}
    			}
    			$(this).bind('pjnt-start', function(event, c) {
    				var contentLeft = parseInt($(this).css('left'));
    				if (contentLeft <= -originalWidth)
    				{
    					// wrapped around, restart
    					var newLeft = containerWidth;
    					if (hasGap === false) {
    						newLeft = contentLeft + originalWidth;
    					}
    					$(this).css({left: newLeft +'px'});
    					contentLeft = newLeft;
    				}
    				else
    				{
    					// resume
    				}
    				var speed = $(this).data('speed'); // pixels per second
    				var toGo = Math.ceil(originalWidth + contentLeft); // how many pixels we will be moving
    				var duration = (toGo / speed) * 1000; // duration in milliseconds
    				// do the animation, and start another one when finished
    				$(this).animate({left: '-' + originalWidth + 'px'}, duration, 'linear', function() { $(this).trigger('pjnt-start'); } );
    			});
    
    			// start the animation now
    			$(this).trigger('pjnt-start');
    
    			// stop on mouse over
    			$(this).mouseover( function() {
    				$(this).stop();
    			});
    			// start again on mouse out
    			$(this).mouseout( function() {
    				$(this).trigger('pjnt-start');
    			});
    
    		});
    	};
    }(jQuery));
    
    jQuery(document).ready(function($) {
    	// wait for fonts to load, to ensure correct width() calc
    	$(window).bind("load", function() {
    		$('.pjnt-content').pjntinit();
    	});
    });
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Primitiv Media

    (@nicolasmontigny)

    Hi Kimberley,

    Would you be able to replicate this issue and send me a link where I can see this in action? If you are trying to hide the ticker on mobile or at any time you simply need to use some simple CSS such as:

    .pjnt-border {
        display: none;
    }

    Kindest Regards,

    Primitiv Media

    Thread Starter kimberleythompson

    (@kimberleythompson)

    Hi there,

    Thanks for getting back to me so quickly!

    I realise it’s inconvenient and a little unhelpful, but I’m unable give you a direct link to the example. The code attached to the ticket yesterday was the code that we changed within the javascript file.

    When we created the website a couple of years ago it was working fine with just setting the parent to display: none.

      .breaking-news-widget {
        display: none;
      }

    In the time since making it, we have made very little changes to the code but have tried to keep the plugin and WordPress up to date throughout.

    To replicate the issue, the originalWidth would need to be set to 0 and the containerWidth set to -22 in the JS code as those were the values it was pulling through for us when it broke the site.

    Thanks again,
    Kim

    Plugin Author Primitiv Media

    (@nicolasmontigny)

    Hi Kimberley,

    I am currently looking into this issue, I have identified the culprit…it took a bit of digging my apologies.

    Best of luck,
    Primitiv Media

    Plugin Author Primitiv Media

    (@nicolasmontigny)

    Hi Kim,

    Great news, we have identified the cause of the issue and is now resolved. It will be released in our next update on March 9th.

    Thanks again for bringing this to our attention!

    Best Regards,
    Primitiv Media

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Issue when hiding ticker on mobile’ is closed to new replies.