Tuesday, September 20, 2011

Detecting browser versions and Operating Systems with jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.client.js"></script>
Download clients.js here

<script type="text/javascript">
$(function() {

//Firefox 3.6
var version=jQuery.browser.version;
if (jQuery.browser.mozilla) {   
    var verarray=version.split('.');
    if(verarray[0]=='1' && verarray[1]=='9')
    {
        /*var head= document.getElementsByTagName('head')[0];
        var addCSS= document.createElement('link');
        addCSS.href = 'css/CSIdentity.ff3.5.css';
        addCSS.rel = 'stylesheet';
        addCSS.type = 'text/css';
        head.appendChild(addCSS);*/
        $(".nav li:first-child").css({"padding":"10px"})
    }   
}   
//Mac Safari 5
var dos = $.client.os;
var dbv = $.client.browser=="Safari";
if(dos == "Mac" && dbv && (navigator.appVersion.indexOf('5.') != -1)){
    $(".nav li:first-child").css({"padding":"20px"})
}
//Mac Chrome
var dbvch = $.client.browser=="Chrome";
if(dos == "Mac" && dbvch){
    $(".nav li:first-child").css({"padding":"24px"})
}
//Mac Firefox 3.6
if(dos == "Mac" && jQuery.browser.mozilla){
    var verarray=version.split('.');
    if(verarray[0]=='1' && verarray[1]=='9')
    {       
        $(".nav li:first-child").css({"padding":"26px"});
    }   
}
//FF 4.0
if(dos == "Mac" && jQuery.browser.mozilla && version == "2.0"){
    $(".nav li:first-child").css({"padding":"28px"});       
}
//FF 5.0
if(dos == "Mac" && jQuery.browser.mozilla && version == "5.0.1"){
    $(".nav li:first-child").css({"padding":"30px"});
}

//Windows Vista FF
if(navigator.oscpu == "Windows NT 6.0" && jQuery.browser.mozilla && version == "2.0"){ 
    $(".nav li:first-child").css({"padding":"32px"});
}
if(navigator.oscpu == "Windows NT 6.0" && jQuery.browser.mozilla && version == "5.0.1"){ 
    $(".nav li:first-child").css({"padding":"8px"});   
}
if(navigator.oscpu == "Windows NT 6.0" && jQuery.browser.mozilla && version == "6.0.2"){ 
    $(".nav li:first-child").css({"padding":"6px"});   
}

Thursday, August 25, 2011

jquery rounded corners in IE 7-8

Please, use this plugin only if you REALLY want to have rounded corners in IE 7 and 8, because using jquery plugins to display CSS3 effects in old IE browsers wont be a wise choice.

We always try to keep our website light-weight possible and we don't want to make our website heavier only for the sake of IE.

Download source file here

Thursday, August 18, 2011

How to remove button's/link's dotted line on focus in firefox?

Links
a:focus{
    outline: none;
    -moz-outline-style: none;
}

/*for firefox:
    vendor specific selectors don't work with comma(,) separated class names
    we can not keep all three selectors in one line -
    .button::-moz-focus-inner, a:focus, input[type="submit"]:focus, input[type="button"]:focus
*/
.button::-moz-focus-inner{
  border: 0;
}

/*for IE8 */
input[type="submit"]:focus, input[type="button"]:focus
{    
  outline : none;
}

Friday, July 29, 2011

Input type file width problem in IE and Firefox

<input type="file" size="46" style="width: 300px;" />

Note : Width works for Internet Explorer and size works for Firefox.

Friday, July 22, 2011

CSS, jquery alternate row color compatible with IE7 and IE8

CSS
.tableClass{
}
.odd { background-color: blue; }
.even { background-color: white; }

jQuery
$(function() {   
    //
    $('.tableClass tr:even').addClass('even');
    $('.tableClass tr:odd').addClass('odd');
});

jquery to find out max height of <li> (column)

var max = -1;
$(".ulClassName li").each(function() {
var h = $(this).height();
max = h > max ? h : max;
       
$(this).css({'min-height': max});
});
alert(max);