BootStrap sticky header with dynamic user agents
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">
<header class="row header-wrap nav">
<!--Desktop header-->
<div id="desktopHeader">
<div class="header hidden-xs hidden-sm 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>
<!--Mobile Header-->
<div id="mobileHeader" class="text-center">
...
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())