jQuery Archives | The Karate Coder

Have you needed to apply specific CSS styles to a particular web browser (Internet Explorer, FireFox, Chrome, Opera...)? I have a Javascript function that I use in all my site to accomplish this.

I use this function to identify the browser that is viewing a site and using its name as class that I assign the the <body> tag. I find this to beneficial when there are custom styles needed for specific browsers. For those who have had to make sites work for Internet Explorer 11 and lower know what I mean.

getBrowserName() {
		var name = "unknown-browser";
	    if(navigator.userAgent.indexOf("MSIE")!=-1 || navigator.userAgent.indexOf("rv:11.0")!=-1) name = "msie";
	    else if(navigator.userAgent.indexOf("Edge")!=-1) name = "microsoft-edge";
	    else if(navigator.userAgent.indexOf("Firefox")!=-1) name = "firefox";
	    else if(navigator.userAgent.indexOf("Opera")!=-1) name = "opera";
	    else if(navigator.userAgent.indexOf("Chrome") != -1) name = "chrome";
	    else if(navigator.userAgent.indexOf("Safari")!=-1) name = "safari";

		var OSName="unknown-os";
		if (navigator.appVersion.indexOf("Win")!=-1) OSName="windows";
		if (navigator.appVersion.indexOf("Mac")!=-1) OSName="mac-os";
		if (navigator.appVersion.indexOf("X11")!=-1) OSName="unix";
		if (navigator.appVersion.indexOf("Linux")!=-1) OSName="linux";

		var IEVersion="not-ie";
		if(navigator.userAgent.indexOf("rv:11.0")!=-1) IEVersion = "ie ie-11";
		else if(navigator.userAgent.indexOf("MSIE 10.0")!=-1) IEVersion = "ie ie-10";
		else if(navigator.userAgent.indexOf("MSIE 9.0")!=-1) IEVersion = "ie ie-9";
		else if(navigator.userAgent.indexOf("MSIE 8.0")!=-1) IEVersion = "ie ie-8";
		else if(navigator.userAgent.indexOf("MSIE 7.0")!=-1) IEVersion = "ie ie-7";

		var windowsVersion='not-windows';
		if(navigator.userAgent.indexOf("Windows NT 5.0")!=-1) windowsVersion = "windows-2000";
		else if (navigator.userAgent.indexOf("Windows NT 5.1")!=-1) windowsVersion="windows-xp";
		else if(navigator.userAgent.indexOf("Windows NT 6.0")!=-1) windowsVersion = "windows-vista";
		else if(navigator.userAgent.indexOf("Windows NT 6.1")!=-1) windowsVersion = "windows-7";
		else if(navigator.userAgent.indexOf("Windows NT 6.2")!=-1) windowsVersion = "windows-8";
		else if(navigator.userAgent.indexOf("Windows NT 6.3")!=-1) windowsVersion = "windows-8-1";
		else if(navigator.userAgent.indexOf("Windows NT 10.0")!=-1) windowsVersion = "windows-10";

		var device="not-mobile"
		if (navigator.userAgent.match(/Android|BlackBerry|Kindle|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) device="mobile";

		var isKindle="not-kindle"
		if (navigator.userAgent.match(/Kindle|KFTHWI/i)) isKindle="kindle";

	    jQuery('body').addClass(name);
		jQuery('body').addClass(OSName);
		jQuery('body').addClass(device);
		jQuery('body').addClass(IEVersion);
		jQuery('body').addClass(windowsVersion);
		jQuery('body').addClass(isKindle);
	};

Filling out forms are the worst. Especially if you have to fill it out cause you have a complaint or if it is mandatory for work. You start tabbing through the form filling out only the necessities just so you can get to the end and submit it. And when you think you are finally at the end of it all and hit submit...the page refreshes and you are staring at the form all over again. What makes this worse if the form is super long or heaven forbid multiple pages. If you are lucky you are scrolled right to the error. If you are not so lucky at least you learned that this isn't the way forms should be and you can update forms on your website to fix this.

Insert jQuery to add scrolling after submission

jQuery( document ).bind( 'gform_post_render', function() {
    var firstError = jQuery( 'li.gfield.gfield_error:first' );
    if( firstError.length > 0 ) {
        firstError.find( 'input, select, textarea' ).eq( 0 ).focus();
        document.body.scrollTop = firstError.offset().top;
    }
} );

Add this into your custom JS file or place it in a <script></script> on the template your Gravity Form is located. You can either call this function in a jQuery(document).ready() or wrap it in a function of your own creation and call it.