Right now I have a background image URL hard-coded into CSS. I'd like to dynamically choose a background image using logic in AngularJS. Here is what I currently have:
HTML
<div class="offer-detail-image-div"><div>
CSS
.offer-detail-image-div {
position: relative;
display: block;
overflow: hidden;
max-width: 800px;
min-height: 450px;
min-width: 700px;
margin-right: auto;
margin-left: auto;
padding-right: 25px;
padding-left: 25px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-radius: 5px;
background-image: url('/assets/images/118k2d049mjbql83.jpg');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
As you can see, the background image in the CSS references a specific file location. I want to be able to programmatically determine the location of the image URL. I really don't know where to begin. I do not know JQuery. Thank you.
You can use ng-style to dynamically change a CSS class property using AngularJS.
Hope this ng-style example will help you to understand the concept at least.
More information for ngStyle
var myApp = angular.module('myApp', []);
myApp.controller("myAppCtrl", ["$scope", function($scope) {
$scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];
$scope.style = function(value) {
return { "background-color": value };
}
}]);
ul{
list-style-type: none;
color: #fff;
}
li{
padding: 10px;
text-align: center;
}
.original{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myAppCtrl">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li ng-repeat="color in colors">
<h4 class="original" ng-style="style(color)"> {{ color }}</h4>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Edit-1
You can change the background-image: URL by following way.
$scope.style = function(value) {
return { 'background-image': 'url(' + value+')' };
}
You can use ng-class : documation.
If you want to do it in your directive check directive - attr : attr.
You can use [ngStyle] directly. It's a map, so you can directly address one of its elements like so: [ngStyle.CSS_PROPERTY_NAME]
For example:
<div class="offer-detail-image-div"
[ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>
Also, for serving assets, Angular has the bypassSecurityTrustStyle utility function that can come in handy when serving up assets dynamically.
enter the size in textbox you can see box changes height and width
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Change the value of the input field:</p>
<div ng-app="" >
<input ng-model="myCol" type="textbox">
<div style="background-color:red; width:{{myCol}}px; height:{{myCol}}px;"> </div>
</div>
</body>
</html>
Related
How can I extend the color green up to bottom? And how can I move the CRUD in left too
So as you can see it can't fill the page entirely.
Here's my code in VueJS
<template>
<div class="container-fluid">
<h1>CRUD</h1>
<div class="my-form col-xs-1">
<b-card class="box">
<b-form-group id="input-group-1">
<b-form-input
id="input-1"
required
placeholder="Username"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2">
<b-form-input
id="input-2"
type="password"
required
placeholder="Password"
></b-form-input>
</b-form-group>
<div class="btn">
<b-button variant="primary" >Login</b-button>
<b-button variant="success" #click="$router.push('/register')">Register</b-button>
</div>
</b-card>
</div>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
.container-fluid {
background-color: green;
height: 100%;
}
.my-form {
display: block;
margin-top: 120px;
margin-bottom: 120px;
}
.box {
padding: 10px;
margin-bottom: 20px;
}
.btn {
margin: 5px;
}
</style>
What is my mistake with this? I tried using flex a while ago but didn't understand why it always fits the content to itself.
By the way sorry for my bad English.
THanks
just write in your body tag it will solve your problem
bgcolor="green"
Use CSS to get the background color changed, and ensure the body (document) is at least 100% of the viewport height :
body {
background-color: green;
min-height: 100vh;
}
To align "CRUD" to the left, use the Bootstrap utility class "text-left":
<h1 class="text-left">CRUD</h1>
https://getbootstrap.com/docs/4.3/utilities/text/
https://bootstrap-vue.js.org/docs/reference/utility-classes
Hey I create Ember application , And I try to set Sticky Footer.
I try to do this by this tutorial Sticky Footer On CSS-Tricks , Cause it's work for me once.
But with Ember its dosen't work
My css:
.mainFooter {
height:100px;
color:white;
background-color: #0c2635;
text-align:center;
}
.wrapper {
min-height: 100%;
margin-bottom: -100px;
}
.wrapper:after {
content: "";
display: block;
}
.mainFooter, .wrapper:after {
height: 100px;
}
My HTML:
<footer class="mainFooter">
SOME TEXT
</footer>
As I said, it's dosent work.
I watch the source code via the Inspector and I saw that Ember added its own wrapper to content the I put in the application.hbs file, this wrapper have a class named ember-view so I try to do:
.ember-view {
min-height: 100%;
}
But it's dosent work either, the footer displayed in the middle of the page.
Someone maybe try this and successid?
I would like to know about a solution to this problem.
I don't know how to fake an Ember app in jsfiddle/codeopen so I upload the app to my server, url: http://drawyourgif.pe.hu/dist/
EDIT
According to the solution that kumkanillam sugest I did so:
Application.hbs:
{{outlet "modal"}}
{{partial "header"}}
<div id="gif" class="wrapper">
{{outlet}}
</div>
{{partial "footer"}}
app.js
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
rootElement: '#gif',
Resolver
});
And I get this error in the console:
ember.debug.js:43272Uncaught TypeError: Cannot read property 'tagName' of undefined
What I did wrong?
.ember-view will be included for all ember component by default so it's not good to apply css property for this class.
there may be many ways but the below should help.
You can wrap your application.hbs to render inside your page-wrap div.
for this you need to include the below line in
index.html
<div id="app-name" class="wrapper">
{{content-for "body"}}
</div>
application.hbs
<h1> Content </h1>
{{outlet}}
<div id="footer">
<p>I'm the Sticky Footer. inside application.hbs</p>
</div>
Configure rootElement in app.js. that will force entire app to include it in app-name div.
app.js
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
rootElement: '#app-name',
Resolver
});
app.css
#wrapper {
min-height: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 50px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
}
Final Update:
You don't need to change anything in app.js. just look at the sample twiddle. I think this will help you
SAMPLE TWIDDLE
Here is a solution that uses flexbox. You may not want to use flexbox because you're unfamiliar with it, but I'll submit this answer for later google searches.
Here's a codepen with very little content in the main body: http://codepen.io/anon/pen/KgXgjV
Here's the same css with much more content in the main area: http://codepen.io/anon/pen/dpVpBK
Here is an example of why position: absolute doesn't work: https://ember-twiddle.com/f620502b8172f4181c9d58503e02e39c?openFiles=templates.application.hbs%2C
HTML
<html>
<body>
<div id="root" class="ember-application">
<div id="ember332" class="ember-view">
<div class='main-content'>
<h1>Welcome to Ember Twiddle</h1>
<br />
<p>
this page has very little content
</p>
</div>
<div id="footer">
<p>I'm the Sticky Footer. inside application.hbs</p>
</div>
</div>
</div>
</body>
</html>
CSS
/* this is just to reset codepen */
/* probably not necessary on ember */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* end reset */
html, body, #root {
height: 100%;
}
.ember-view {
display: flex;
flex-direction: column;
min-height: 100vh;
background: lightblue;
}
.main-content {
flex: 1;
}
#footer {
width: 100%;
height: 50px;
background-color: grey;
}
I am working on a popup window using ngDialog. Here is some code:
<style>
.ngdialog.dialogforpopup .ngdialog-content
{
width : 1100px;
margin-top:-100px;
padding-top:10px;
}
</style>
Template
<div style="height:800px;width:1040px;padding-left:5px;padding-top:5px;
padding-right:5px"
</div>
<div class="ngdialog-buttons" style="margin-top:10px">
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="cancel()">Cancel</button>
<button type="button" class="ngdialog-button ngdialog-button-primary"
ng-click="save()">Save</button>
</div>
Directive
ngDialog.open({
template: 'editor.html',
controller: 'editorController',
className: 'ngdialog-theme-default dialogforpopup',
closeByDocument: false,
disableAnimation: true
});
I have two questions.
How can center my popup on the screen? Currently I am using margin-top:-100px;
Is it possible to size ngDialog automatically to its content?
Thanks
One can center ngdialog by setting "table-like" styles:
.ngdialog{
padding:0 !important;
}
.ngdialog-content {
padding: 0 !important;
background: transparent !important;
display: table; /*table-like styles for vertical centering*/
width: 100% !important;
height:100%;
}
.ngdialog-holder {
display: table-cell;
vertical-align: middle;
width: 100%;
height:100%;
}
.ngdialog-content > .ngdialog-close{
display:none; /*hide original close button*/
}
.my-dialog{
width:400px;
background:#fff;
border:1px solid #000;
margin:0 auto; /*center dialog horizontally*/
position: relative;
}
Also one need to wrap content of dialog with ".ngdialog-holder" and ".my-dialog" blocks. And finally place ".ngdialog-close" button inside of it.
<div class="ngdialog-holder">
<div class="my-dialog">
Dialog content goes here
<div class="ngdialog-close"></div>
</div>
</div>
Here is live example: ngdialog plunk
I downloaded ngDialog package using bower. so ngDilaog related CSS and JS files are in bower_components.
I added the following CSS and JS files to my html page.
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog.css">
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-default.css">
<link rel="stylesheet" href="../bower_components/ng-dialog/css/ngDialog-theme-plain.css">
<script src="../bower_components/ng-dialog/js/ngDialog.js"></script>
In my own JS file I am opening the dialog in the following way:
ngDialog.open({ template : 'dialog' ,scope : $scope , className: 'ngdialog-theme-default', plain: false,
showClose: true,
closeByDocument: true,
closeByEscape: true,
appendTo: false});
here is the html code:
<script type="text/ng-template" id='dialog'>
<div class="ngdialog-message">
Hello!!
</div>
</script>
With the above changes I am able to show the pop up on the center of the screen.
can use of the following class for pop up.
className: 'ngdialog-theme-plain'
className: 'ngdialog-theme-default'
I hope this will help!
I have the following configuration in a simple html file:
* {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
margin: 0;
}
section {
display: block;
width: 100%;
min-height: 100%;
padding: 1em
}
.b1 {
background: #2AC56D
}
.b2 {
background: #fae10c
}
.b3 {
background: #03a9f4
}
<section class="b1">1
</section>
<section class="b2">2
</section>
<section class="b3">3
</section>
Then I try to use AngularJS Routing in the following way: the section elements go into a template called template.html like this:
<section class="b1">1
</section>
<section class="b2">2
</section>
<section class="b3">3
</section>
And I add to the main file the AngularJS, the ng-route dependencies and the following script like this:
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'template.html'
}).otherwise({
redirectTo: '/'
});
});
</script>
</head>
<body data-ng-app="app">
<div data-ng-view>
</div>
</body>
It is working on the scripting part, but the section elements are no longer full height and look like this.
What is really the issue and, more important, how can I correct it? What I really need is to have some div's or section's at least full screen height.
Thank you.
Hmmm, To make height: 100%; work properly, you need to set in its parent div too.
Suppose this html:
<div id="main">
<section>1</section>
</div>
Then just applying 100% height in section won't work. You need to set fixed height for the parent element. So, use:
#main{
height: 100%;
}
You already set 100% height in html,body tag that's good.
So, in your case, apply like this:
div[data-ng-view]{
height: 100%;
}
I'm trying to animate the height of an element after a class has been applied, here's the simplified code:
HTML
<div class="section">
<div class="panel">
Click
<div class="panel-content">
Some content...
</div>
</div>
</div>
CSS
.section {
position: relative;
width: 500px;
height: 200px;
margin: 100px auto;
background: #ccc;
}
.panel {
width: 65%;
position: absolute;
left: 0;
bottom: 0;
}
.toggle {
display: inline-block;
height: 15px;
background: #ddd;
}
.panel-content {
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.active .panel-content {
max-height: 9999px;
}
JS
$(function() {
$('.toggle').on('click', function (e) {
e.preventDefault();
$(this).closest('.panel').toggleClass('active');
});
});
When I click the .toggle link an active class is set on the .panel element to animate the .panel-content height, however when the class is first added the content is shown without animation and when it's removed the element takes one second (the transition's duration) to start animating. You can see a live demo here: http://codepen.io/javiervd/pen/bLhBa
I tried to play with the position and overflow properties as well but I couldn't make it work, maybe there's another way of achieving the same effect?
Thanks in advance.
You need to do a transition when something happens. This isn't what you want, but let me show you something:
.pannel-content{
height:0;
}
.pannel-content:hover{
height:50px; transition:height 2s;
}
This is how transition works. You have not created an action. There is no click Pseudo Class, and you don't want to effect the same element anyways. Try using jQuery, like.
<html>
<head>
<style type='text/css'>
.active .pannel-content{
display:none; height:9999px;
}
</style>
</head>
<body>
<div class='section'>
<div class='panel'>
<a href='#' class='toggle'>Click</a>
<div class='panel-content'>
Some content...
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript'>
$('.toggle').click(function(){
$('.active .pannel-content').show('slow');
});
</script>
</body>
</html>
You could also use jQuery's .animate() method. Of course I would recommend that you use declair a DOCTYPE and use <meta> tags. Also you should use external CSS, as it would be cached in your users Browser memory.
Visit http://api.jquery.com/show/ and http://api.jquery.com/animate/ for details.