I need to create a component which will add preloader (image with semi-transparent background) to all components, which loading or fetching data from service. I have some routable blocks on page. And I need to show preloader over the block, which working in the moment. Which of events should I handle? And how to make it globaly? Thank you.
I think you could start by creating a custom directive for e.g <my-loader></my-loader> and in that component you could add your Preloader, images etc then by simply adding it to any of your component view by including it in directive[]. Hope this answers as the question itself is quite abstract , some snippet would definitely help.
Related
Is there a way to specify the ion-loading container in ionic? The backdrop always blocks the whole app.
I have a few content parts in my SPA. Now when I want to update a specific part of the view, I would like to show ion-loading only in that specific part and not block the whole app.
Thanks for any help!
Add this component where you need
<ion-spinner></ion-spinner>
you can use ion loading which you can customize with loading message as well. refer the official documentation. you can see many other options such as skeleton-text, progress bar and spinner as well.
I'm using react-native and for a component I need to replace the default image of the SliderIOS component with a custom one. Is there any way of accomplishing this or should I create a custom slider component? (I don't have any experience in this.)
I have already tried embedding an image as a child of the slider as well as the vice-versa approach, however non of them have worked.
Looking at the source code for RCTSliderManager, we can see that it only exposes value, maximumValue, minimumValue, minimumTrackTintColor and maximumTrackTintColor. That means like it looks like you're out of luck. You could use the RCTSlider and RCTSliderManager files as a starting point for a custom component, or you could create a pull request to expose setThumbImage on UISlider.
I have created a pull request fixing this issue which hopefully gets accepted.
I am trying to learn and understand the capabilities of UI-router with Angular 1.3.15.
I am trying to set up an application which has many views that have a header and footer directive. It also has a smaller number of views that do not need this setup, with the loaded view taking up the entire page.
Therefore, it seems I should handle this divergence "one level down", as in my diagram below. In the past, I have worked on ui-router apps with the index.html coded with the header/footer directives and a single ui-view for the other pages to load into. This time I am trying to get it correct form the start. Opinions and advice welcome.
I'm not sure what you want to know.
Yeah, you should handle the difference in templates the way you suggested: the root template should contain only the elements which appear on all states. Elements which appear on some states should go on those states templates, in the template of a parent state (if it makes sense), or in directives that you reuse in the various templates.
Instead of directives, you might want to use named views if your templates have some peatures in common, but the differences between them are not inside a single DOM element. For example, maybe all your pages have a small toolbar on top that always has some buttons, but other buttons depend on the state you are in. You can place that constant part of the toolbar in the root template, together with a <div ui-view="toolbar"></div>. The states would then define a view named toolbar with a template with the buttons they want to add.
You could make a directive for that toolbar with all the global buttons in its template and use <ng-transclude> to add the custom buttons at each state's template, but using named views seems cleaner.
My issue is that after changing views using routing, the jquery components in my page doesn´t get rendered. I have customized ui components like dropdowns that are not being processed. I saw this answer: Angular.js App with routing.. Cannot get jquery ui layout plugin working on 2nd view
But I can´t figure out how to make it work in my case. It seems that when angular renders the template, any but angularjs code is processed.
Thanks so much in advance.
Code: http://plnkr.co/1mwMcsqMxWGTheoQmJ22
In the example you've provided, you're not actually loading the file with the jQuery code in it (jqcode.js).
The real problem however, as you can see in this version of your example, is that the document ready event is executed before your template has been loaded and rendered. This means that the element your jQuery code is attempting to target does't exist when you try to manipulate it.
You should really look into Angular directives which is where you are advised to place any DOM manipulation logic within an Angular project:
If you have to perform your own manual DOM manipulation, encapsulate
the presentation logic in directives.
From the Angular documentation for controllers.
I've been trying for weeks to build a navigation sidebar like these images:
I'm using twitter bootstrap, however, even though their getbootstrap.com/components has a very good looking navigation sidebar, there is no such component in their library and it is so much pain to build one. Therefore, I resorted to using jquery in my attempt to build one like the Tommy Hilfiger's global site.
Tommy Hilfiger's Global Site
However, I'm new with javascript and css... they are my weakpoints... especially if they are minified :( and I'm stuck at trying to make the arrow marker and have it move along (animating) and always pointing to the current section. I managed to animate the page scrolling though, and my WIP so far is here:
WIP - Twitter Bootstrap Navigation Sidebar
Is there any open source components (or preferably bootstrap ones) to achieve that section indicator animation?
I'm so confused with my scripts that are getting messier, so open source component is highly desireble, however, any input on how to achieve it (with script example please) will also be appreciated.. Thank you very much in advance!
Check out ScrollSpy, the component exist on bootstrap itself:
bootstrap scrollspy
extracted from:
https://stackoverflow.com/a/14366014/474330
So you need to use the scroll spy activate event described here:
http://twitter.github.com/bootstrap/javascript.html#scrollspy
Basically you need some code like so:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
Here is a working example:
http://jsfiddle.net/hajpoj/f2z6u/3/
please ignore the fact that it starts at the bottom... not sure if that a unrelated or related bug, but the main point is you can see how the activate event works