[suggestion][video] Untranslated content notification bar

Hello Chouby,

Thanks for adding no-translation class to the language switcher. I’m very happy with it.

This is what I’ve done: https://www.youtube.com/watch?v=jXgDzda9nG8

I’d like to hear your though about this ?? Personally, I think it would be good for users to know that their expected content isn’t translate yet. Bring them to the front page is also acceptable, but some users might question “Where is that article in my language? Why am I at the front page again?”

Below are my codes, if it might help you or anyone who would like to apply the notification bar to their website.

JS:

// Untranslated content notification
        var notification_bar = 0;
        var notification_text = '';
        $('.no-translation').click(function (event) {
            event.preventDefault();
            if (notification_bar === 0) {
                var link_lang = $(this).find('a').attr('hreflang');
                var link_url = $(this).find('a').attr('href');
                // Add notification in your language here
				switch(link_lang)
				{
					case 'th':
					  notification_text = '????????????????????????????????????????????? <a href="' + link_url + '">??????????????????????????</a> ???? <a href="#close-notification">?????????????</a>';
					  break;
					case 'en':
					  notification_text = 'There is no english translation for this content. <a href="' + link_url + '">Go to the english homepage</a> or <a href="#close-notification">Close this notification</a>';
					  break;
				}
                // Change '#wrap' to match your container
                $('<div class="no-translation-notification"><span>' + notification_text + '</span></div>').hide().prependTo('#wrap');
                $('.no-translation-notification span').css('opacity', 0);
                notification_bar = 1;
            }
            $('.no-translation-notification').slideDown('fast');
            $('.no-translation-notification span').delay(120).fadeTo('fast', 1);
            $('body').delegate('a[href=#close-notification]', 'click', function (event) {
                event.preventDefault();
                $('.no-translation-notification span').fadeTo('fast', 0);
                $('.no-translation-notification').delay(120).slideUp('fast');
                $('body').undelegate('click');
            });
        });

Note 1: Add your own language to the switch case
Note 2: Don’t forget to change #wrap to a css selector that match your container or any element that you wish (The bar would be displayed right after the open tag of that selected element)

CSS:

.no-translation-notification {
	margin-bottom: 20px;
	padding: 10px;
	background-color: #4789BB;
	color: white;
	font-size: 13px;
	font-weight: bold
}
.no-translation-notification a {
	color: #FFD556
}
.no-translation-notification a:focus, .no-translation-notification a:hover, .no-translation-notification a:active {
	color: #FF8656
}

Regards, Wee.

https://www.ads-software.com/extend/plugins/polylang/