Add CSS Selector based on Browser using jQuery

Just go and add the code in your Your_Name.js file and run. 🙂 // CSS Browser Selector function css_browser_selector(u) { var ua = u.toLowerCase(), is = function (t) { return ua.indexOf(t) > -1 }, g = 'gecko', w = 'webkit', s = 'safari', o = 'opera', m = 'mobile', h = document.documentElement, b = [(!(/opera|webtv/i.test(ua)) && (/Trident.*rv:11\./).test(ua) && /msie\s(\d)/.test(ua)) ? ('ie ie' + RegExp.$1) : is('firefox/2') ? g + ' ff2' : is('firefox/3.5') ? g + ' ff3 ff3_5' : is('firefox/3.6') ? g + ' ff3 ff3_6' : is('firefox/3') ? g + ' ff3' : is('gecko/') ? g : is('opera') ? o + (/version\/(\d+)/.test(ua) ? ' ' + o + RegExp.$1 : (/opera(\s|\/)(\d+)/.test(ua) ? ' ' + o + RegExp.$2 : '')) : is('konqueror') ? 'konqueror' : is('blackberry') ? m + ' blackberry' : is('android') ? m + ' android' : is('chrome') ? w + ' chrome' : is('iron') ? w + ' iron' : is ('applewebkit/') ? w + ' ' + s + (/version\/(\d+)/.test(ua) ? ' ' + s + RegExp.$1 : '') : is('mozilla/') ? g : '', is ('j2me') ? m + ' j2me' : is('iphone') ? m + ' iphone' : is('ipod') ? m + ' ipod' : is('ipad') ? m + ' ipad' : is('mac') ? 'mac' : is('darwin') ? 'mac' : is('webtv') ? 'webtv' : is('win') ? 'win' + (is('windows nt 6.0') ? ' vista' : '') : is ('freebsd') ? 'freebsd' : (is('x11') || is('linux')) ? 'linux' : '', 'js']; c = b.join(' '); h.className += ' ' + c; return c; }; css_browser_selector(navigator.userAgent); $(window).load(function() { if(navigator.userAgent.match(/Trident.*rv:11\./)) { $('body').addClass('ie11'); }...

Read More
Stars With HTML CSS
Apr16

Stars With HTML CSS

Here the zip file having HTML+CSS+IMAGE and you can download here OR .stars0, .stars1, .stars2, .stars3, .stars4, .stars5 {background:url(stars.png); display:inline-block; width:150px; height:28px; margin-bottom:15px;} .stars0{ background-position:0 0; } .stars1{ background-position:0 -28px; } .stars2{ background-position:0 -56px; } .stars3{ background-position:0 -84px; } .stars4{ background-position:0 -112px; } .stars5{ background-position:0 -140px;; } <span...

Read More
Create Equal Height Columns using jQuery
Sep11

Create Equal Height Columns using jQuery

Create the Div columns are equal height using following code Place below code in between the head tag: <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } $(document).ready(function() { setEqualHeight($(".container > div")); }); </script> <style type="text/css"> .container { Width: 900px; Margin-left: auto; Margin-right: auto; } .leftsidebar { Float: left; Width: 33%; background:red; } .content { Float: left; Width: 33%; background:blue; } .rightsidebar { Float: left; Width: 33%; background:green; } </style> Place below code in between the bodytag: <div class="container"> <div class="leftsidebar"> … Lots Of Content … <br /> … Lots Of Content … <br /> … Lots Of Content … <br /> … Lots Of Content … <br /> </div> <div class="content"> … Lots Of Content … <br /> … Lots Of Content … <br /> </div> <div class="rightsidebar"> … Lots Of Content … <br /> … Lots Of Content … <br /> … Lots Of Content … <br /> … Lots Of Content … <br /> </div>...

Read More
em-px-em
Jul28

em-px-em

Compare the differences between EM and PX em pixels ex pixels .093em 1px .17ex 1px .19em 2px .25em 2.66667px .25ex 1.53333px .28em 3px .3em 3.2px .3ex 1.8px .33em 3.53333px .33ex 2px .47em 5px .5em 5.33333px .5ex 3px .67em 7.13333px .67ex 4px .75em 8px .75ex 4.53333px .83ex 5px 1em 10.06667px 1ex 6px 1.5em 16px 1.5ex 9px 2em 21.3333px 2ex 12px 2.5em 26.6667px 2.5ex 15px 2.67ex 16px 3em 32px 3ex 18px 3.5em 37.3333px 3.5ex 21px 4em 42.6667px 4ex 24px 4.5em 48px 4.5ex 27px 5em 53.3333px 5ex 30px 5.33ex 32px 8ex 48px 10em 106.667px 10ex...

Read More
“Change order” and “align to center” and “flexible width” using HTML5 and CSS3
Jul09

“Change order” and “align to center” and “flexible width” using HTML5 and CSS3

We can play the following items using below code: Change the order of baby boxes Align the baby boxes to center of father box Adjust baby box width flexible to fulfill the father box width .father { background:#CCCCCC; display:-moz-box; -moz-box-orient:horizontal; width:700px; -moz-box-pack:center; } .baby1 { background:#FF0000; padding:10px; margin:10px; color:#FFFFFF; -moz-box-ordinal-group:3; } .baby2 { background:#006600; padding:10px; margin:10px; color:#FFFFFF; -moz-box-flex:1; -moz-box-ordinal-group:2; } .baby3 { background:#0000FF; padding:10px; margin:10px; color:#FFFFFF; -moz-box-ordinal-group:4; } .baby4 { background:#999900; padding:10px; margin:10px; color:#FFFFFF; -moz-box-ordinal-group:1; } <div class="father"> <div class="baby1">Baby1</div> <div class="baby2">Baby2</div> <div class="baby3">Baby3</div> <div class="baby4">Baby4</div>...

Read More
Reversing the Box Order using HTML5 and CSS3
Jul08

Reversing the Box Order using HTML5 and CSS3

We can reverse the order of boxes using HTML5 and CSS3 using following code. .father{ background:#e2e2e2; padding:10px; /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; -moz-box-direction:reverse; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; -webkit-box-direction:reverse; /* W3C */ display:box; box-orient:horizontal; box-direction:reverse; } .baby1{ background:#99FF66; padding:10px; margin:10px;} .baby2{ background:#FFFF66; padding:10px; margin:10px;} .baby3{ background:#CCFFCC; padding:10px; margin:10px;} .baby4{ background:#0099FF; padding:10px; margin:10px;} <section class="father"> <div class="baby1">baby1</div> <div class="baby2">baby2</div> <div class="baby3">baby3</div> <div class="baby4">baby4</div>...

Read More
'