I am new leaner to the angularjs and I make simple page as below, where in I have style called "item" and I am trying to give it to div but it is not working but on the same time if I give inline style then it will work.
What can be the issue, Kindly somebody help me
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="KACApp">
<div id="layoutContainer" ng-controller="layoutController as ctrl" style="height:100%">
<div layout="row" layout-xs="column">
<div flex class="item">Item</div>
<div flex="20">Item 2</div>
</div>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<style>
.item {
background: "#073857";
}
</style>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('KACApp', ['ngMaterial'])
.controller('layoutController',layoutController)
.run(function() {
console.log('App is ready');
});
function layoutController($scope){
}
</script>
</body>
</html>
Simply remove " from your style and it'll work :
.item {
background: "#073857";
}
change to ->
.item {
background: #073857;
}
Try this
.item {
background: #073857;
}
See the Plunker
Related
i tried to do a popup and when i do my js in my html it work perfectly, but when i tried to separe my js of my html, my js file doesn't work and i don't know why...
i don't know if the problem its how i adapt my js or how my js is linked
if someone can help, it's will be really nice !
Here's my code, if you need anything else ask me ! :
var modal = document.getElementById('popup2');
var essai = document.getElementById('id02');
console.log(modal)
essai.addEventListener("click", function () {
modal.style.display = "block";
})
var span2 = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span2.onclick = function () {
essai.style.display = "none";
}
.popup2{z-index: 3;
display: none;
padding-top: 100px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.82);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Nejma Hamadi</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="vendor/bootstrap/css/styles.css" rel="stylesheet">
<link href="vendor/bootstrap/css/stylesGallery.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body id="page-top">
<section id="portfolio2">
<img src="img/img2.jpg" id="img1">
<div id="id02" class="popup2">
<div>
<span class="close">×</span>
<img src="img/img3.jpg" alt="Avatar" style="width:30%" id="img001">
<img src="img/img3.jpg" alt="Avatar" style="width:30%">
<img src="img/img3.jpg" alt="Avatar" style="width:30%">
</div>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<!-- Custom JavaScript for this theme -->
<script src="js/scrolling-nav.js"></script>
<!--<script src="js/popup.js"></script>-->
<script src="js/popup2.js"></script>
<script src="js/popupVideo.js"></script>
</body>
</html>
In your HTML, you are using popup2 as a class name, not an id!
Therefore, you should replace var modal = document.getElementById('popup2'); by
var modal = document.getElementsByClassName('popup2')[0];
Another thing: make sure this code runs after the HTML has loaded, otherwise it will return undefined. To do so, wrap your code inside:
document.onload = function() {
var modal = document.getElementsByClassName('popup2')[0];
//your code here
}
you can do that with Jquery
$("#popup").hide(); //hidden in start
$("#openPopup").on("click",function(){
$("#popup").show();
});
$("#closePopup").on("click",function(){
$("#popup").hide();
});
see CodePen Demo
I'm learning Bootstrap and I'm trying to make offset with Boostrap 4 but after trying a hour and nothing work, here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hellow World!</title>
<link rel="stylesheet" href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<header class="col-md-12">HEADER</header>
</div>
<div class="row">
<div class="col-md-4 offset-md-4">1/3</div>
<div class="col-md-4">1/3</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to replace offset-md-4 with col-md-offset-4 but still not work. Can someone figure this out?
You did not specify which Bootstrap version are you using, but from that Popper JS include, I'm guessing Bootstrap 4 (beta).
Bootstrap 4 (beta) does not have offset classes for columns:
With the move to flexbox in v4, we no longer have v3’s style of offset classes. Instead, use margin utilities like .mr-auto to force sibling columns away from one another.
Alpha version had offset classes though, but I encourage you to switch to beta, as every further version will build upon this.
In Bootstrap 4, you can achive column offsetting by adding margin utility classes to columns. For example:
.row {
background: red;
}
.row > div {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 ml-auto">1/3</div>
<div class="col-md-4">1/3</div>
</div>
</div>
If you want to stick with the alpha version, your above code should work if you include Bootstrap 4 alpha CSS:
.row {
background: red;
}
.row > div {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">1/3</div>
<div class="col-md-4">1/3</div>
</div>
</div>
UPDATE: Bootstrap 4 beta 2 brings back these offset classes! So if you include the new CSS, you can use your original code.
First you check bootstrap version.this might help you.
https://github.com/twbs/bootstrap/issues/19966
So i have installed angular, angular-material, angular-aria, angular-animate dependencies to my system.
I just want to test out this up and coming styling method.
It seems I'm stuck at the beginning. Can you tell me whats wrong with the code?
These are my 3 files.
app.js
styles.css
index.html
My output is {{title1}} at the centre-top of the webpage.
angular.module('MyApp', ['ngMaterial'])
.controller("MyController", function($scope) {
$scope.title1 = 'Lol';
});
.buttondemoBasicUsage section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px;
}
.buttondemoBasicUsage md-content {
margin-right: 7px;
}
.buttondemoBasicUsage section .md-button {
margin-top: 16px;
margin-bottom: 16px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
</body>
</html>
This is really just a matter of referencing the files to the correct places in your project.
Replacing all your local references to CDN's, your code is working flawlessly: http://codepen.io/qvazzler/pen/vOaqXW
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="CSS.css">-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<!-- <script src="MyApp.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
</body>
</html>
A helpful thing to do in these cases is to open the Chrome developer tools (CTRL + SHIFT + I), get to the Console section and look at the error messages.
Link to guide on using DevTools: https://developer.chrome.com/devtools
If I were to actually answer your question on why it's not working, we'd have to see your file structure, but as it is common that js files are located in a folder separate from your html files, you'd have to add "../" to the beginning of your href's to access a parent folder.
Example:
[My Project]
jsfolder
- angular.js
- angular-material.js
cssfolder
- angular-material.css
- styles.css
html
- index.html
To access angular.js from your index.html, you'd have to write href="../jsfolder/angular.js"
I fixed your imports.
angular.module('MyApp', ['ngMaterial'])
.controller("MyController", function($scope) {
$scope.title1 = 'Lol';
});
.buttondemoBasicUsage section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px;
}
.buttondemoBasicUsage md-content {
margin-right: 7px;
}
.buttondemoBasicUsage section .md-button {
margin-top: 16px;
margin-bottom: 16px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
</body>
</html>
I suggest to use typescripts or a kind of that option, first steps are hard but later you ll be in better solution.
please dont make writing code pain and gain.
happy codings.
I'm setting 100% width and height to the div (map), but my map shows only half of the page. I would like to display the full map below the div container.
I am using bootstrap and esri JavaScript api to build the page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
<script>
dojo.require("esri.map");
function init() {
var map = new esri.Map("map",{
basemap:"topo",
center:[-95.45,29.80], //long, lat
zoom:10,
sliderStyle:"small"
});
}
dojo.ready(init);
</script>
<style>
#map {
height:100%;
width:100%;
margin:0;
padding:0;
}
</style>
</head>
<body class="claro">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project Name</a>
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
<div id="map" class="claro"></div>
</div><!-- /.navbar -->
</body>
</html>
Add this (to your external css file or inline style tag):
html body {
height: 100%;
min-height: 100%;
}
At bootstrap 3.0 twitter bootstrap adds a .container css class which overrides the map container. The result is that a max-width is set on the .map .container. Add this to override and make the map fill the complete width:
html body {
height: 100%;
min-height: 100%;
}
.map .container{
max-width: 100%;
}
try this :
#map{height:100%; min-height:100%;}
How does this slider work?
http://jqueryui.com/demos/slider
source given shows up nothing
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
<div class="demo">
<div id="slider"></div>
</div><!-- End demo -->
I did include jquery before adding this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
but it gives me
SCRIPT438: Object doesn't support property or method 'slider'
error.
This is what entire code looks like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<div class="demo">
<div id="slider"></div>
</div><!-- End demo -->
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</body>
</html>
What am I missing?
I did include jquery before adding this
You did include jQuery... but you are using jQuery ui plugin method- .slider() without referencing the ui plugin.
So that method slider is unknown to javascript,
Add the reference after the jQuery library:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
Update:
After too much time spent, I've found your problem, you're missing the JQuery ui css:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
JSFiddle DEMO
You should be using jQuery UI for the slider.
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"/>
Since it's a jQuery UI Slider, you are missing jQuery UI which needs to be included after jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>