I am trying to display spinner when the button is clicked. I had one working plunker and I am trying to implement it little bit of tweak. My Plunker is here. I referred this working Plunker but no luck. I know m missing something small here.
ng-class="{true: overlay}[madeCall]"
Ok both answers point correctly one error, but there is also a fault in logic.
In the plunker you copied it applies a class called .grey when it is true but in conjunction with the css, he has e.g: .grey .overlay, the result is the desired.
If you want to copy that exact logic you have to add the .grey class and also change your css.
e.g:
css:
.grey .overlay {
background-color: #e9e9e9;
/* display: none; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
and html:
<div ng-controller="mainCtrl" ng-class="{true: 'grey'}[madeCall]">
plunker
It should be:
ng-class="{overlay: madeCall}"
The syntax for ng-class is {className: Expression}, if the expression is truthy the class will be applied.
overlay should be there in quotes otherwise angular will lookup for overlay variable in scope.
ng-class="{true: 'overlay'}[madeCall]"
Demo Here
Related
i need to apply css to a field, but i don't know which elements the user want to change. I have a module where a user can create forms dinamically, creating fields and so on, and they can set styles too. They will write in the box all the stile they want, like : color: red; background-color: black...etc;
I found many questions about but all the answers require everytime to know the property to change, so my question is : Is possible in angular to pass to a field a variable that contain { property: value;...} and apply it dinamically?
Example of text written by user:
{color:red; background-color: white; border: red 2px solid; opacity: 0.3; position: absolute; top: 0; left: 0; width: 100%;height: 100%;
}
Example of the input field where i need to apply it:
<input matInput [type]="getInputType()" [formControlName]="field.Name" [readonly]="field.Readonly"
[required]="field.Required" [(ngModel)]="record[field.Name]" (ngModelChange)="onRecordValueChange()">
I've tryed [ngStyle]= variable but ngstyle seems requiring the property and then ou can bind a variable to it, but if i have to map all the possible variables in css it will be a wall of code... Hope someone can help me out with this tricky problem. Thanks in advance.
Update correct in the code
const keypar=b.replace(/['"]+/g, '').split(":")
To allow some like
style="{'color':'red'}"
You can create an object based in the string and use ngStyle
style="{color:red; background-color: white; border: red 2px solid; opacity: 0.3; position: absolute; top: 0;left: 0; width: 100%;height: 100%; }"
styleObj=(this.style.replace("{","").replace("}","")).split(";").reduce((a,b)=>{
const keypar=b.replace(/['"]+/g, '').split(":")
if (keypar.length>1)
a[keypar[0].trim()]=keypar[1].trim();
return a
},{})
<div [ngStyle]="styleObj">Hello</div>
NOTE: I choose use split instead of use a complex Rexepr to conver the string to a json object and use JSON.parse
stackblitz
I'm using in my AngularJS project md-tooltip.
I tried to set the position by CSS by this way:
<md-tooltip class="tooltip" hide-sm hide-xs show-gt-sm><span>{{item.title}}</span></md-tooltip>
and :
.tooltip {
position: relative;
right: 20px;
}
It doesn't work. Is it impossible to do it?
Thanks for help.
Is definitely not impossible. Seems is working on
Fiddle (example here)
just by setting the class.
.tooltip {
position: relative;
right: 20px;}
I would suggest you to use the props of the tooltip if you can ( mdTooltip ) tough.
If your code is still not working, probably something overwrite it. Or is just not working the way you expect it?
I would like to use something like this:
Codepen Demo
$('.marquee').marquee({
duplicated: true
});
.marquee {
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
Duplicated option for short length text:
<div class="marquee">jQuery marquee is the awesome</div>
But I need to set up starting position of this animation to left: 0; to see the text immediately. Do you know how to make it?
Thanks for help.
As Vitorino mentioned, there is already a fix for this on the documentation page for the plugin.
However, if you for some reason don't want to do that, you can make an inner wrapper on the text with a left value of 97%. It would be something like this:
.inner {
position: relative;
left: -97%;
}
http://codepen.io/anon/pen/BoXLxm
You must add the startVisible parameter to an object with a value of true.
$('.marquee').marquee({ duplicated: true, startVisible: true});
How would you write this to be SASS compliant?
.fader { display: inline-block; }
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}
Basically I'm just replicating this example of fading in one image over another (found here.)
His JFiddle example: http://jsfiddle.net/Xm2Be/3/
However his example is straight CSS, I'm working on a project in SASS and am not sure about how to correctly translate it.
My Code
Note in my example below, the img hover isn't working correctly (both images are showing up and no rollover fadein action happens)
My CodePen:
http://codepen.io/leongaban/pen/xnjso
I tried
.try-me img:last-child & .tryme img:last-of-type
But the : throws SASS compile errors, the code below works
.try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
However it spits out CSS which doesn't help me:
.container .home-content .try-me img last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
UPDATE: Working Codepen:
http://codepen.io/leongaban/pen/xnjso
Nesting is not a requirement with Sass. Don't feel obligated to do so if there's no need to break up the selectors.
.try-me img:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
If you are applying styles to the image and then specific styles to the last-of-type, then this what it would look like when you nest it:
.try-me img {
// styles
&:last-of-type {
position: absolute;
top: 0;
left: 0;
display: none;
}
}
Neither of the above worked for me, so.
last-of-type only plays nice with elements, you can select things with classes all you like but this gets handled by the elements. So say you have the following tree:
<div class="top-level">
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="somethingelse"></div>
</div>
To get to the last div with the class of middle, doesn't work using last-of-type.
My workaround was to simply change the type of element that somethingelse was
Hope it helps someone out, took me a while to figure that out.
Hey why don't you use only CSS? You could remove all the JS, I mean hover is support right back to ie6. I guessed that you know there is no hover event just active on tablets..
I mean you will need to set an area for the image.. But I find it use full, especially if you want an href.
http://codepen.io/Ne-Ne/pen/xlbck
Just my thoughts..
Here come my example (found some pretty photos on the internet for you): http://jsfiddle.net/xGPys/ (works on chrome only, if anyone finds why Firefox doesn't like it)
So the part that causes me trouble is there:
.imagepreview:hover a {
top: -61px;
height: 150px;
z-index: 1000;
}
What I want to achieve is: You should be able to pass you mouse on the whole column, and each image should open and close one after the other, right now, the opened photo covers the other ones, and so the :hover state is note removed from the <td>.
I could use a bit of Javascript but I'd prefer keeping it pure CSS.
Thanks !
Just set the pointer-events to none:
.imagepreview a {
/* ... other styles ... */
pointer-events: none;
}
.imagepreview:hover a {
top: -61px;
height: 150px;
z-index: 1000;
}
Here's your fiddle: http://jsfiddle.net/xGPys/1/
Warning: pointer-events is experimental. Use at your own discretion.