I'm trying to resize a div with a background image (left) and a variable height description (right), but can't get it to work. Here's the fiddle
. I tried several things with/without zepto/jQuery/document.getElementById ... nothing works.
.directive('resize', function () {
return {
restrict: 'A',
scope: {},
link: function(scope, elem, attrs) {
elem.height(400);
}
};
})
You can use jQuery:
jQuery(elem).height(400);
Fiddle
Not too ideal though :(
If you don't use jQuery, AngularJS implements only a lite version of the framework, jqLite, which doesn't have a height() method. You can see the documentation for the list of the available functions in jqLite.
In your case, for instance, you can simply do:
element.css('height', '400px');
Fiddle
Notice that, as pointed out in the comment, your fiddle wasn't functional. I've corrected that problem.
Related
I'm trying to provide dynamic styling to a MatHeaderCell instance like this:
[ngStyle]="styleHeaderCell(c)"
I've created a demo here.
I can see that:
styleHeaderCell(c)
Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?
It appears to be a syntax issue in your styles helper function.
Give this a try.
public styles: any = {
ID: {
'min-width': '4rem',
'background-color': 'red'
}
};
STACKBLITZ
https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts
so in the back of the 'discover meteor' book they explain how to do page transitions. i've got it working, however it causes problems with the loading of javascript functions and variables on other pages that its animating into. it seems they're not ready or simply don't exist at the time the page is routed.
Template.layout.onRendered(function() {
this.find('.pos-rel')._uihooks = {
insertElement: function(node, next) {
$(node).hide().insertBefore(next)
.delay(200)
.velocity("transition.slideUpIn", 1000)
},
removeElement: function(node) {
$(node).velocity({
opacity: 0,
},
{
duration: 100,
complete: function() {
$(this).remove();
}
});
}
}
});
if i remove the above code then all my javascript variables and functions work correctly. does anyone have another working solution to page transitions using velocity.js ? i did find this one but its a year old and i couldn't get it to work at all, it just makes the content where '{> yield}' is go blank :(
Just a note for asking questions on stack overflow: "causes problems with the loading of javascript functions and variables" is pretty vague. Its best to give more specifics.
But anyways, you said here that you're using isotope to render items in a grid. I'm assuming you're calling $elements.isotope() within a Template[name].onRendered callback.
This is probably the issue because its trying to compute and rearrange into a grid the elements while they're hidden. Using display: none actually removed the elements, thus isotope can't compute the sizes, etc. for the layout. Try this:
insertElement: function(node, next) {
$(node).css("opacity", 0).insertBefore(next)
.delay(200)
.velocity("transition.slideUpIn", {duration:1000, display:null})
},
opacity: 0 should do what you're looking for. It will make them transparent without removing them from the transition.slideUpIn should animate opacity so you're good there.
Also, velocity transitions mess with the display property. Setting display: null in the animation options prevents it from setting the display to block or whatever it wants to do. This may or may not be necessary, but I pretty much always use it.
You could use:
onAfterAction
onBeforeAction
. The solution should be something like this:
animateContentOut = function() {
$('#content').css('display', 'none');
this.next();
}
fadeContentIn = function() {
$('#content').velocity('transition.fadeIn',1000);
}
Router.onBeforeAction(animateContentOut)
Router.onAfterAction(fadeContentIn)
I'm new to protractor and I want to check some css properties. I'm doing it like this (CoffeeScript):
element.all(By.css(".my-picture")).then (pictures) ->
for picture in pictures
picture.getCssValue("border-radius").then (value) ->
console.log value
The above code does not print anything. I can get properties like "display" or "color", but no "border-radius".
According to this documentation, it seems that getCssValue just works with CSS2 specification. And according to CSS2Properties doc, border-radius does not exists!
Now, I realize that border-radius is a CSS3 property. But the question remains, how can I test it using protractor?
element.all(by.css('.my-picture')).then(function (pictures) {
for (picture in pictures) {
browser.executeScript(function (domPicture) {
var style = window.getComputedStyle(domPicture);
return style.getPropertyValue('border-radius');
}, picture.getWebElement()).then(function (borderRadius) {
console.log(borderRadius);
});
}
});
Is there a good way to add and remove elements without reflowing the page and causing all the elements to jitter about?
The angular directives ng-show and ng-hide don't preserve layout.
and bootstrap classes don't either
<div class="show">...</div>
<div class="hidden">...</div>
Is there a good way to add and remove elements without reflowing the page and causing all the elements to jitter about?
ng-hide and ng-show uses display:none
You need to add new property in CSS for visibility : hidden
.element-hidden{
visibility: hidden;
}
And then provide the condition to ng directive - ng-class
e.g.
ng-class="{element-hidden : hideBox == true}"
where hideBox == true is the condition you want to check..
You're looking for the CSS visibility attribute which makes an item invisible, but still allows the element to take up space on the DOM. There's no built-in Angular directive which will do this so you'll need to roll your own.
myApp.directive("visiblityOn", function(){
return{
restrict: "A",
link: function(scope, element){
scope.$watch('visibilityFlag', function(){
element[0].style.visibility = scope.visibilityFlag ? "visible" : "hidden";
});
}
}
});
and a corresponding controller that will work with your directive:
myApp.controller("myController", function($scope){
$scope.visibilityFlag = true;
$scope.changeVisibility = function(){
$scope.visibilityFlag = !$scope.visibilityFlag;
};
});
Example
#RahulPatil's answer is correct but somewhat inelegant. I would suggest to keep using ng-show/ng-hide because it's easier and more readable (i.e. keeps using the same pattern), and add an override in CSS for you particular items:
.keepInFlow.ng-hide {
dislpay: block!important;
visibility: hidden;
}
<div class="keepInFlow" ng-show="show">..</div>
Angular's documentation also mentions overriding ng-hide
I am trying to create a directive that will animate the height of the element.
The problem is that i am calculating the height of the element based on the data, so i can't create in advance a class that i will add with animate.
I need to add the height property with a different value each time
this is my current directive:
.directive('graph', ['$document', '$animate', function ($document, $animate) {
return {
restrict: 'A',
link: function (scope, element, attributes) {
var newClass = {height: attributes['height']}
$animate.addClass(element, newClass);
}
};
}]);
but this won't work. what should be the solution?
what if i will use instead:
element.css({height: newClass});
this will work but then why do i have the $animate service if i can do it as simple as this?
try this:
jQuery(element).animate({height: "-=" + value + "px"}, function() {...});