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>
Related
I have an angular material slider that needs to reside inside a div with a dir="rtl" style. However, when ever I add the dir="rtl" tag the slider is getting all messed up (the mouse isn't capturing it correctly and coloring is not accurate).
Here's a full HTML example of the problem:
<html>
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
</head>
<body>
<div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">
<md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
</md-slider>
Value: {{value}}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script>
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
});
</script>
</body>
I've tried changing the direction of the slider itself and placing it inside another div dir="ltr" but without success.
<html>
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
<style>
[dir=ltr] md-slider .md-thumb {
left: auto;
right: auto;
}
[dir=ltr] md-slider .md-thumb-container {
left: 0;
right: auto;
}
</style>
</head>
<body>
<div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">
<div dir="ltr">
test
<md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
</md-slider>
</div>
Value: {{value}}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script>
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
});
</script>
</body>
when you override this class it seems to work
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
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>
I am using Google maps Javascript API. I want to overlay a Bootstrap button on top of map, which will initiate a modal overlay with helpful hints.
The code below works, but the modal button is not on top of the map. Help appreciated.
Here's an example in JSBin: JSBIN
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css'/>
<link href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css' rel='stylesheet' type='text/css' />
<script src='http://code.jquery.com/jquery.min.js'></script>
<script src='http://code.jquery.com/ui/jquery-ui-git.js'></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script> <!--Load the Google chart AJAX API-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <!-- Google map API -->
<script src='http://twitter.github.com/bootstrap/assets/js/bootstrap.js'></script>
<title>Google Maps</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<!-- MODAL OVERLAY START -->
<a data-toggle='modal' href='#myModal' class='btn btn-info pull-left'><i class='icon-white icon-info-sign'></i> Hint</a>
<div id='myModal' class='modal hide fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
<h3 id='myModalLabel'>Welcome</h3>
</div>
<div class='modal-body'>
<h4>Quick Hints</h4>
<p><small>Blah blah.</small></p>
</div>
<div class='modal-footer'>
<button class='btn' data-dismiss='modal'>Close</button>
</div>
</div>
<!-- MODAL OVERLAY END -->
<div id="map_canvas"></div>
It's not on the map because the map is just another element on the page, and by default all elements are positioned relatively. You can get around this by extending the bootstrap CSS for btn, upping the z-index, and positioning the element absolutely.
Extend the CSS by adding an extra class to your button. Lets call it "my_mo".
.my_mo {
position:absolute;
z-index:2;
}
For this to work, the new CSS has to come after the bootstrap CSS (so the positioning setting is overridden).
... 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