I am using the unsemantic grid layout, however, with the following code I expect the body div to resize to 100% when the resolution lies within the tablet range:
<div class="grid-parent tablet-grid-100 grid-80" id="body">
<div class="grid-100" id="search-result">
search return
</div>
<div class="grid-50" id="column-left">Column left</div>
<div class="grid-50" id="column-right">Column right</div>
</div>
However, it remains at 80% until it reaches mobile size (where it defaults back to 100%). I have included the following css files:
<link rel="stylesheet" href="./assets/stylesheets/demo.css" />
<link rel="stylesheet" href="./assets/stylesheets/dan.css" />
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-base.css" />
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-responsive-tablet.css" />
<noscript>
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-mobile.css" />
</noscript>
<script>
var ADAPT_CONFIG = {
path: './assets/stylesheets/',
dynamic: true,
range: [
'0 to 767px = unsemantic-grid-mobile.css',
'767px = unsemantic-grid-desktop.css'
]
};
</script>
<script src="./assets/javascripts/adapt.min.js"></script>
I really can't see why it's not working!
it seems u have to call unsemantic-grid-tablet.css via adapt, not call unsemantic-grid-responsive-tablet.css via link. Try this code:
<link rel="stylesheet" href="./assets/stylesheets/demo.css" />
<link rel="stylesheet" href="./assets/stylesheets/dan.css" />
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-base.css" />
<noscript>
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-mobile.css" />
</noscript>
<script>
var ADAPT_CONFIG = {
path: './assets/stylesheets/',
dynamic: true,
range: [
'0 to 767px = unsemantic-grid-mobile.css',
'767px to 1025px = unsemantic-grid-tablet.css',
'1025px = unsemantic-grid-desktop.css'
]
};
</script>
<script src="./assets/javascripts/adapt.min.js"></script>
To use Unsemantic with Adapt.js for your use-case with tablet breakpoints:
Load only the base CSS initially.
If JavaScript is disabled or unavailable, then load the responsive CSS with tablet breakpoints.
Configure and load Adept.js in the head of your HTML document.
If you only want to utilize 80% width for the desktop default (grid-80), then you may also want to take advantage of prefix-10 to keep your layout centered.
I was able to successfully test the following:
<link rel="stylesheet" href="./assets/stylesheets/demo.css">
<link rel="stylesheet" href="./assets/stylesheets/dan.css">
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-base.css">
<noscript>
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-responsive-tablet.css">
</noscript>
<script>
var ADAPT_CONFIG = {
path: './assets/stylesheets/',
dynamic: true,
range: [
'0 to 767px = unsemantic-grid-mobile.css',
'767px to 1025px = unsemantic-grid-tablet.css',
'1025px = unsemantic-grid-desktop.css'
]
};
</script>
<script src="./assets/javascripts/adapt.min.js"></script>
body:
<div class="grid-parent grid-80 prefix-10 tablet-grid-100" id="body">
<div class="grid-100" id="search-result">
search return
</div>
<div class="grid-50" id="column-left">column left</div>
<div class="grid-50" id="column-right">column right</div>
</div>
Related
I have a snippet of code below, and what it does is when the image is clicked, it displays the video underneath. I am simply trying to align the video to be the same size as the image and fit snug underneathe it but make the image disappear as well. That way once the image is clicked, the video will displays seamlessly. Any help would be great!
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="js/ng-media.js"></script>
<script>
var myApp = angular.module('myApp', ['media']);
myApp.controller('MoocCtrl', function($scope, $http) {
$scope.videoSources = [];
$scope.loadVideos = function() {
$scope.videoSources.push('https://example.com/images/Intro.mp4');
};
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body ng-App="myApp">
<div ng-controller="MoocCtrl">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9 vidPlayer">
<img src="images/introImage.png" class="img-responsive">
</div>
<video html5-video='{{ videoSources }}'autoplay='true' controls='true'></video>
</div>
</body>
In AngularJS you can dynamically add class formatting to elements using the ng-class attribute. I want to dynamically change whether some text is displayed as plain text or link a hyperlink.
I am also using bootstrap but <a> isn't defined as a class like h1 - h5 are.
For example, for <h1> I can just do this in AngularJS:
<div ng-class="'h1'">This will be displayed as a heading 1.</div>
But this didn't work to display as a url:
<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>
So after the answer from Asiel Leal Celdeiro I just had to add the working code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Example</title>
<!-- JQuery for Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<p ng-class="{'btn btn-link': isURL}">This can be plain text or formated like a URL.</p>
<br>
<label>
<input type="checkbox" ng-model="isURL">
Make it look like a link
</label><br>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.isURL= false;
}]);
</script>
</body>
</html>
EDITED
If you really need it to be a div you can use:
<!--myController: angular controller on this partial view-->
<!--isURL: indicate whether this text is a URL or not-->
<div ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</div>
or if you can put an a or a button you can use:
<a ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</a>
or
<button ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</button>
All of them will be displayed as a URL if the myController.isURL expression is true when it's evaluated in by angular and as plain text if not. It basically, puts the classes btn and btn-link if the expression is true.
I saw several questions on this topic in here but I can't get it work for me.
I use Polymer elements with Bootstrap and it seems like the polymer elements ignore Bootstrap's css. I tried to link the CSS inside the Polymer elements but it did not fix the problem. For example, This is my Polymer element "tal-button.html":
<link rel="import" href="../components/bower_components/polymer/polymer.html">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrapValidator.min.css" rel="stylesheet">
<polymer-element name="tal-button" attributes="">
<template>
<button class="btn btn-success">I'm a Bootstrap Button</button>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tal Buttons</title>
<script src="components/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/tal-button.html">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- BootstrapValidator -->
<link href="css/bootstrapValidator.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<section>
<button class="btn btn-primary">Cool</button>
<tal-button></tal-button>
</section><!-- /#intro -->
</body>
</html>
The "Cool" Button is displayed well, but the Tal-Button is displayed as a regular button and it didn't get the Bootstrap style.
Any help will be appreciated. Thanks!
You need to put the stlyesheet imports into the <template>...</template> tag.
Only then are these CSS definitions visible inside the shadow dom of your tal-button element.
I am using a jquery plugin nicescroll
I am loading different pages via iframe to a section of the div (i have to use iframes to sandbox the iframe content )
I have created this small page and i am having two issues?
1) if i try to scroll by touching the iframe content nothing moves, i have to touch outside the iframe to scroll it
2) it scrolls very slow and uneven.
I have hardcoded the width to work on the scrolling. I am going to have to resize the width after load once i have this initial problem fixed.
Thanks for any help
This is the simple page
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="/inc/js/jquery-1.9.1.min.js"></script>
<script src="/inc/js/jquery.validate.min.js"></script>
<script src="/inc/js/jquery.cookie.js"></script>
<script src="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="application/javascript" src="/inc/js/jquery.nicescroll.min.js"></script>
<script type="text/javascript">
$( document ).on( "pageinit", "#test", function( event ) {
$("#viewportdiv").niceScroll("#wrapper");
});
</script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content" id="viewportdiv">
<div id="wrapper" style="width:1200px; height: 100%; ">
<ul>
<li>
<iframe id="myiframe" src="http://www.lipsum.com/feed/html" width="1200" height="600" seamless ></iframe>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
In regards to question no1, have you tried the niceScroll option oneaxismousemode:false
So something like this:
$(document).ready(function() {
var nice = $("html").niceScroll(); // The document page (body)
$("#div1").html($("#div1").html()+' '+nice.version);
$(".container-horizontal").niceScroll(".content",{cursorcolor:"#000",cursoropacitymax:0.7,touchbehavior:true,oneaxismousemode:false});
});
p.s. It may help to post an example link
... in fact all markup that i put before the
<div data-role="page">...</div>
is visible a very little time and when page is fully rendered, all these content disappears. Its still visible in Source / Firebug although.
i'm using HTML5Boilerplate for this project. Here's some code - maybe there are some collisions that i didn't find?!
<head>
<link rel="stylesheet" href="styles/normalize.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.structure-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.theme-1.2.0.css"/>
<script type="text/javascript" src="scripts/vendor/modernizr-2.6.1.min.js">
</script>
</head>
<body>
<!-- header disappears after page is rendered :( //-->
<div data-role="header">
Here goes the Head-Content
</div>
<h3>This content disappears also :( ... </h3>
<!-- everything below this point stays visible! //-->
<div data-role="page">...</div>
</body>
...
<script type="text/javascript" src="scripts/vendor/jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="scripts/vendor/jquery.mobile-1.2.0.min.js">
</script>
As asked :)
In jQuery mobile, data-role="page" isn't a container for your content, it is literally the page that you want to serve, anything else won't be shown. You need to put your data-role="header" inside data-role="page", and it will work
Basic jQuery mobile page from jquerymobile.com:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
// Anything here will not be on the page
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
// Anything here will not be on the page
</body>
</html>
Proof here