I'm using ngFx for my animations in an angular app (and new to the world of angular)
ngFX is great - seems very easy to use, but I want to improve how it deals with resizing the containing element.
Easy to see below, upon removal of the image the containing div instantly resizes - I want that to be smooth, i.e. it takes 1 sec to resize instead of that instant jump.
Not sure where to start fixing this issue.
Thanks
<div class="well well-lg">
<h1 style="margin-bottom: 20px">NG SHOW</h1>
<button style="margin-bottom: 20px" type="button" class="btn btn-primary btn-sm" ng-click="showdog = !showdog">TOGGLE</button>
<br>
<img class="fx-fade-up-big" ng-show="showdog" src="http://vignette4.wikia.nocookie.net/simpsons/images/7/77/200px-SantasLittleHelper.png/revision/20090712224020" >
</div>
Related
I have a pretty basic request regarding archilogic with the 3d.io appeditor.
I need to add the floor plan button in the lower left corner to this space:
https://spaces.archilogic.com/model/Panoraman/hvaj2t1s?modelResourceId=375c42b6-dd27-4e13-94f9-a822b4d31f15
Does anybody know I must add for the button to appear and how to set the view point?
Much appreciated.
It looks like that particular icon is not in the default appcreator css. You can add it by customizing the camera mode menu a little bit, e.g. like this:
<div class="camera-mode">
<div class="btn camera active"
onclick="document.querySelector('.waypoints').classList.toggle('hide'), this.classList.toggle('active')">
</div>
<div class="btn bird"
id="btn-bird"
onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:7}, rotation:{x:-60}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}), this.classList.add('active')">
</div>
<div class="btn person active"
id="btn-person"
onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:1.6}, rotation:{x:0}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}), this.classList.add('active')">
</div>
<div class="btn floorplan"
id="btn-floorplan"
onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:10}, rotation:{x:-90}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}), this.classList.add('active')">
</div>
</div>
</div>
and adding some css for an SVG icon
.btn.floorplan {
background-image:url(https://spaces-static.archilogic.com/build/180201-164834-458aa7c/e3d/ui/icon-floorplan-black.svg)
}
.btn.floorplan.active {
background-image:url(https://spaces-static.archilogic.com/build/180201-164834-458aa7c/e3d/ui/icon-floorplan-blue.svg)
}
Demo here
For optimal results, adjust the position parameter to your model and host the icon-floorplan-black.svg and icon-floorplan-blue.svg icons somewhere, that link might not stay up forever
I am trying to dynamically populate a Bootstrap 4 carousel via an ngFor iterating over an array of strings that contain the image urls. The carousel is not displaying the images, though looking at the markup generated everything looks fine. I'm guessing that the component is rendering before Angular is adding in the divs for each slide, as the "carousel slide" div has a height of 0px, which I think is what is hiding the slides themselves.
Behind-the-scenes I have an exposed property named "primarySlideshowImages" containing an array of urls:
ngOnInit() {
this.primarySlideshowImages = this.photoService.getImageLists(ImageListKeys.BrochureProductsPrimary);
}
The HTML markup looks like this:
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div *ngFor="let image of primarySlideshowImages; let i = index" class="carousel-item {{ (i == 0) ? 'active' : ''}}">
<img class="d-block img-fluid w-100" [src]="image" >
</div>
</div>
<a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
FYI, I have tested this by hardcoding rather than dynamically adding the images, and everything renders just fine. I think it's a timing thing, but given my relative unfamiliarity with this technology I just don't know how to even search for a solution at this point.
Thank you in advance for your assistance. I do recognize that there are other components and approaches I could use - the ng-bootstrap components, open-source components, purchasable ones, etc. I'd like to try to figure this out using the bootstrap components because I'm pretty new at this technology and hate to jump to an easy solution if there is something I just don't understand that I should be doing. Thanks again for any help you may offer.
It may be that the div containing the image has a width and/or height of the div containing the image is/are 0.
Try setting a style on them. e.g .carousel-item {width:200px; height:200px;}
Also, try checking if the images are being retrieved by the browser using the Network tab on the dev tools.
I would like to animate a md-button when I add a md-progress-circular inside it.
<div class="layout-row layout-align-center-center" ng-init="label = true">
<ng-button class="btn btn-default-rb center-block rb-margin-top-a"
ng-click="label = !label"
layout="row"
style="background-color: #FF8800;">
ng-button
<md-progress-circular ng-if="!label"
md-mode="indeterminate"
class="md-hue-2 rb-margin-left-a"
md-diameter="20px"></md-progress-circular>
</ng-button>
</div>
You can see the example here:
http://plnkr.co/edit/LkAQ92OztNgbEjztHvCS?p=preview
My idea is to show this progress when I post some data. The progress bar is showed, but I would like to show an animation while the button is resized, like the ladda expand right (http://lab.hakim.se/ladda/).
Could you help me?
I'm using Angular Bootstrap and want to have my tooltips trigger using a "hover" on desktop and "click" on mobile devices which can't hover but also have the tooltips close if you click outside the tooltip. I set it to tooltip-trigger="hover outsideClick" since "outsideClick" is now a supported trigger (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), however this breaks the tooltip completely so even the hover doesn't work.
<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span>
Is there any way to make these work together?
If I just use tooltip-trigger="hover click" it's decent, but on mobile I can only close the tooltip by clicking the item again, versus being able to click elsewhere on the page to close it.
Have you tried tooltip-trigger="mouseenter outsideClick"?
It seems likehover is not mentioned in the doc.
I think what you're looking for is the tooltip-trigger="hover focus", the focus will act as the outsideClick, closing the tooltip on the next click that the user makes. I've personally used this and it works great both for mobile and desktop.
It actually defaults to hover focus so you shouldn't even have to add them manually.
If there is any chance you can use the native bootstrap library? As it supports what you are looking for by default.
I have created a jsfiddle demonstrating this(please view it on your mobile device to see the tootlips working as expected)
HTML:
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div>
JS:
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
You can read up on it here, as a side note, you have to manually enable the tooltip
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
I've created a demo in Plunker
, which I use angular-ui collaspe to work on bootstrap panel,
but it seems the ui animation not work well, when I click the title bar to collaspe, the panel-body will animate to its default padding 15px, then disappear immediately. And if I remove the padding of panel-body, the animation looks smoothly. So how can I remain the padding and fix the animation issue?
You should put your panel-body inside another tag with panel-collapse class, like this:
<div class="panel-collapse" collapse="collaspe1">
<div class="panel-body">
<div class="group-item" ng-repeat="group in recommendedGroups">
<span>{{group.name}}</span>
<button type="button" class="btn btn-danger btn-xs pull-right">Add</button>
</div>
</div>
</div>
See updated demo. I got this clue from markup for Accordion.