I'm trying to make every other slide of swiper js to have a different height.
However when I try the following nothing occurs. Tried several other selectors but it's not working.
.swiper-home-image:nth-child(even) > img {
height: 53vh;
max-height: 53vh;
}
head:
<head>
<meta charset="utf-8" />
<title>js-beta</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="Webflow" name="generator" />
<link href="https://uploads-ssl.webflow.com/5f30f6f5e806c6393b4b6928/css/js-beta.webflow.8e7ae5965.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"]
}
});
</script>
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]-->
<script type="text/javascript">
! function(o, c) {
var n = c.documentElement,
t = " w-mod-";
n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
}(window, document);
</script>
<link href="https://uploads-ssl.webflow.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="https://uploads-ssl.webflow.com/img/webclip.png" rel="apple-touch-icon" />
<!-- swiper 6 CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
.swiper-container {
margin-left: 65px;
}
.swiper-home-image:nth-child(even)>img {
height: 53vh;
max-height: 53vh;
}
.swiper-container .swiper-slide {
width: auto;
padding-bottom: 30px;
}
.swiper-button-next {
display: none;
}
.swiper-button-prev {
display: none;
}
.swiper-container-horizontal>.swiper-scrollbar {
width: 20%;
left: 0%;
height: 12px;
bottom: 5vh;
}
</style>
body:
<body>
<nav class="navigation-section">
<div class="main-navigation">Architecture<br/>Films<br/>Graphic Design<br/>Photography<br/></div>
<div class="sub-navigation">Studies</div>
</nav>
<div class="swiper-container w-dyn-list">
<div role="list" class="swiper-wrapper w-dyn-items">
<div role="listitem" class="swiper-slide w-dyn-item"><img src="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed.jpg" alt="" sizes="(max-width: 991px) 100vw, (max-width: 1279px) 94vw, (max-width: 1439px) 95vw, (max-width: 1919px) 96vw, 98vw" srcset="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed-p-2000.jpeg 2000w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed-p-2600.jpeg 2600w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed-p-3200.jpeg 3200w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed.jpg 3999w" class="swiper-home-image"/></div>
<div role="listitem" class="swiper-slide w-dyn-item"><img src="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d8f37505a52dcc9c7d4_Huelga_02_compressed.jpg" alt="" sizes="(max-width: 991px) 100vw, (max-width: 1279px) 94vw, (max-width: 1439px) 95vw, (max-width: 1919px) 96vw, 98vw" srcset="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d8f37505a52dcc9c7d4_Huelga_02_compressed-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d8f37505a52dcc9c7d4_Huelga_02_compressed-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d8f37505a52dcc9c7d4_Huelga_02_compressed.jpg 1998w" class="swiper-home-image"/></div>
<div role="listitem" class="swiper-slide w-dyn-item"><img src="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed.jpg" alt="" sizes="(max-width: 991px) 100vw, (max-width: 1279px) 94vw, (max-width: 1439px) 95vw, (max-width: 1919px) 96vw, 98vw" srcset="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed-p-800.jpeg 800w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed.jpg 1999w" class="swiper-home-image"/></div>
</div>
</div>
<div class="collection-list-wrapper-3 w-dyn-list">
<div role="list" class="collection-list-3 w-dyn-items">
<div role="listitem" class="w-dyn-item"><img loading="lazy" src="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed.jpg" alt="" sizes="(max-width: 479px) 93vw, (max-width: 767px) 96vw, (max-width: 991px) 91vw, 100vw" srcset="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed-p-2000.jpeg 2000w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed-p-2600.jpeg 2600w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed-p-3200.jpeg 3200w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d33afae98092becb1c2_Nomad_01_compressed.jpg 3999w" class="image-3"/></div>
<div role="listitem" class="w-dyn-item"><img loading="lazy" src="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d8f37505a52dcc9c7d4_Huelga_02_compressed.jpg" alt="" sizes="(max-width: 479px) 93vw, (max-width: 767px) 96vw, (max-width: 991px) 91vw, 100vw" srcset="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d8f37505a52dcc9c7d4_Huelga_02_compressed-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d8f37505a52dcc9c7d4_Huelga_02_compressed-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2d8f37505a52dcc9c7d4_Huelga_02_compressed.jpg 1998w" class="image-3"/></div>
<div role="listitem" class="w-dyn-item"><img loading="lazy" src="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed.jpg" alt="" sizes="(max-width: 479px) 93vw, (max-width: 767px) 96vw, (max-width: 991px) 91vw, 100vw" srcset="https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed-p-500.jpeg 500w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed-p-800.jpeg 800w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed-p-1600.jpeg 1600w, https://uploads-ssl.webflow.com/5f3165920c8f20870ae626d0/5f3e2da2f598cb9aab207dd8_Waterfront_05_compressed.jpg 1999w" class="image-3"/></div>
</div>
</div>
<div class="bottom-container">Information</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5f30f6f5e806c6393b4b6928" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://uploads-ssl.webflow.com/5f30f6f5e806c6393b4b6928/js/webflow.ea88d70ef.js" type="text/javascript"></script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
<!-- swiper 6 JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiperNodes = "";
var pagination = '<div class=swiper-pagination></div>';
var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
var scrollbar = '<div class="swiper-scrollbar"></div>';
var swiperNodes = swiperNodes.concat(scrollbar);
/* loop throw all swipers on the page */
$('.swiper-container').each(function(index) {
$(this).append(swiperNodes);
});
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
slidesPerView: 'auto',
spaceBetween: 20,
freeMode: true,
loop: false,
grabCursor: true,
keyboard: {
onlyInViewport: true
},
mousewheel: true,
centeredSlides: false,
// Enable lazy loading
lazy: false,
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
controller: {
by: 'container',
},
breakpoints: {
0: { /* when window >=0px - webflow mobile landscape/portriat */
slidesPerView: 'auto',
spaceBetween: 0,
direction: 'vertical',
},
767: { /* when window >= 767px - webflow tablet */
slidesPerView: 1,
spaceBetween: 0,
direction: 'horizontal',
},
988: { /* when window >= 988px - webflow desktop */
slidesPerView: 'auto',
direction: 'horizontal',
spaceBetween: 0,
slidesOffsetAfter: 65,
}
},
});
/*
$(window).on("resize orientationchange", function(){
var ww = document.documentElement.clientWidth
$el = $(Slider.$el);
if (ww > 960) $el.removeClass("swiper-container-horizontal").addClass("swiper-container-vertical");
else $el.removeClass("swiper-container-vertical").addClass("swiper-container-horizontal");
Slider.update();
});
*/
</script>
Live dev environment here: https://js-beta.webflow.io/
So each second image should be less high then they currently are.
Related
Hi everyone Im trying to add a save button to my quill text editor (code below). I have it typing out to HTML but now I need to have a button that saves it and also a button on a different page that can reload the same thing. I have not found enough information on this that isn't super specific or relates to my project.
Also the text is printing on screen aswell in a "HTML" format and I cant figure out how to get it logging without printing that on screen but this is secondary.
Thank You
{% load static %}
<HTML>
<head>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<link rel="stylesheet" href="{% static "css/text_editor.css" %}">
<meta charset="UTF-8">
<title>Collapsible Sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static "css/side.css" %}">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav class="blue">
<div class="nav-wrapper">
Logo
<a href="/signup/front_page" class="header__image" style="color: orange"><i class="material-
icons">landscape</i></a>
<ul class="right brand-logo">
<li>Sass</li>
<li>Components</li>
<li>Account</li>
<li>LOGOUT</li>
</ul>
</div>
</nav>
</head>
<div class="container" id="editor-container">
<body>
<div id="editor" style=height: 200px></div>
<div id="editor style="height: 200px"></div>
</body>
<div class="container javascript" id="delta-container"></div>
<script>
var toolbarOptions = [
[{ 'font': [] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic'],
[{ 'align': [] }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'color': [] }, { 'background': [] }],
[ 'image', 'link', 'video' ],
['blockquote'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
['clean'] // remove formatting button
]
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
function logHtmlContent() {
console.log(quill.root.innerHTML);
}
quill.on('text-change', update);
var container = document.querySelector('#delta-container');
update();
function update(delta) {
var contents = quill.getContents();
console.log('contents', contents);
var html = "contents = " + JSON.stringify(contents, null, 2);
if (delta) {
console.log('change', delta)
html = "change = " + JSON.stringify(delta, null, 2) + "\n\n" + HTML;
}
container.innerHTML = HTML;
hljs.highlightBlock(container);
}
</script>
</html>
html,body {
margin: 50;
height: 95%;
}
#container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#editor-container {
height: 100%;
/* added these styles */
flex: 1;
display: flex;
flex-direction: column;
}
#editor {
height: 100%;
/* added these styles */
flex: 1;
overflow-y: auto;
top: 0px;
width: 100%;
}
.container:first-child {
border-right: 0px;
}
I have a single page app with vertical tables to the left. I'm able to to click on each tab and the expected content is showing. The problem I'm having is I'm not able to programmatically change the ng-checked to "true" for the selected tab and "false" for the unselected tab. Because of this the selected tab is always on the first tab in the list of tabs. I've provided all the codes (6 files) to run this app so you can see what im talking about
Index.html
<html ng-app= "mainApp">
<head>
<title>OneilAndK</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/uxcore.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="routing.js"></script>
<link rel="stylesheet" href="verticalTab.css" rel="stylesheet"/>
</head>
<body>
<div class="tabordion">
<section id="section1">
<input type="radio" name="sections" id="option1" ng-checked = true >
<label ui-sref="About" for="option1">About</label>
<article>
<div ui-view></div>
</article>
</section>
<section id="section2">
<input type="radio" name="sections" id="option2" ng-checked = false >
<label ui-sref="Knowledge" for="option2" >Knowledge</label>
<article>
<div ui-view></div>
</article>
</section>
<section id="section3">
<input type="radio" name="sections" id="option3" ng-checked = false >
<label ui-sref="Contact" for="option3" >Contact</label>
<article>
<div ui-view></div>
</article>
</section>
</div>
</body>
</html>
About.html
<p >This is my about page</p>
Contact.html
<p >This is my Contact page</p>
Knowledge.html
<p >This is my knowledge page</p>
routing.js
var app = angular.module('mainApp', ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider', function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("Home.html")
$stateProvider
.state('Contact', {url:"/Contact",templateUrl:"Contact.html"})
.state('Knowledge', {url:"/Knowledge",templateUrl:"Knowledge.html"})
.state('About', {url:"/About",templateUrl:"About.html"})
}]);
verticalTab.css
h1 {
color: #333;
font-family: arial, sans-serif;
margin: 1em auto;
width: 80%;
}
.tabordion {
color: #333;
display: block;
font-family: arial, sans-serif;
margin: auto;
position: relative;
width: 80%;
}
.tabordion input[name="sections"] {
left: -9999px;
position: absolute;
top: -9999px;
}
.tabordion section {
display: block;
}
.tabordion section label {
background: #ccc;
border:1px solid #fff;
cursor: pointer;
display: block;
font-size: 1.2em;
font-weight: bold;
padding: 15px 20px;
position: relative;
width: 180px;
z-index:100;
}
.tabordion section article {
display: none;
left: 230px;
min-width: 300px;
padding: 0 0 0 21px;
position: absolute;
top: 0;
}
.tabordion section article:after {
background-color: #ccc;
bottom: 0;
content: "";
display: block;
left:-229px;
position: absolute;
top: 0;
width: 220px;
z-index:1;
}
.tabordion input[name="sections"]:checked + label {
background: #eee;
color: #bbb;
}
.tabordion input[name="sections"]:checked ~ article {
display: block;
}
#media (max-width: 533px) {
h1 {
width: 100%;
}
.tabordion {
width: 100%;
}
.tabordion section label {
font-size: 1em;
width: 160px;
}
.tabordion section article {
left: 200px;
min-width: 270px;
}
.tabordion section article:after {
background-color: #ccc;
bottom: 0;
content: "";
display: block;
left:-199px;
position: absolute;
top: 0;
width: 200px;
}
}
#media (max-width: 768px) {
h1 {
width: 96%;
}
.tabordion {
width: 96%;
}
}
#media (min-width: 1366px) {
h1 {
width: 70%;
}
.tabordion {
width: 70%;
}
}
I would use angular-ui-bootstrap to create tab panels. And for dynamically generating the tab headings you can use stateHelper module.
With stateHelper you can create a configuration object that you can also use inside a ng-repeat to generate the navbar of the tab panel.
The only tricky thing to make it work is the $stateChangeStart listener to calculate the index for the active route. Once the index is found it will be passed to ui-bootstrap via $rootScope.active variable.
Please have a look at the demo below or this jsfiddle.
angular.module('demoApp', ['ui.router', 'ui.bootstrap', 'ui.router.stateHelper'])
.run(['$state', '$rootScope', 'TABS_CONFIG', function($state, $rootScope, TABS_CONFIG) {
// run needed to set the correct tab-index on load
var tabs = TABS_CONFIG.children;
$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
angular.forEach(tabs, function(item, index) {
if (item.name == toState.name) {
$rootScope.active = index;
}
});
});
}])
.constant('TABS_CONFIG', {
name: 'tabs',
templateUrl: 'tabs.html',
abstract: true,
children: [{
url: '/about',
name: 'about',
template: '<div class="container"><h1>about</h1></div>'
//templateUrl: 'about.html'
}, {
url: '/contact',
name: 'contact',
template: '<div class="container"><h1>contact</h1></div>'
//templateUrl: 'contact.html'
}, {
url: '/knowhow',
name: 'know-how',
template: '<div class="container"><h1>knowhow</h1></div>'
//templateUrl: 'knowhow.html'
},
]
})
.controller('mainController', function($scope, $state, TABS_CONFIG) {
$scope.tabs = TABS_CONFIG.children;
$scope.go = function(tab) {
//$scope.active = $scope.tabs.indexOf(tab);
$state.go(tab.name);
};
})
.config(routes);
function routes($urlRouterProvider, stateHelperProvider, TABS_CONFIG) {
$urlRouterProvider.otherwise('/contact');
stateHelperProvider.state(TABS_CONFIG, {
keepOriginalNames: true
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdn.rawgit.com/marklagendijk/ui-router.stateHelper/master/statehelper.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<div ui-view></div>
<script type="text/ng-template" id="tabs.html">
<uib-tabset active="active">
<uib-tab index="$index" ng-repeat="tab in tabs" ng-click="go(tab)">
<uib-tab-heading>{{tab.name}}</uib-tab-heading>
<div ui-view></div>
</uib-tab>
</uib-tabset>
</script>
</div>
I'm trying to make a video player application using OnSen UI (https://onsen.io) and Videogular (http://www.videogular.com/). When i used together the video controllers of videogular is not working. Following are my code.
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="list_with_header.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.min.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
<script src="http://static.videogular.com/scripts/controls/latest/vg-controls.js"></script>
<script src="http://static.videogular.com/scripts/overlay-play/latest/vg-overlay-play.js"></script>
<script src="http://static.videogular.com/scripts/poster/latest/vg-poster.js"></script>
<script src="http://static.videogular.com/scripts/buffering/latest/vg-buffering.js"></script>
<script>
ons.bootstrap();
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.playlist ul {
list-style-type: none;
}
.playlist ul a {
cursor: pointer;
color: #428bca;
text-decoration: none;
}
.playlist ul a:visited {
color: #428bca;
}
.playlist ul a:hover {
color: #428bca;
text-decoration: underline;
}
.videogular-container {
width: 100%;
height: 320px;
margin: auto;
overflow: hidden;
}
.videogular-container .skipButton {
position: absolute;
padding: 10px;
top: 10px;
right: 10px;
z-index: 99999;
color: white;
cursor: pointer;
background-color: #666666;
border: 2px #FFFFFF solid;
display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
#media (min-width: 1200px) {
.videogular-container {
width: 1170px;
height: 658.125px;
}
.videogular-container.audio {
width: 1170px;
height: 50px;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.videogular-container {
width: 940px;
height: 528.75px;
}
.videogular-container.audio {
width: 940px;
height: 50px;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.videogular-container {
width: 728px;
height: 409.5px;
}
.videogular-container.audio {
width: 728px;
height: 50px;
}
}
</style>
<script>
'use strict';
angular.module('DemoAppVideo',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster",
"com.2fdevs.videogular.plugins.buffering"
]
)
.controller('HomeCtrl',
["$sce", "$timeout", function ($sce, $timeout) {
var controller = this;
controller.state = null;
controller.API = null;
controller.currentVideo = 0;
controller.onPlayerReady = function(API) {
controller.API = API;
};
controller.onCompleteVideo = function() {
controller.isCompleted = true;
controller.currentVideo++;
if (controller.currentVideo >= controller.videos.length) controller.currentVideo = 0;
controller.setVideo(controller.currentVideo);
};
controller.videos = [
{
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
]
},
{
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg"), type: "video/ogg"}
]
}
];
controller.config = {
preload: "none",
autoHide: false,
autoHideTime: 3000,
autoPlay: false,
sources: controller.videos[0].sources,
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
plugins: {
poster: "http://www.videogular.com/assets/images/videogular.png"
}
};
controller.setVideo = function(index) {
controller.API.stop();
controller.currentVideo = index;
controller.config.sources = controller.videos[index].sources;
$timeout(controller.API.play.bind(controller.API), 100);
};
}]
);
</script>
<ons-tabbar>
<ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
<ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
<ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
<ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left" style="line-height: 44px">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Artists</div>
<div class="right" style="line-height: 44px"> Right </div>
</ons-toolbar>
<div ng-app="DemoAppVideo">
<div ng-controller="HomeCtrl as controller">
<div class="videogular-container">
<videogular vg-player-ready="controller.onPlayerReady($API)" vg-complete="controller.onCompleteVideo()" vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks"> </vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
</videogular>
</div>
<div class="playlist">
<ul>
<li><a ng-click="controller.setVideo(0)">Pale Blue Dot</a></li>
<li><a ng-click="controller.setVideo(1)">Big Buck Bunny</a></li>
</ul>
</div>
</div>
</div>
</ons-page>
</ons-template>
Error Code I received.
"Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined
You are loading AngularJS twice with ons.bootstrap and then with angular.module('DemoAppVideo', []), so it's probably not taking the second part. Read about ons.bootstrap function here.
Basically, you can do it the Angular way (remember to add 'onsen'):
<script>
// Assume 'ng-app' is defined as 'my-app'
var module = angular.module('my-app', ['onsen', 'ngAnimate']);
module.controller('AppController', function($scope) { });
</script>
Or you can use ons.bootstrap instead:
<script>
// No need to define 'ng-app'
var module = ons.bootstrap(['ngAnimate']);
module.controller("AppController", function($scope){ });
</script>
Its Fixed by initializing onsen in Angular way,
var module = ons.bootstrap('myApp',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
]);
I have created a layout using JQuery layout. It is working fine if I use it in normal index file. But when I try to load through ui-view directory, it's not loading. Please help.
my index.html`
<html ng-app="sample">
<head>
<title>sample</title>
<link type="text/css" rel="stylesheet" href=""/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="jquery.js"></script>
<script src="jquery.ui.all.js"></script>
<script src="jquery.layout.js"></script>
<script src="angular-animate.js"></script>
<script src="angular-ui-router.min.js"></script>
<script type="text/javascript">
var mylayout;
$(document).ready(function(){
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
})
</script>
</head>
<body>
<div ui-view></div>
</body>
<script type="text/javascript" src="app.js">
<script type="text/javascript" src="home.js">
</html>
`
my app.js as bellow;
var SP ={};
SP.CONTROLLERS = angular.module('spControllers',[]);
sp.Dependencies =['spControllers',ui.router,'ngAnimate'
];
spModule = angular.module('spModule',SP.dependencies)
.config(['$stateProvider','$urlRouterProvider','$httpProvider',
function($stateProvider,$urlRouterProvider,$httpProvider){
$stateProider.
state('home',{
url:'',
templateurl:'home.html'
})
}]);
my home.html is as below;
<div id="container" ng-controller="smpCTRL">
<div class="pane ui-layout-west">WEST</div>
<div class="pane ui-layout-center">CENTER</div>
</div>
my home.js is as below;
SP>CONTROLLERS.controller("smpCTRL", ['$scope',function($scope){
console.log("sucess");
}]);
css as below;
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 900px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
/*
* Default Layout Theme
*
* Created for jquery.layout
*
* Copyright (c) 2010
* Fabrizio Balliano (http://www.fabrizioballiano.net)
* Kevin Dalman (http://allpro.net)
*
* Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
* and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
*
* Last Updated: 2010-02-10
* NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
*/
/*
* DEFAULT FONT
* Just to make demo-pages look better - not actually relevant to Layout!
*/
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
*font-size: 80%;
}
/*
* PANES & CONTENT-DIVs
*/
.ui-layout-pane { /* all 'panes' */
background: #FFF;
border: 1px solid #BBB;
padding: 10px;
overflow: auto;
/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
otherwise you may get double-scrollbars - on the pane AND on the content-div
- use ui-layout-wrapper class if pane has a content-div
- use ui-layout-container if pane has an inner-layout
*/
}
/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
.ui-layout-content {
padding: 10px;
position: relative; /* contain floated or positioned elements */
overflow: auto; /* add scrolling to content-div */
}
/*
* UTILITY CLASSES
* Must come AFTER pane-class above so will override
* These classes are NOT auto-generated and are NOT used by Layout
*/
.layout-child-container,
.layout-content-container {
padding: 0;
overflow: hidden;
}
.layout-child-container {
border: 0; /* remove border because inner-layout-panes probably have borders */
}
.layout-scroll {
overflow: auto;
}
.layout-hide {
display: none;
}
/*
* RESIZER-BARS
*/
.ui-layout-resizer { /* all 'resizer-bars' */
background: #DDD;
border: 1px solid #BBB;
border-width: 0;
}
.ui-layout-resizer-drag { /* REAL resizer while resize in progress */
}
.ui-layout-resizer-hover { /* affects both open and closed states */
}
/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
otherwise color shifts while dragging when bar can't keep up with mouse */
.ui-layout-resizer-open-hover , /* hover-color to 'resize' */
.ui-layout-resizer-dragging { /* resizer beging 'dragging' */
background: #C4E1A4;
}
.ui-layout-resizer-dragging { /* CLONED resizer being dragged */
border: 1px solid #BBB;
}
.ui-layout-resizer-north-dragging,
.ui-layout-resizer-south-dragging {
border-width: 1px 0;
}
.ui-layout-resizer-west-dragging,
.ui-layout-resizer-east-dragging {
border-width: 0 1px;
}
/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
background: #E1A4A4; /* red */
}
.ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
background: #EBD5AA;
}
.ui-layout-resizer-sliding { /* resizer when pane is 'slid open' */
opacity: .10; /* show only a slight shadow */
filter: alpha(opacity=10);
}
.ui-layout-resizer-sliding-hover { /* sliding resizer - hover */
opacity: 1.00; /* on-hover, show the resizer-bar normally */
filter: alpha(opacity=100);
}
/* sliding resizer - add 'outside-border' to resizer on-hover
* this sample illustrates how to target specific panes and states */
.ui-layout-resizer-north-sliding-hover { border-bottom-width: 1px; }
.ui-layout-resizer-south-sliding-hover { border-top-width: 1px; }
.ui-layout-resizer-west-sliding-hover { border-right-width: 1px; }
.ui-layout-resizer-east-sliding-hover { border-left-width: 1px; }
/*
* TOGGLER-BUTTONS
*/
.ui-layout-toggler {
border: 1px solid #BBB; /* match pane-border */
background-color: #BBB;
}
.ui-layout-resizer-hover .ui-layout-toggler {
opacity: .60;
filter: alpha(opacity=60);
}
.ui-layout-toggler-hover , /* need when NOT resizable */
.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */
background-color: #FC6;
opacity: 1.00;
filter: alpha(opacity=100);
}
.ui-layout-toggler-north ,
.ui-layout-toggler-south {
border-width: 0 1px; /* left/right borders */
}
.ui-layout-toggler-west ,
.ui-layout-toggler-east {
border-width: 1px 0; /* top/bottom borders */
}
/* hide the toggler-button when the pane is 'slid open' */
.ui-layout-resizer-sliding .ui-layout-toggler {
display: none;
}
/*
* style the text we put INSIDE the togglers
*/
.ui-layout-toggler .content {
color: #666;
font-size: 12px;
font-weight: bold;
width: 100%;
padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
}
/*
* PANE-MASKS
* these styles are hard-coded on mask elems, but are also
* included here as !important to ensure will overrides any generic styles
*/
.ui-layout-mask {
border: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
position: absolute !important;
opacity: 0 !important;
filter: Alpha(Opacity="0") !important;
}
.ui-layout-mask-inside-pane { /* masks always inside pane EXCEPT when pane is an iframe */
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
div.ui-layout-mask {} /* standard mask for iframes */
iframe.ui-layout-mask {} /* extra mask for objects/applets */
/*
* Default printing styles
*/
#media print {
/*
* Unless you want to print the layout as it appears onscreen,
* these html/body styles are needed to allow the content to 'flow'
*/
html {
height: auto !important;
overflow: visible !important;
}
body.ui-layout-container {
position: static !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
/* only IE6 has container width & height set by Layout */
_width: auto !important;
_height: auto !important;
}
.ui-layout-resizer, .ui-layout-toggler {
display: none !important;
}
/*
* Default pane print styles disables positioning, borders and backgrounds.
* You can modify these styles however it suit your needs.
*/
.ui-layout-pane {
border: none !important;
background: transparent !important;
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
}
}
This is how I get it solved:
In your app.js, create is on controller,
add the controller name to your index body.
the convert the template js to a method.
then create a scope method in your app.js controller.
In the scope method, call the template js method.
Inside the ui-view html template or your dashboard. Use ng-init to call the scope method of your app.js controller using <div ng-init='$parent.appTemplate()'></div>.
Here is the working example (index.html):
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="zeusWeb" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Screening Manager</title>
<meta name="keywords" content="education, institution, management, portal,screening,application">
<meta name="description" content="education, institution, management, portal,screening,application">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="author" content="K-Devs System Solutions">
<meta name="owner" content="Kazeem Olanipekun">
<meta name="verified by" content="K-Devs System Solutions">
<meta name="googlebot" content="noodp">
<meta name="google" content="translate">
<meta name="revisit-after" content="1 month">
<!-- build:css css/main.css-->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/iCheck/skins/flat/blue.css" />
<link rel="stylesheet" href="bower_components/nprogress/nprogress.css" />
<link rel="stylesheet" href="bower_components/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.css" />
<link rel="stylesheet" href="bower_components/switchery/dist/switchery.css" />
<!--endbower-->
<!--custom:css-->
<link href="template.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<!-- endcustom css-->
<!-- endbuild -->
<link rel="shortcut icon" href="images/screening.ico" type='image/x-icon'/>
<link rel="icon" href="images/screening.ico" type="image/x-icon"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-ng-controller="zeusWebCtrl" class="nav-md footer_fixed">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<data ui-view ng-cloak></data>
<!-- build:js js/vendors.js-->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
<script src="bower_components/iCheck/icheck.js"></script>
<script src="bower_components/nprogress/nprogress.js"></script>
<script src="bower_components/bootstrap-progressbar/bootstrap-progressbar.js"></script>
<script src="bower_components/transitionize/dist/transitionize.js"></script>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<script src="bower_components/switchery/dist/switchery.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/main.js-->
<!-- code inclusion-->
<script src="template.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/dashboard/dashboard.js"></script>
<script src="app.js"></script>
<!--end inclusion -->
<!-- endbuild -->
</body>
</html>
Here is the app.js:
'use strict';
// Declare app level module which depends on views, and components
var zeusWeb=angular.module('zeusWeb', ['ui.router', 'angular-loading-bar','dashboard']);
zeusWeb.config(['$stateProvider', '$urlRouterProvider','cfpLoadingBarProvider',function ($stateProvider, $urlRouterProvider,cfpLoadingBarProvider) {
$urlRouterProvider.otherwise("/");
/**
* State for the very first page of the app. This is the home page .
*/
$stateProvider.state('home', {
url: "/",
templateUrl: 'views/dashboard/dashboard.html',
controller: 'dashboardCtrl'
});
/*
$stateProvider.state('dashboard', {
url:'/dashboard',
templateUrl: 'views/dashboard/dashboard.html',
controller: 'dashboardCtrl',
controllerAs:'vm'
});*/
/*
$stateProvider.state('dashboard', {
views:{
'body':{
url:'/embed',
templateUrl: 'view1/embed.html',
controller: 'embed',
controllerAs:'vm'
}
}
});*/
}]);
zeusWeb.controller('zeusWebCtrl',['$scope',function ($scope) {
$scope.test = "Testing";
$scope.appTemplate=function () {
template();
};
}]);
Here is the embed ui-view dashboard.html:
<div class="container body">
<div class="main_container">
<!--sidebar-->
<section data-ng-include="'views/dashboard/sidebar-nav.html'" data-ng-controller="sideBarCtrl as vm"></section>
<!--sidebar-->
<!-- top navigation -->
<section data-ng-include="'views/dashboard/header.html'"></section>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main" ui-view="body">
hey
<!-- <script>template();</script>-->
</div>
<!-- /page content -->
<!--footer-->
<section data-ng-include="'views/dashboard/footer.html'"></section>
<!--footer-->
</div>
</div>
<div data-ng-init="$parent.appTemplate()"></div>
Please note that if you are having an asynchronous inject sidebars html based on roles. make sure you have a default sidebar html that will put this <div data-ng-init="$parent.appTemplate()"></div> instead of the dashboard and also make sure that the default sidebar will be loaded last after all other sidebars has loaded successfully.
In my case, here is a sample example of the sidebars (school admin html sidebar):
<div class="menu_section">
<h3>Live On</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>E-commerce</li>
<li>Projects</li>
<li>Project Detail</li>
<li>Contacts</li>
<li>Profile</li>
</ul>
</li>
<li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>403 Error</li>
<li>404 Error</li>
<li>500 Error</li>
<li>Plain Page</li>
<li>Login Page</li>
<li>Pricing Tables</li>
</ul>
</li>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Level One
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">Level Two
</li>
<li>Level Two
</li>
<li>Level Two
</li>
</ul>
</li>
<li>Level One
</li>
</ul>
</li>
<li><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></li>
</ul>
</div>
Then, let assume that is the last sidebar of the user, then you then call the default sidebar to call the function (default sidebar html):
<div data-ng-init="$parent.appTemplate()"></div>
You should try your code after angular DOM is ready
angular.element(document).ready(function () {
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
});
The issue is that .layout is called before the element #container exists.
The correct solution for this would be to create a directive for the 'layout' function and apply that directive to the element you want to set the layout to.
Include your script inside your home.html partial template, that should work, had a similar issue, my guess is that that particular dom element does not exist when your function is initially executed.
home.html
<script type="text/javascript">
var mylayout;
$(document).ready(function(){
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
})
</script>
<div id="container" ng-controller="smpCTRL">
<div class="pane ui-layout-west">WEST</div>
<div class="pane ui-layout-center">CENTER</div>
</div>
I've done a number of responsive builds over recent months and thought that the base style sheet I use might be worth sharing! It's very simple but very effective. I've used a couple of Javascript libraries to fix common bugs but reference to these in in the comments.
HTML Doc
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="" />
<!-- http://modernizr.com -->
<script src="scripts/modernizr.min.js"></script>
<link rel="stylesheet" href="css/base.css" />
</head>
<body>
<header id="header" class="env clearfix"><p>Header Content</p></header>
<div id="body-content" class="env clearfix">
<p>Body Content</p>
<p class="mobile-only">Hello Mobile Users</p>
</div>
<footer id="footer" class="env clearfix"><p>Footer Content</p></footer>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ -->
<script src="scripts/MobileBoilerplate.js"></script>
<script type="text/javascript">
MBP.scaleFix();
</script>
<!-- https://github.com/scottjehl/Respond -->
<script src="scripts/respond.min.js"></script>
Base.css
body{ }
#header{ background-color:red; }
#footer{background-color:green;}
p{padding:25px;}
.env { position:relative; max-width:1000px; padding:0; margin:0 auto; width:100%; }
.mobile-only{display:none;}
#media only screen and (min-width: 1000px)
{
.env { max-width: 1400px; }
p{padding:50px;}
}
#media only screen and (min-width: 701px) and (max-width: 850px)
{
body{font-size:0.9em;}
.env { max-width: 850px; }
p{padding:20px;}
}
#media only screen and (min-width: 701px)
{
.mobile-only{display:none !important;}
}
#media only screen and (max-width: 700px) {
.env { max-width: 700px; min-width:300px;}
body{font-size:0.9em;}
.hide-in-mobile{display:none;}
.mobile-only{display:block;}
p{padding:10px;}
}
#media only screen and (min-width: 450px) and (max-width: 700px)
{
p{padding:15px;}
}
#media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
#logo{ background:url(/images/logo#2x.png) no-repeat; background-size: 84px 140px; }
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom:1;clear: both; }