Sorry if this is a bit of a newby question. I'm trying to create a login page that has a background image, while the rest of my pages do not. I've used ng-style but I can't get the property to update on page changes.
in my index.html:
<body ng-app="myApp" ng-style="bodyStyle" ng-controller="bodyController">
//content
</body
bodycontroller:
var image="http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg";
if ($location.path() === '/login') {
$scope.bodyStyle = {background: "url(" + image + ") no-repeat center center fixed"};
} else{
$scope.bodyStyle={background: ""}
}
Obviously this doesn't work because the function is only called once. I've tried using rootScope, but I can't seem to use rootScope properties in ng-style (and everywhere i look, people are advising against using rootScope for this purpose). How do I create a dynamic background? Also i'd prefer not to use a controller on my body tag, if possible.
update
The main problem i'm having is that the background image does not update when changing paths. The image is set in bodycontroller, and when logging in and changing paths it is not changed.
Per suggestion I could write a service, I've used them before but only through getters and setters, so I assume i can create a service that sends a call to a controller? Looking something like this:
<body ng-app="myApp" ng-style="bodyStyle" ng-controller="bodyController">
//content
</body
bodycontroller
var image=??;
$scope.bodyStyle = {background: "url(" + image + ") no-repeat center
some service
.service('backgroundService', function (image) {
var backgroundImage = image
// somhow set bodycontroller image?
});
and then somehow call the service when route is changed? I haven't found a way to inject services into my router config, which is what I think i would need for that.
So i figured out an easy way to do this with some help.
in app.js add this:
.run(function ($rootScope, $location) {
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
$rootScope.bodyClass = $location.path().replace('/', '') + '-page';
});
});
and change index to:
<body ng-app="myApp" ng-class="bodyClass">
and Css:
.login-page {
background: url("someImage") no-repeat center center fixed;
}
IMO it would be easier to just toggle an ng-class based on location. So you could do something like -
if ($location.path() === '/login') {
$scope.isLogin = true;
} else{
$scope.isLogin = false;
}
then on the html
<body ng-app="myApp" ng-class="{'customBgClass' : isLogin }" ng-controller="bodyController">
Then just set everything you want on that css class
.customBgClass {
background: url("http://momentumbooks.com.au/wp-content/uploads/2013/06/space.jpg") no-repeat ce;ter center fixed;
}
Related
I'd like to check if an image width has more than 400px I'd like this image to get full div width. if image is less than 400px just print it in its normal size.
any ideas how to do this?
<div id="volta">
<img src="/img/volta.jpg">
</div>
#volta{
width:500px;
}
As far as I know, this does not exist in CSS. What you should do instead is use classes.
Define some CSS class that applies the styles you want:
.long_width {
background: blue;
}
Then you would use Javascript to check the width of the image. You don't need jQuery to do this you can do it in vanilla Javascript (unless you already have jQuery imported and need it for other things). Maybe something like this:
let elm = document.querySelector('[src="/img/volta.jpg]"');
let width = window.getComputedStyle(elm).getPropertyValue('width');
And then you would use Javascript to add and remove styles accordingly:
if (width > 400) {
elm.classList.add("long_width");
}
else {
elm.classList.remove("long_width");
}
The specific answer to your question depends on what your intentions are. But to keep your code simple, you should use Javascript to handle the logic and not depend on CSS selectors for things this complicated. Instead, create a CSS class that contains the styles you need, and then use Javascript to apply it based on the size of the user uploaded image.
Additionally, if the user uploads the image, you should load it into memory and check its attributes in memory rather than by depending on a DOM element. Something like:
let img = new Image();
img.src = "{data URL of img}"
You will need javascript / jQuery to work. Something like this:
$('img').each(function(){
if($(this).width() > 400){
$(this).css('width', '100%');
}
});
Here is also working jquery example.
Apply an id to the image, and with jquery check its width
If it is greather than 400px modify his width or add a class that does the same.
Example
$(document).ready(function(){
if($("#image").width() > 400){
$("#image").css("width", "100%");
}
else{
$("#image").css("width", "10px");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "image" src = "https://pm1.narvii.com/6919/98f453834b5d87a6c92118da9c24fe98e1784f6ar1-637-358v2_hq.jpg"/>
You can do it like FlokiTheFisherman (with %), or you can use "wv" instead of "%".
I recommend using vw.
img[width='400'] {
width: 100%;
}
I have been struggling to figure out the best way to dynamically change the background-image attribute in a number of Angular 2 components.
In the following example, I am attempting to set the background-image of a div to an #Input value using [ngStyle] directive:
import {Component, Input} from '#angular/core';
import { User } from '../models';
// exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app)
export type UserInput = User;
#Component({
selector: 'profile-sidenav',
styles: [ `
.profile-image {
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
width: 100px;
height: 100px;
}
`],
template: `
<div class="profile-image" [ngStyle]="{ 'background-image': url({{image}})">
<h3>{{ username }}</h3>
`
})
export class ProfileSidenav {
#Input() user: UserInput;
blankImage: string = '../assets/.../camera.png';
// utilizing "getters" to keep templates clean in 'dumb' components (https://github.com/ngrx/example-app)
get username() {
return this.user.username;
}
get image() {
if (!this.user.image) { return this.cameraImage;
} else { return this.user.image; }
}
I don't think the issue is with the observable, since username displays and doing something like <img *ngIf="image" src="{{ image }}"> renders the image. I have to access the background-image attribute because apparently that is the best way to make a circular image, but in general would like to know how to do this.
EDIT:
My original [ngStyle] declaration had unnecessary curly brackets (ngStyle is a directive that can take a variable), and was missing string tags around url() and image. The correct way is (as answered below) is:
<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>`.
As stated in the original edit, a solution can also be achieved with the Renderer class in Angular 2. I have yet to do it but think there should be a way with setElementStylesor something like that. I will try to post an example but would love if someone else showed me (and others) how to for the time being.
I think that you should use something like that:
<div class="profile-image"
[ngStyle]="{ 'background-image': 'url(' + image + ')'}">
where image is a property of your component.
See this question:
How to add background-image using ngStyle (angular2)?
You don't need to use NgStyle. You can also do this:
[style.background-image]="'url(' + image + ')'"
See more at How to add background-image using ngStyle (angular2)?
redfox05's answer works well since there is no space in the image URL, but by a bit change in code we can make it work again:
<div style.background-image="url('{{image}}')"></div>"
The main reason is simple, you declared a global variable as blankImage but in the template you called image instead of blankImage.
Your ts code variable blankImage
blankImage: string = '../assets/.../camera.png';
Your template code variable image
<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>
that's wrong
I think you should add:
<div class="profile-image" [ngStyle]="{ 'backgroundImage': url({{image}})">
Regards
I am using the ionic starter menubar template. I would like to change the header background color of each page. I currently have:
<ion-view view-title="Search">
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
I tried:
<ion-view view-title="Search" class="bar bar-header bar-assertive">
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
But it does not work at all (content is not rendered). The header documentation does not help me. What is the correct way to do this?
Some ways to do this:
You could add the ion-nav-bar to each view.
<ion-view view-title="Page 1">
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-content>
...
</ion-content>
</ion-view>
Codepen example
You could also update the background-color (and any other properties) by using ng-style
Main navbar:
<ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
CSS:
.nav-bar-block, .bar {
background-color: inherit !important;
}
Controller:
$scope.$on('$ionicView.beforeEnter', function() {
$rootScope.viewColor = 'green';
});
Codepen example
Could not find a clean solution for this, but one hack might be to use the $stateChangeStart event and set the class name manually.
angular.module('starter')
.run(function ($rootScope) {
var element;
$rootScope.$on('$stateChangeStart', function (event, next) {
if (next.name) {
element = angular.element(document.querySelectorAll('ion-header-bar'));
switch(next.name) {
case 'tab.chats':
element.removeClass('bar-positive');
element.removeClass('bar-balanced');
element.addClass('bar-calm');
break;
case 'tab.dash':
element.removeClass('bar-calm');
element.removeClass('bar-balanced');
element.addClass('bar-positive');
break;
default :
element.removeClass('bar-calm');
element.removeClass('bar-positive');
element.addClass('bar-balanced');
}
}
});
});
fiddle
EDIT
The idea is same for sidebar template,
Updated fiddle
Notice the line
<ion-nav-bar class="bar-positive">
in menu.html template, it denotes the base header color class.
but subsequent changes to pages i.e states header color needs to be changed manually in $stateChangeStart event,
code:
.run(function ($rootScope) {
var element;
$rootScope.$on('$stateChangeStart', function (event, next) {
if (next.name) {
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
console.log(element);
switch(next.name) {
case 'app.search':
element.removeClass('bar-positive');
element.removeClass('bar-energized');
element.removeClass('bar-dark');
element.addClass('bar-assertive');
break;
case 'app.browse':
element.removeClass('bar-calm');
element.removeClass('bar-assertive');
element.removeClass('bar-dark');
element.addClass('bar-energized');
break;
default :
element.removeClass('bar-positive');
element.removeClass('bar-energized');
element.removeClass('bar-assertive');
element.addClass('bar-dark');
}
}
});
});
here the state name is checked to see which page is activating ex. app.search
then according to requirement specific color class is assigned removing other color classes.
ionic color options
hope this helps.
if you are using different states and each state has a different controller than just have a $scope variable like $scope.stateone = "true" etc. Then on your ion-nav-bar use ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}". ng-class takes classes and an expression, whichever expression is true that is the class that is assigned. you can use ng-class with any boolean expression. this is how you can have a different color on each page.
I modified the solution of #shakib to fit my needs, in my case the user sets the theme by clicking the app logo and thus the bar color should change. If this is your case you don't need to do the switch case because you want to change all views
$rootScope.$on("$stateChangeStart", function (event, toState) {
var element;
if (toState.name){
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
if (debugMode) console.log(element);
// I get the bar-class from my localStorage where I keep the user settings
var saved_bar_class = $localStorage.get('bar-class','bar-calm');
element.removeClass('bar-pink');
element.removeClass('bar-calm');
element.addClass(saved_bar_class);
// Here We could use a Switch Case on toState.name to put a different color to each state
}
});
Also when the user clicks the app logo I want to immediately change the bar color in order to give feedback to the user of what that button do. The above code won't do that because we haven't changed state yet, to fix this just add this code to your 'change theme' function
$scope.changeAppTheme = function () {
var element;
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
// some code to select the theme
element.removeClass('bar-pink');
element.removeClass('bar-calm');
element.addClass('bar-pink');
// some other code
};
In this case I just have two colors, the ionic calm and a pink one that I defined
Hope this helps someone
We got it working in CSS with:
.title.title-center.header-item {
background-color: black;
margin: 0px;
}
This means that we just refer to the Angular generated header classes directly with this CSS. Hope this helps!
Try using the following code:
<ion-view>
<ion-header-bar class="bar-assertive">
<h1 class="title">Search</h1>
</ion-header-bar>
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
You can override $bar-stable-text color (taken from _variables.scss from ionic lib)
For example, in your scss change
$bar-stable-text: green !default;
If you want to change the ion-nav-bar this here works like a charm:
1 . Create a main controller to take care of your index page and all views within it.
2. Add this function to the controller:
$scope.setNavColor = function(color){
for(var i =0; i < document.getElementsByTagName("ion-header-bar").length; i++){
classNames = document.getElementsByTagName("ion-header-bar")[i].className;
classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color );
document.getElementsByTagName("ion-header-bar")[i].className = classNames;
}
}
3 . add on-select to your ion-tab tab so it will call the function whenever your tab is chosen:
<ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>
4 . add on-deselect to you ion-tab too if you want the color to go back to some value when you leave.
5 . Have fun!
//add these lines in your style.css file under /www/css/ yoyr project directory
.title.title-center.header-item {
background-color:#30393A;//#F38023!important; // for bg color
margin:0px!important;
margin-left:0px!important;
color: #ffffff!important;
text-align: center !important;
width: 100%;
}
put these lines in your style.css under /www/css/ directory of your ionic project
.title.title-center.header-item {
background-color:#4a87ee;//#F38023!important; // for bg color
margin:0px!important;
margin-left:0px!important;
color: #ffffff!important;
text-align: center !important;
width: 100%;
}
If you're using scss within your app, you can create your own custom bar class and use ionic's bar mixins in it.
$bar-custom-bg: #ccc;
$bar-custom-border: #eee;
$bar-custom-text: #fff;
$bar-custom-active-border: darken($bar-custom-border, 10%);
$bar-custom-active-bg: darken($bar-custom-bg, 10%);
.bar {
&.bar-custom {
#include bar-style($bar-custom-bg, $bar-custom-border, $bar-custom-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-custom-border, $bar-custom-border 50%, transparent 50%);
}
.button {
#include button-style($bar-custom-bg, $bar-custom-border, $bar-custom-active-bg, $bar-custom-active-border, $bar-custom-text);
#include button-clear(#fff, $bar-title-font-size);
}
}
}
After defining your class, you can use your new custom bar class with ion-nav-bar directive.
<ion-nav-bar class="bar-custom">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
Is there a way to hide a whole div if part of it is empty? For example if "dd" is empty as shown below can I hide the whole class "test" so the keyword Restrictions does not show either. I tried .test dd:empty { display: none; } but this does not work. thanks!
<div class="test"><dt>Restrictions:</dt>
<dd></dd></div>
I don't think there's any easy way to do what you're talking about with just CSS. Better to test it server-side if you can. But if you can't here's some JS that will do the job.
<script type="text/javascript">
// handles multiple dt/dd pairs per div and hides them each conditionally
function hideIfEmpty() {
// get all the elements with class test
var els = document.getElementsByTagName('dl');
// for every 'test' div we find, go through and hide the appropriate elements
Array.prototype.map.call(els, function(el) {
var children = el.childNodes;
var ddEmpty = false;
for(var i = children.length - 1; i >= 0; i--) {
if(children[i].tagName === 'DD' && !children[i].innerHTML.trim()) {
ddEmpty = true;
} else if(children[i].tagName === 'DT') {
if(ddEmpty) {
children[i].style.display = 'none';
}
// reset the flag
ddEmpty = false;
}
}
});
}
window.addEventListener('load', hideIfEmpty);
</script>
<div class="test">
<div style="clear: both;"></div>
<dl>
<dt>Restrictions:</dt>
<dd></dd>
<dt>Other Restrictions:</dt>
<dd>Since I have content, I won't be hidden.</dd>
</dl>
</div>
Just a fair warning: the code uses some functions that may not exist in older IE, such as Array.prototype.map, String.prototype.trim, and addEventListener. There are polyfills available for these and you could also write your own pretty easily (or just do it with a for loop instead).
CSS alone can't do that. Either, you need a javascript to retrieve empty elements and hide their parents, or your CMS applies special CSS classes if there's no content.
Put as an answer as requested by #Barett.
You could update your CSS to be
.test{
display: none;
color: transparent;
}
This would make the text transparent too, but display:none should hide it anyway.
To make the div with the id test ONLY show when the dd tag is EMPTY, and you can use jQuery, try the following JavaScript along with the CSS:
if($("dd").html().length ==0)
{show();
}
Note: this solution requires jQuery, which is a JavaScript library.
so here is my question:
lets say I have a page with 3 buttons. each contains a unique pattern as as background. I want to change the entire page background image once I click/ hover on one of the buttons.
what I need is something similar to http://subtlepatterns.com/
I dont need a stop preview option, as long as the background image change again when I select a different button.
how can I do that?
also, if its not possible, this will also work for me:
change the color of a DIV (instead of the entire page background) whenever I click/ hover on one of the buttons.
have 3 different body class in ur CSS sheet:
body.class1 {
background: ...;
}
body.class2 {
background: ...;
}
body.class3 {
background: ...;
}
use jQuery to dynamic change body class
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1');
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2');
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3');
});
then finally put a id in each button to jQuery find this in DOM:
<a id="btn1">bg1</a>
<a id="btn2">bg2</a>
<a id="btn3">bg3</a>
Using just javascript you could do something like this
function changeBg(color) {
var color = '#' + color;
document.body.style.background = color;
}
http://jsfiddle.net/62SXu/
You can also change this to pass it the path to whatever your image is
does have to be done with CSS? it seems alot easier method to do with jQuery. something like this would work:
<style>
.button1 {background:url(url to PIC);}
</style>
$(document).ready(function (){
$(".onClick").click(function (){
var ID = $(this).attr("id");
$(body).removeClass();
$(body).addClass(ID);
})
})
<div class = "onClick" id="button1"> ... </div>
<div class = "onClick" id="button2"> ... </div>
<div class = "onClick" id="button3"> ... </div>