- Dom
- click
- inArray
- merge objects
- query string
- smartcheck
- attr
- addClass
- hasClass
- removeClass
- append
- prepend
- remove
- has
- findAll
- empty
- position
- offset
- outerWidth
- outerHeight
- replaceWith
- html
- text
- val
- parseHTML
- parseJSON
- parent
- next
- prev
- first
- last
- now
- toArray
- size
- Manipulation
- dates compare
- getMonthName
- getDayName
- .NET JSON date
- hashtag
- number Format
- pad
- smallCase
- upperCase
- Forms
- focus
- mobile number
- repetition
- placeholder
- Browser
- browser feature
- Browser Information
- Effects
- hide
- show
- sticky
- scrolline
- goUp
- Animation
- circles
- Google analytics
- Google fonts
.browserfeature()
Description: Detect browser features and capabilities.
Example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>browserfeature demo</title>
<script src="http://code.bitsycode.com/bitsycode-latest.min.js"></script>
<style type="text/css">
.supported {
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
display: inline-block;
padding: 4px 6px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px inset, rgba(255, 255, 255, 0.8) 0 -1px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px inset, rgba(255, 255, 255, 0.8) 0 -1px inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px inset, rgba(255, 255, 255, 0.8) 0 -1px inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px inset, rgba(255, 255, 255, 0.8) 0 -1px inset;
}
.supported.true {
background-color: #78b814;
background-color: rgba(120, 184, 20, 0.9);
}
.supported.false {
background-color: #b83314;
background-color: rgba(184, 51, 20, 0.9);
}
.feature-results .col-md-3 {
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="feature-results"></div>
<script type="text/javascript">
bitsyCode.ready(function(){
var capabilities = bitsyCode.browserfeature();
for (var feature in capabilities) {
if (capabilities.hasOwnProperty(feature)) {
bitsyCode(".feature-results").append('<div class="row"><div class="col-md-3">' + feature + '</div><div class="col-md-3"><div class="supported '+capabilities[feature]+'">' + capabilities[feature] + '</div></div></div>');
}
}
})
</script>
</body>
</html>
Preview:
Share