[axelra82Participant]

One thing that hit me lately was User agent detection. I can’t find anything to handle when/if visitors come on old browsers i.e. Internet Explorer 8 etc.

I remember back when using Gantry Framework for Joomla, there was a simple tutorial for setting up browser detection. Allowing me to take visitors with outdated browsers to a landing page, letting them know that that website was optimized for “modern web browsers”.

So my question is. Is there such a function in X? If not, can this be relayed as a feature request to the dev. team? I really feel like we should be able to encourage users to update their browsers, in a non-intrusive way (i.e. still allow them to continue, once having been “informed”).

[John EzraMember]

Hi there,

Thanks for writing in! There isn’t currently anything in X that will do this. We will add it as a feature request. I can’t promise implementation or a timeline at this point, however, we do listen to our users and we’re always trying to improve. When we see something beneficial we do our best to make it happen. We’re actually working on a number of things so if this does get added to the pipeline, we’ll be sure to announce it when it’s ready. Thanks for understanding! Have a great day!

[axelra82Participant]

Yea, I couldn’t find it anywhere, so I assumed this functionality wasn’t there (yet anyway).
Thank for passing it along. Here’s hoping 🙂

PS. Just my 2 cents on how this should work. Best/easiest would be to be able to assign a page (like custom 404) and then have that page act as a “landing page” (preferably with cookie functionality for “Got it, don’t bother me again!” so visitors who already explicitly claimed they understand don’t get bothered again). Of course this page would need to have a “raw” backup if the user is visiting from something REALLY old like IE6, where you could just tell them “it’s 2016 now” 😉

[JoaoModerator]

Hi there,

Thanks for your input.

Joao

[axelra82Participant]

Being impatient I started working on a raw test for this. It’s a very simple execution (i.e. this should not be implemented on any crucial live sites. It’s only for testing and development purposes)

In the .htaccess file I look for user agent MSIE (Microsoft Internet Explorer) and in this case, version 1 thru 9 (although in the final execution this would check for other common user agents like Mozilla a.k.a. firefox, older versions of Chrome and Safari etc).

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^.*(MSIE/[1-9]).*$ [NC]
RewriteCond %{QUERY_STRING} !(^|&)ie=true(&|$) [NC]
RewriteRule ^ %{REQUEST_URI}?ie=true [L,QSA,R]

With the new “?ie=true” string I can now start changing the DOM for my visitor (ua_note.js. Registered and enqueued in functions.php)

$(document).ready(function () {
	// Just some vars
	var windowHeight = $('#top').height();
	var windowWidth = $(window).width();
	var acceptButton = '<button id="acceptButton" type="button">OK! Got it</button>';
	var headingTitle = '';
	var getIcon = '';

	// Check for browser query in URL
	// Firefox
	if(window.location.href.indexOf("ff=true") > -1) {
		headingTitle = 'FireFox';
		getIcon = '<div class="browserGetIcon"><a href="https://mozilla.com/" title="Get FireFox" target="_blank"><img src="/wp-content/themes/x-child/assets/svg/firefox.svg"></a></div>';
	}
	// Safari
	if(window.location.href.indexOf("sa=true") > -1) {
		headingTitle = 'Safari';
		getIcon = '<div class="browserGetIcon"><a sclass="browserGetIcon" href="https://apple.com/se/safari/" title="Get Safari" target="_blank"><img src="/wp-content/themes/x-child/assets/svg/safari.svg"></a></div>';
	}
	// Chrome
	if(window.location.href.indexOf("ch=true") > -1) {
		// Chrome
		headingTitle = 'Chrome!';
		getIcon = '<div class="browserGetIcon"><a class="browserGetIcon" href="https://google.com/chrome" title="Get Google Chrome" target="_blank"><img src="/wp-content/themes/x-child/assets/svg/chrome.svg"></a></div>';
	}
	// Internet Explorer    
	if(window.location.href.indexOf("ie=true") > -1){
		headingTitle += 'Internet Explorer!';
		getIcon += '<div class="browserGetIcon"><a class="browserGetIcon" href="http://windows.microsoft.com/sv-se/internet-explorer/download-ie" title="Get Internet Explorer" target="_blank"><img src="/wp-content/themes/x-child/assets/img/ie.jpg"></a></div>';
	}
	if(window.location.href.indexOf("ff=true") > -1 || window.location.href.indexOf("sa=true") > -1 || window.location.href.indexOf("ch=true") > -1 || window.location.href.indexOf("ie=true") > -1) {
		var uri = window.location.toString();
		if (uri.indexOf("?") > 0) {
		    var clean_uri = uri.substring(0, uri.indexOf("?"));
		    window.history.replaceState({}, document.title, clean_uri);
		}
//		disableScroll();
		var browserMsg = $('<div id="browserNotice"><h1>It looks like you are using an outdated version of ' + headingTitle + '!</h1><h3>This website is developed for modern browsers.<br />Click on the icon bellow to get the latest version of your browser.</h3>' + getIcon + '<p>You are welcome to continue without updating. But keep in mind that the website may not look and work as intended.<br /><strong>This is why you are highly recommended to update to your browsers latest version!</strong></p>' + acceptButton + '</div>').css({'height':windowHeight});
		$('#top').prepend(browserMsg);
	    $('#acceptButton').click(function(){
			$('#browserNotice').fadeOut();
//			enableScroll();
		});
	}

    // left: 37, up: 38, right: 39, down: 40,
	// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
	var keys = {37: 1, 38: 1, 39: 1, 40: 1};
	
	function preventDefault(e) {
		e = e || window.event;
		if (e.preventDefault)
		e.preventDefault();
		e.returnValue = false;  
	}
	
	function preventDefaultForScrollKeys(e) {
	    if (keys[e.keyCode]) {
	        preventDefault(e);
	        return false;
	    }
	}
	
	function disableScroll() {
	  if (window.addEventListener) // older FF
	      window.addEventListener('DOMMouseScroll', preventDefault, false);
	  window.onwheel = preventDefault; // modern standard
	  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
	  window.ontouchmove  = preventDefault; // mobile
	  document.onkeydown  = preventDefaultForScrollKeys;
	}
	
	function enableScroll() {
	    if (window.removeEventListener)
	        window.removeEventListener('DOMMouseScroll', preventDefault, false);
	    window.onmousewheel = document.onmousewheel = null; 
	    window.onwheel = null; 
	    window.ontouchmove = null;  
	    document.onkeydown = null;  
	}
});

Like I said, this is just a start (for example, something needs to handle a non-javascript environment, where the user would be redirected to a completely different URL explaining why Javascript is essential for the website to work). But this way I’m sure the dev. team can see more clearly what I’m trying to accomplish with a plugin for a “User-Agent check/redirect”. I think it would be a nice addition to the already excellent stock in addons for X 🙂

*NOTE! The enable/disabel scrolling is just something I’ve been playing around with. That’s why I commented it out.

PS. For anyone else in the community wanting to take part in this, feel free to jump in 😉

[RupokMember]

Thanks for sharing @axelra82

Have a nice day!

[Author]

Posts