SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    js browser detection & correct style sheet loading help, please

    i've designed a site using firefox as my primary browser. (note: i'm on an old mac so limited to only what i can run on 10.2.8) i tweaked it for safari, and then took the stuff on a jump drive to the library and tweaked it for IE6 on a pc.

    what i need to do now is either hack the CSS for safari and ie (and eventually others once i get some feedback); or, use javascript to load the correct style sheet.

    i've just spent two days--thursday and today since since 10 a.m.--trying to figure out first the js, and then the hack methods to no avail. (well, more, really over the past few weeks, but the two-day immersion has me totally fried.)

    i'm reached the point where time is extremely critical. once i get this out in an acceptable form, i can spend more time on the learning curve.

    here is the document head code:

    Code:
    <head>
    
    <title>designGalleryMASTERjs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <link href="functions/styles/df.css" rel="stylesheet" type="text/css">
    
    <script type="text/javascript">
    //initialization, browser, os detection
    var d, dom, nu='', brow='', ie, ie4, ie5, ie5x, ie6, ie7;
    var ns4, moz, moz_rv_sub, release_date='', moz_brow, moz_brow_nu='', moz_brow_nu_sub='', rv_full=''; 
    var mac, win, old, lin, ie5mac, ie5xwin, konq, saf, op, op4, op5, op6, op7;
    
    d=document;
    n=navigator;
    nav=n.appVersion;
    nan=n.appName;
    nua=n.userAgent;
    old=(nav.substring(0,1)<4);
    mac=(nav.indexOf('Mac')!=-1);
    win=( ( (nav.indexOf('Win')!=-1) || (nav.indexOf('NT')!=-1) ) && !mac)?true:false;
    lin=(nua.indexOf('Linux')!=-1);
    // begin primary dom/ns4 test
    // this is the most important test on the page
    if ( !document.layers )
    {
    	dom = ( d.getElementById ) ? d.getElementById : false;
    }
    else { 
    	dom = false; 
    	ns4 = true;// only netscape 4 supports document layers
    }
    // end main dom/ns4 test
    
    op=(nua.indexOf('Opera')!=-1);
    saf=(nua.indexOf('Safari')!=-1);
    konq=(!saf && (nua.indexOf('Konqueror')!=-1) ) ? true : false;
    moz=( (!saf && !konq ) && ( nua.indexOf('Gecko')!=-1 ) ) ? true : false;
    ie=((nua.indexOf('MSIE')!=-1)&&!op);
    if (op)
    {
    	str_pos=nua.indexOf('Opera');
    	nu=nua.substr((str_pos+6),4);
    	brow = 'Opera';
    }
    else if (saf)
    {
    	str_pos=nua.indexOf('Safari');
    	nu=nua.substr((str_pos+7),5);
    	brow = 'Safari';
    }
    else if (konq)
    {
    	str_pos=nua.indexOf('Konqueror');
    	nu=nua.substr((str_pos+10),3);
    	brow = 'Konqueror';
    }
    // this part is complicated a bit, don't mess with it unless you understand regular expressions
    // note, for most comparisons that are practical, compare the 3 digit rv nubmer, that is the output
    // placed into 'nu'.
    else if (moz)
    {
    	// regular expression pattern that will be used to extract main version/rv numbers
    	pattern = /[(); \n]/;
    	// moz type array, add to this if you need to
    	moz_types = new Array( 'Firebird', 'Phoenix', 'Firefox', 'Iceweasel', 'Galeon', 'K-Meleon', 'Camino', 'Epiphany', 'Netscape6', 'Netscape', 'MultiZilla', 'Gecko Debian', 'rv' );
    	rv_pos = nua.indexOf( 'rv' );// find 'rv' position in nua string
    	rv_full = nua.substr( rv_pos + 3, 6 );// cut out maximum size it can be, eg: 1.8a2, 1.0.0 etc
    	// search for occurance of any of characters in pattern, if found get position of that character
    	rv_slice = ( rv_full.search( pattern ) != -1 ) ? rv_full.search( pattern ) : '';
    	//check to make sure there was a result, if not do  nothing
    	// otherwise slice out the part that you want if there is a slice position
    	( rv_slice ) ? rv_full = rv_full.substr( 0, rv_slice ) : '';
    	// this is the working id number, 3 digits, you'd use this for 
    	// number comparison, like if nu >= 1.3 do something
    	nu = rv_full.substr( 0, 3 );
    	for (i=0; i < moz_types.length; i++)
    	{
    		if ( nua.indexOf( moz_types[i]) !=-1 )
    		{
    			moz_brow = moz_types[i];
    			break;
    		}
    	}
    	if ( moz_brow )// if it was found in the array
    	{
    		str_pos=nua.indexOf(moz_brow);// extract string position
    		moz_brow_nu = nua.substr( (str_pos + moz_brow.length + 1 ) ,3);// slice out working number, 3 digit
    		// if you got it, use it, else use nu
    		moz_brow_nu = ( isNaN( moz_brow_nu ) ) ? moz_brow_nu = nu: moz_brow_nu;
    		moz_brow_nu_sub = nua.substr( (str_pos + moz_brow.length + 1 ), 8);
    		// this makes sure that it's only the id number
    		sub_nu_slice = ( moz_brow_nu_sub.search( pattern ) != -1 ) ? moz_brow_nu_sub.search( pattern ) : '';
    		//check to make sure there was a result, if not do  nothing
    		( sub_nu_slice ) ? moz_brow_nu_sub = moz_brow_nu_sub.substr( 0, sub_nu_slice ) : '';
    	}
    	if ( moz_brow == 'Netscape6' )
    	{
    		moz_brow = 'Netscape';
    	}
    	else if ( moz_brow == 'rv' || moz_brow == '' )// default value if no other gecko name fit
    	{
    		moz_brow = 'Mozilla';
    	} 
    	if ( !moz_brow_nu )// use rv number if nothing else is available
    	{
    		moz_brow_nu = nu;
    		moz_brow_nu_sub = nu;
    	}
    	if (n.productSub)
    	{
    		release_date = n.productSub;
    	}
    }
    else if (ie)
    {
    	str_pos=nua.indexOf('MSIE');
    	nu=nua.substr((str_pos+5),3);
    	brow = 'Microsoft Internet Explorer';
    }
    // default to navigator app name
    else 
    {
    	brow = nan;
    }
    op5=(op&&(nu.substring(0,1)==5));
    op6=(op&&(nu.substring(0,1)==6));
    op7=(op&&(nu.substring(0,1)==7));
    op8=(op&&(nu.substring(0,1)==8));
    op9=(op&&(nu.substring(0,1)==9));
    ie4=(ie&&!dom);
    ie5=(ie&&(nu.substring(0,1)==5));
    ie6=(ie&&(nu.substring(0,1)==6));
    ie7=(ie&&(nu.substring(0,1)==7));
    // default to get number from navigator app version.
    if(!nu) 
    {
    	nu = nav.substring(0,1);
    }
    /*ie5x tests only for functionavlity. dom or ie5x would be default settings. 
    Opera will register true in this test if set to identify as IE 5*/
    ie5x=(d.all&&dom);
    ie5mac=(mac&&ie5);
    ie5xwin=(win&&ie5x);
    </script>
    <script type="text/javascript">
    
     function browser_css( ) {
    	d = document;
    	if ( ie5mac ) {
    		d.write('<link rel = "stylesheet" type = "text\/css" href = "functions/styles/ie.css" />');
    	}
    	else if ( document.layers ){
    		d.write('<link rel = "stylesheet" type = "text\/css" href = "functions/styles/df.css" />');
    	}
    	else if ( ie6 ){
    		d.write('<link rel = "stylesheet" type = "text\/css" href = "functions/styles/ie.css" />');
    	}
    	else if ( moz && ( nu < 1 ) ){
    		d.write('<link rel = "stylesheet" type = "text\/css" href = "functions/styles/ff.css" />');
    	}
    	else if ( gecko ){
    		d.write('<link rel = "stylesheet" type = "text\/css" href = "functions/styles/ff.css" />');
    	}
    	else if ( safari ){
    		d.write('<link rel = "stylesheet" type = "text\/css" href = "functions/styles/sf.css" />');
    	}
    	else {
    		d.write('<link rel = "stylesheet" type = "text\/css" href = "functions/styles/df.css>');
    	}
    }
    
    </script>
    
    
    </head>
    if you need more info, please let me know. all the relevant documents are online and i can send you links, and i can direct you to the source(s) of my scripts...

    thanks in advance for you patience and help.

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Write your stylesheets as if there were no javascript,
    because sometimes there won't be. Don't rely on scripting for the presentation of your page-

    There is no reason to 'tweak' a different stylesheet for every browser, or even to know what the browser is calling itself. You only need to know that the browser can use the methods you call in your scripts, and you determine that by testing for the existence of the bits that you need.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    browser detection was obsolete back in the IE3 days when the only 3 browsers to understand Javascript were NS2, NS3, and IE3. Even then Javascript had the ability to detect whether the browser supported a given object or method. When writing Javascript that relies on particular objects or methods you test for whether the browser supports that object or method as there is no way to determine what browser it is that is running (because most lie and claim to be IE), the new version of a browser that didn't support the object probably will (eg IE7 supports XMLHttpRequest() and so doesn't need activeX to do Ajax) and by checking if the object is supported your code will always work in those browsers that support the code rather than having to be updated every day or so for new browser releases (I have seen lists of about 100 different browsers that run on a Mac so I imagine that there are several thousand more that run on Windows and there are numerous versions of each so even if you could tell what browser was running, knowing which supports what would take years of testing by which time there will be thousands more versions to test).

    Also about 10&#37; of web users don't have Javascript (or have it disabled in order to get rid of the annoying messages that pop up every 2 seconds about activeX being disabled in IE6 - and anyone who has activeX enabled in IE6 has created about 600 extra security holes for people to break into their system so you'd be either be a computer novice with no concept of security or completely stupid in order to have it enabled). Javascript should only be used to enhance a web page - the page should be usable without it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For some simple three main win browser sniffing you don't need any js, but you will spent a lot of time on that. Here you can download a test http://xy.wz.cz/snifing/ (gecko secrecy - takes css with header text/plain sended through php ). If I use some browser sniffing in js usualy it is
    window.opera = opera
    document.uniqueID = microsoft explorer
    window.toolbar = gecko
    document.childNodes != ie4, nn4 , opera 4-6
    More you can find here http://www.lipfert-malik.de/webdesig...r_js_test.html
    But I never test userAgent because it is possible to change by user.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    But it is easier to just test if the browser supports what you are trying to use rather than testing for a specific browser.

    if (document.images) alert('browser supports image manipulation';
    if (document.getElementById) alert('browser supports getElementById("id")');
    if (window.ActiveXObject) alert('Internet Explorer on Windows with activeX enabled');

    note that just because the browser is Internet Explorer doesn't mean that activeX is enabled so testing what browser it is tells you NOTHING in that instance where testing if the object itself is supported tells you exactly what you ned to know - the same applies for most other tests as the browser may have the option you want to use turned off even if it does support it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks everyone, for your replies...unfortunately i don't have a clue what any of them mean in terms of implementation. i'm guessing the detection script came ready-to-use--plus it looks relly scary--so i changed nothing there. i did try my hand at the style sheet load script, so that could very well be all wrong. when i tested it in firefox, only the default style sheet loaded. i.e. the last else statement, so apparently none of the others worked. (i can tell which style sheet loaded because i have put a different colour border on each.)

    does anyone see somethign i've done wrong that would specifically produce an incorrect return?

    and yes, i know browser detection and "patching" is not the way to go, but i need to get this site up right now...before i become homeless. all i want to do is get my graphic design gallery up for prospective employers. i'm not trying to sell myself as a coder/programmer. heck, if i had any money, i'd just pay someone to fix this for me.

    thanks, again!

  7. #7
    SitePoint Enthusiast joejoe04's Avatar
    Join Date
    Mar 2006
    Location
    Akron, OH
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are just putting your site up for prospective graphic design employers, and you need it done fast, I would just concentrate on making sure it works in IE for right now. If it was for web design companies or web development companies, then I would worry about firefox and the others. I haven't done any research on it, but my guess is that most graphic design companies will be like most other people and just be using IE. Then you could try and get your code to work later. Or if you want Firefox and IE support quick, design the css to work correctly for Firefox, then for whatever properties need changed for IE, add another identical one below it, but with an underscore before it. Not the best long term solution, but it should get you working in IE, firefox, and probably opera too, which would at least hedge your chances until you get your script working.

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joejoe04 View Post
    If you are just putting your site up for prospective graphic design employers, and you need it done fast, I would just concentrate on making sure it works in IE for right now.
    This is a really really bad recommendation. Usually design companies actually use Mac, and they will most probably use Firefox or Safari. Nice surprise they will see when they notice that the design is completely messed up because somebody "optimized" it for IE Windows.

  9. #9
    SitePoint Enthusiast joejoe04's Avatar
    Join Date
    Mar 2006
    Location
    Akron, OH
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all, I was only trying to help and you didn't mention that I clearly stated that I didn't know that for sure. Second, I did offer a suggestion that would get his site working in both IE and Firefox for the short term. I don't care, and actually appreciate criticism if it helps me learn something...But I don't think the level of sarcasm/attitude/whatever in your response was at all necessary.

    Quote Originally Posted by Pepejeria View Post
    and they will most probably use Firefox or Safari. Nice surprise they will see when they notice
    This is really BAD grammar...

  10. #10
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    usa
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    i can certainly live with a hack...

    for the short term. and, no worries, joejoe, i took it in the context meant. (in pepe's grammatical defense, though, i see he is from germany so unless he's military or an ex-pat, english may not be his native language.)

    i did look into some hack options and tried an ie hack thing using "html>body body,td,th {..." and placing that after the body,td,th stuff for windows, but ie still read the original.

    so what you are saying is this:
    Code:
    body,td,th {font-size: .74em; letter-spacing:+.075em; line-height:1.5em;} 
    _body,td,th {font-size: 1em; letter-spacing:+.075em; line-height:1.75em;}
    and,

    Code:
    #container {width: 728px; margin-top:30px; margin-left: auto; margin-right: auto; border: 1px solid #ffffff; background-color:#FFFFFF; border: 1px solid blue; }
    _#container {width: 728px; margin-top:30px; margin-left: auto; margin-right: auto; border: 1px solid #ffffff; background-color:#FFFFFF; border: 1px solid red; }
    with the first (non-underscore) one being the IE parameter, and the second all else. correct?

  11. #11
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://wellstyled.com/css-underscore-hack.html
    Underscore hack is not supported by ie7

    body,td,th {font-size: .74em; letter-spacing:.075em; line-height:1.5em;_font-size: 1em; }
    #container {width: 728px; margin-top:30px; margin-left: auto; margin-right: auto;background-color:#fff; border: 1px solid blue;_border: 1px solid red; }

  12. #12
    SitePoint Enthusiast joejoe04's Avatar
    Join Date
    Mar 2006
    Location
    Akron, OH
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mtouchette,

    Yes that is what I was saying, but you had it backwards...The first line of code is for everything else and the second one (with the underscore) is the one that only IE will read. But if Mirek is right in his response above, then I guess it doesn't work in IE 7. One thing to note though is that I've only made one website so far (which I made before IE7 came out) and I used the underscore hack a couple times. When I got IE7, I tested the site in it expecting it not to work anymore, but it still displayed correctly for me. So that's why I just assumed it still worked, but obviously I was wrong.

    I felt bad about the bad suggestions so I found another way. Put this inside your head tag: (exact order is important)

    <link rel="stylesheet" type="text/css" href="ff.css" />
    <![if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]>

    The first line will link to the stylesheet for all browsers but IE and the second one will link to a stylesheet for IE only. Microsoft says this works for IE 5 or later. Again, this is just a suggestion, I dont know about any of the negatives of using this, but I hope I could be of some help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •