Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How to Determine OS and Browser

Posted on 2012-09-17
15
Medium Priority
?
487 Views
Last Modified: 2012-09-17
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
Comment
Question by:BIGELOJ
  • 8
  • 6
15 Comments
 
LVL 10

Expert Comment

by:Tobias
ID: 38405863
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
 

Author Comment

by:BIGELOJ
ID: 38405951
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
 
LVL 83

Expert Comment

by:leakim971
ID: 38406041
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 83

Expert Comment

by:leakim971
ID: 38406045
				} 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
 

Author Comment

by:BIGELOJ
ID: 38406336
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
 
LVL 83

Expert Comment

by:leakim971
ID: 38406383
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
 
LVL 83

Expert Comment

by:leakim971
ID: 38406385
try :
navigator.platform.tolowercase()
instead :
navigator.platform
0
 

Author Comment

by:BIGELOJ
ID: 38406461
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
 
LVL 83

Expert Comment

by:leakim971
ID: 38406525
if (navigator.platform.toLowerCase().indexOf("Win") !=-1 && $.browser.mozilla) {
0
 
LVL 83

Expert Comment

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

Author Comment

by:BIGELOJ
ID: 38406540
I switched it on my local testing server. It is now updated on the main server. I switched them but to no avail.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38406570
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
 

Author Comment

by:BIGELOJ
ID: 38406621
We are close. I appreciate your work on this problem. Check out the menu now.

http://creativedatadevelopment.com/marshbay/
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 38406629
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
 

Author Closing Comment

by:BIGELOJ
ID: 38406664
leakim971 stuck with me until the problem was solved. Awesome job! Very Professional.

Thank You!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question