asked on

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.

Tobias

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

BIGELOJ

ASKER

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

leakim971

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

leakim971

				} 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

BIGELOJ

ASKER

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

leakim971

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

leakim971

try :
navigator.platform.tolowercase()
instead :
navigator.platform

BIGELOJ

ASKER

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.

leakim971

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

leakim971

you still have :
else if ($.browser.mozilla) {
before
else if (navigator.platform.tolowercase("Win") !=-1 && $.browser.mozilla) {

BIGELOJ

ASKER

I switched it on my local testing server. It is now updated on the main server. I switched them but to no avail.

leakim971

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

BIGELOJ

ASKER

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

http://creativedatadevelopment.com/marshbay/

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BIGELOJ

ASKER

leakim971 stuck with me until the problem was solved. Awesome job! Very Professional.

Thank You!