• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 495
  • Last Modified:

How to Determine OS and Browser

I need to determine what OS is running, whether Windows, Mac etc.. and then determine what browser they are running. I am having trouble detecting a Windows machine running Mozilla.
0
BIGELOJ
Asked:
BIGELOJ
  • 8
  • 6
1 Solution
 
TobiasCommented:
Dear,

There's a some way to do this.

One would be to do this :

<?php

$agent = $_SERVER['HTTP_USER_AGENT'];

if(preg_match('/Linux/',$agent)) $os = 'Linux';
elseif(preg_match('/Win/',$agent)) $os = 'Windows';
elseif(preg_match('/Mac/',$agent)) $os = 'Mac';
else $os = 'UnKnown';


echo $os;

?>

Open in new window


Regards
0
 
BIGELOJAuthor Commented:
Let me give you the entire code (below). I am having trouble with this section:

else if ($.browser.mozilla && navigator.platform.indexOf("Win") !=-1)

<script type="text/javascript">
    // wrap as a jQuery plugin and pass jQuery in to our anoymous function
	
    (function ($) {
        $.fn.cross = function (options) {
            return this.each(function (i) { 
                // cache the copy of jQuery(this) - the start image
                var $$ = $(this);
                
                // get the target from the backgroundImage + regexp
                var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');

                // nice long chain: wrap img element in span
                $$.wrap('<span style="position: relative;"></span>')
                    // change selector to parent - i.e. newly created span
                    .parent()
                    // prepend a new image inside the span
                    .prepend('<img>')
                    // change the selector to the newly created image
                    .find(':first-child')
                    // set the image to the target
                    .attr('src', target);

                // the CSS styling of the start image needs to be handled
                // differently for different browsers
                if ($.browser.msie) {
                    $$.css({
                        'position' : 'absolute', 
						'z-index' : '999',
                        'left' : 0,
                        'background' : '',
                        //'top' : this.offsetTop
                    });
				} else if ($.browser.mozilla) {
                    $$.css({
                        'left' : 0,
                        'background' : '',
                        //'top' : this.offsetTop
						'top' : "-68px"
                    });
				} else if ($.browser.mozilla && navigator.platform.indexOf("Win") !=-1) {
				$$.css({
					'left' : 0,
					'background' : '',
					//'top' : this.offsetTop
					'top' : "122px"
				});
					
                } else if ($.browser.opera && $.browser.version < 9.5) {
                    // Browser sniffing is bad - however opera < 9.5 has a render bug 
                    // so this is required to get around it we can't apply the 'top' : 0 
                    // separately because Mozilla strips the style set originally somehow...                    
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : '',
                        'top' : "0"
                    });
                } else { // Safari
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : ''
                    });
                }

                // similar effect as single image technique, except using .animate 
                // which will handle the fading up from the right opacity for us
                $$.hover(function () {
                    $$.stop().animate({
                        opacity: 0
                    }, 700);
                }, function () {
                    $$.stop().animate({
                        opacity: 1
                    }, 700);
                });
            });
        };
        
    })(jQuery);
    
    // note that this uses the .bind('load') on the window object, rather than $(document).ready() 
    // because .ready() fires before the images have loaded, but we need to fire *after* because
    // our code relies on the dimensions of the images already in place.
    $(window).bind('load', function () {
        $('img.fade').cross();
    });
    </script>

Open in new window

0
 
leakim971PluritechnicianCommented:
you need to test for :
$.browser.mozilla && navigator.platform.indexOf("Win") !=-1
before :
$.browser.mozilla

