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
Related
I have a very large tree menu that will always be the same. Is it possible to create a custom css attribute (I don't know the technical term) so I can create the menu in an html file and only type a few characters in every page's source code to make the appear? Something like this:
// index.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing><!-- Nav menu appears here --></css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
// page_style.css
body {
body stuff
}
css_nav_thing {
src: (url="menu.html")
position: stuff;
margin: stuff'
}
.content_div {
position: stuff;
margin: stuff;
andstuf: stuff;
}
// nav_menu_style.css
body {
stuff: stuff;
]
a {
color: #374;
andstuff: stuff;
}
// content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// some_other_content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
Or can we do this with a <link src="menu.html" /> tag???
Is this possible to make adding the same menu to a bunch of pages easier than copy/pasting all of the menu's li's and ul's in to every single page? The site I'm building's going to have hundreds of pages. Hooray if I can make it easier and faster to do if this is possible!
If it is possible...how would I do it?
Use Jquery
menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
some_other_content_page.html
<html>
<head>
</head>
<body>
<div id="includedContent"></div>
//some_other_content_page.html content
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("menu.html");
});
</script>
</body>
</html>
Download Jquery
.load() documentation
I would name your menu menu.php then you can do below. This always works for me and you can always do this on any separated slides or gallery or whatever really you want to insert inside a particular page.
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<--THIS IS WHERE YOUR MENU GO-->
<?php include 'menu.php';?>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
css style "background-position: center; " missed, why?because background will override background-position
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="div1" :style="'background-position: center; height:200px;width:300px;background: url('+imgURL +')'"></div>
</body>
<script>
var vm = new Vue({
el: "#div1",
data: {
imgURL: 'https://www.baidu.com/img/bd_logo1.png'
}
});
</script>
</html>
In your CSS you are replacing the background-position with background later on in the rules. If you change background to background-image it will work.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="div1" :style="'background-position: center; height:200px;width:300px;background-image: url('+imgURL +')'"></div>
</body>
<script>
var vm = new Vue({
el: "#div1",
data: {
imgURL: 'https://www.baidu.com/img/bd_logo1.png'
}
});
</script>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<script>
$(document).ready($(function() {
//Dialog box
$("#dialog").dialog({
autoOpen: false
});
//button to open dialog box
$("#button").click(function(event) {
$("#dialog").dialog("open");
});
});
</script>
<body>
//div containing info about the dialog box
<div id="dialog">
<p>This is supposed to be a calculator</p>
</div>
<input id="button" type="submit" value="Open">
</body>
</html>
Change $(document).ready($(function() { to $(document).ready(function() {
and also check if the braces are properly closed
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).