BootStrap sticky header with dynamic user agents2
This script uses data tags to work with YouTube embedded calls. This makes video modals ever than ever without any plugin ! Super lightweight script that uses the Bootstrap framework with the introduction of only ONE new data-tag.
by freedawirl
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.css">
<link rel="stylesheet" href="//www.capmetro.org/css/promo/twotimer.css">
<div class="container-fluid">
<header class="row header-wrap nav hidden-xs hidden-sm">
<!--Desktop header-->
<div id="desktopHeader">
<div class="header col-xs-6 col-md-12 text-center"> <a class="navbar-navbar-brand capmetro-logo" href="/default.aspx">
<img src="//www.capmetro.org/images/promos/TwoTimer/capmetro-logo-white-horizontal.png" class="img-responsive" title="CapMetro Logo" alt="CapMetro Logo"> </a> <span class="md-capmetro-app ">
<a id="freeAppDesktop" class="free-app col-md-4 col-lg-3" href="/app">
<img src="//www.capmetro.org/images/promos/TwoTimer/download-app-icon-desktop.png" class="img-responsive" title="CapMetro Desktop App" alt="CapMetro Desktop App">
</a>
</span>
</div>
</div>
</header>
<header class="row header-wrap nav visible-xs visible-sm navbar navbar-fixed-top">
<!--Mobile Header-->
<div id="mobileHeader" class="text-center">
<div class="header col-xs-6 col-sm-9 "> <a class="navbar-navbar-brand capmetro-logo" href="/default.aspx">
<img src="//www.capmetro.org/images/promos/TwoTimer/capmetro-logo-white-horizontal.png" class="img-responsive" title="CapMetro Logo" alt="CapMetro Logo">
</a>
</div>
<div class="col-xs-6 col-sm-3 capmetro-app visible-xs visible-sm">
<div>
...
JavaScript
var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i);
}, //www.capmetro.org
any: function () {
return (isMobile.Android() || isMobile.iOS() || isMobile.Windows());
}
};
if (isMobile.iOS())