else $.browser.mozilla will always true before you able to additionaly test the platform with :
$.browser.mozilla && navigator.platform.indexOf("Win") !=-1
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
leakim971PluritechnicianCommented:
				} else if ($.browser.mozilla && navigator.platform.indexOf("Win") !=-1) {
				$$.css({
					'left' : 0,
					'background' : '',
					//'top' : this.offsetTop
					'top' : "122px"
				});
				} else if ($.browser.mozilla) {
                    $$.css({
                        'left' : 0,
                        'background' : '',
                        //'top' : this.offsetTop
						'top' : "-68px"
                    });

Open in new window

0
 
BIGELOJAuthor Commented:
leakim971

I switched them around and it made no difference.

else if (navigator.platform.indexOf("Win") !=-1 && $.browser.mozilla) {
				$$.css({
					'left' : 0,
					'background' : '',
					//'top' : this.offsetTop
					'top' : "122px"
				});

Open in new window

0
 
leakim971PluritechnicianCommented:
could you provide a link to your page?

or just try  this simple one :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
if (navigator.platform.indexOf("Win") !=-1 && $.browser.mozilla) {
	alert("moz on window");
}
else {
	alert("something else");
}
</script>
</head>

<body>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
try :
navigator.platform.tolowercase()
instead :
navigator.platform
0
 
BIGELOJAuthor Commented:
I will give you a link to my page. It is still in development: http://creativedatadevelopment.com/marshbay

I am developing on a mac and of course I test various browsers. The script is designed to allow the fading of the menu images. The script allows the "fine tuning" of the image positions. Windows Firefox behaves differently than Mac Firefox.
0
 
leakim971PluritechnicianCommented:
if (navigator.platform.toLowerCase().indexOf("Win") !=-1 && $.browser.mozilla) {
0
 
leakim971PluritechnicianCommented:
you still have :
else if ($.browser.mozilla) {
before
else if (navigator.platform.tolowercase("Win") !=-1 && $.browser.mozilla) {
0
 
BIGELOJAuthor Commented:
I switched it on my local testing server. It is now updated on the main server. I switched them but to no avail.
0
 
leakim971PluritechnicianCommented:
I'm still seeing them in the wrong order.. And sorry, we need ("win") and not ("Win") :

// wrap as a jQuery plugin and pass jQuery in to our anoymous function

(function ($) {
	$.fn.cross = function (options) {
		return this.each(function (i) {
			// cache the copy of jQuery(this) - the start image
			var $$ = $(this);
	
			// get the target from the backgroundImage + regexp
			var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
	
			// nice long chain: wrap img element in span
			$$.wrap('<span style="position: relative;"></span>')
			// change selector to parent - i.e. newly created span
			.parent()
			// prepend a new image inside the span
			.prepend('<img>')
			// change the selector to the newly created image
			.find(':first-child')
			// set the image to the target
			.attr('src', target);
	
			// the CSS styling of the start image needs to be handled
			// differently for different browsers
			if ($.browser.msie) {
				$$.css({ 'position' : 'absolute', 'z-index' : '999','left' : 0,'background' : ''//'top' : this.offsetTop 
				});
			}
			else if (navigator.platform.toLowerCase.indexOf("win") !=-1 && $.browser.mozilla) {
				$$.css({ 'left' : 0, 'background' : '', 'top' : "122px"//, 'top' : this.offsetTop
				});	
			}
			else if ($.browser.mozilla) {
				$$.css({ 'left' : 0, 'background' : ''//,'top' : this.offsetTop 'top' : "-68px" 
				});
			}
			else if ($.browser.opera && $.browser.version < 9.5) {
				// Browser sniffing is bad - however opera < 9.5 has a render bug 
				// so this is required to get around it we can't apply the 'top' : 0 
				// separately because Mozilla strips the style set originally somehow...                    
				$$.css({ 'position' : 'absolute',  'left' : 0, 'background' : '', 'top' : "0" });
			}
			else {// Safari
				$$.css({ 'position' : 'absolute',  'left' : 0, 'background' : '' });
			}
		
			// similar effect as single image technique, except using .animate 
			// which will handle the fading up from the right opacity for us
			$$.hover(function () { $$.stop().animate({ opacity: 0 }, 700); }, function () { $$.stop().animate({ opacity: 1 }, 700); });
		});
	};

})(jQuery);

// note that this uses the .bind('load') on the window object, rather than $(document).ready() 
// because .ready() fires before the images have loaded, but we need to fire *after* because
// our code relies on the dimensions of the images already in place.
$(window).bind('load', function () {
	$('img.fade').cross();
});

Open in new window

0
 
BIGELOJAuthor Commented:
We are close. I appreciate your work on this problem. Check out the menu now.

http://creativedatadevelopment.com/marshbay/
0
 
leakim971PluritechnicianCommented:
I forget the parentheses after toLowerCase => toLowerCase()

// wrap as a jQuery plugin and pass jQuery in to our anoymous function

(function ($) {
	$.fn.cross = function (options) {
		return this.each(function (i) {
			// cache the copy of jQuery(this) - the start image
			var $$ = $(this);
	
			// get the target from the backgroundImage + regexp
			var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
	
			// nice long chain: wrap img element in span
			$$.wrap('<span style="position: relative;"></span>')
			// change selector to parent - i.e. newly created span
			.parent()
			// prepend a new image inside the span
			.prepend('<img>')
			// change the selector to the newly created image
			.find(':first-child')
			// set the image to the target
			.attr('src', target);
	
			// the CSS styling of the start image needs to be handled
			// differently for different browsers
			if ($.browser.msie) {
				$$.css({ 'position' : 'absolute', 'z-index' : '999','left' : 0,'background' : ''//'top' : this.offsetTop 
				});
			}
			else if (navigator.platform.toLowerCase().indexOf("win") !=-1 && $.browser.mozilla) {
				$$.css({ 'left' : 0, 'background' : '', 'top' : "122px"//, 'top' : this.offsetTop
				});	
			}
			else if ($.browser.mozilla) {
				$$.css({ 'left' : 0, 'background' : ''//,'top' : this.offsetTop 'top' : "-68px" 
				});
			}
			else if ($.browser.opera && $.browser.version < 9.5) {
				// Browser sniffing is bad - however opera < 9.5 has a render bug 
				// so this is required to get around it we can't apply the 'top' : 0 
				// separately because Mozilla strips the style set originally somehow...                    
				$$.css({ 'position' : 'absolute',  'left' : 0, 'background' : '', 'top' : "0" });
			}
			else {// Safari
				$$.css({ 'position' : 'absolute',  'left' : 0, 'background' : '' });
			}
		
			// similar effect as single image technique, except using .animate 
			// which will handle the fading up from the right opacity for us
			$$.hover(function () { $$.stop().animate({ opacity: 0 }, 700); }, function () { $$.stop().animate({ opacity: 1 }, 700); });
		});
	};

})(jQuery);

// note that this uses the .bind('load') on the window object, rather than $(document).ready() 
// because .ready() fires before the images have loaded, but we need to fire *after* because
// our code relies on the dimensions of the images already in place.
$(window).bind('load', function () {
	$('img.fade').cross();
});

Open in new window

0
 
BIGELOJAuthor Commented:
leakim971 stuck with me until the problem was solved. Awesome job! Very Professional.

Thank You!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now