I'm trying to overlay a loading spinner using the Teradata / covalent UI kit, as shown in this example, however it simply won't show, no matter what I try.
I've put together a single use example here, any suggestions welcome.
It is important to load the SCSS styles for the loading spinner to appear. I recreated your example on StackBlitz and was able to have the spinner load correctly. The Angular-CLI might not be compiling your theme.scss because it is in the assets folder.
Related
On my working project, the frontend is not entirely an SPA, as well not defining all the components in the template engine, but image loading is inconsistent between the document and vue. I am having trouble coming up with an appropriate solution with loading the document images when the vue components are loading and displaying.
We need to display everything at once when vue displays components.
One solution I can think of is to apply the source links in data-src in all the img elements. When vue is ready to display the components, the value from data-src would be applied to the src attribute and the browser starts to download the image files.
But there are other issues with CSS loading images as well and I'm not sure how I would control the loading there. I'm assuming I would have to define outside of CSS and use JS for this?
2 other solutions I can think of is to just hide the page until vue has completed rendering, but this would increase the time to see the page. Or use placeholder media in place of loading photos.
I'm using Ionic with Angular to develop an App. I intruduced dynamic theming adding two .scss files into my theme folder. I've got app.scss where I define only the layout of my components without colors. All colors are in the theme-*.scss files. To apply a theme I use a class over <ion-nav> element into my app.html. Something like this:
<div [class]="selectedTheme">
<ion-nav [root]="rootPage" ></ion-nav>
</div>
The selectedTheme is a string that assume the name of my theme so when I change it with an event such (click) or (ionChange) I can change the colours of my app.
A file theme-*.scss has the following structure:
.dark-theme {
ion-header {
//colors
}
ion-content {
//colors
}
}
This way works like a charm, but I've got a little issue I want to avoid. I set the default theme in constructor of app-components.ts file, before the famous platform.ready().then(...) that hides the splashscreen. My issue is that when the splashscreen hides I can see my app with its layout but without the correct theme applied. I see all white backgrounds and all black colors for a small amount of time, then the default theme is applied. I'm importing my custom themes in variables.scss, I tried to import them also in app.scss but the behaviour remain the same. It seem that before import the themes it applies the layout in app.scss and only after it applies the imported theme with all its colours. Someone has already see something like this?
I think that your issue is caused by timing of first paint which is an attribute on browsers. The webview where ionic runs can be consider as a sort of browser. So, same issue occurs.
why-first-paint-is-happening-before-domcontentloaded is a great explanation related to your question.
This page talks about first paint can start before DOM is fully loaded.
Especially, the below cited paragraph from the link describes same phenomenon of your app.
E.g. the parser obviously cannot emit Element nodes before processing
all of its attributes, but it can emit the node while still processing
its child tree. And the renderer may render the node without its
children. And it may be rendered with incomplete styles only to
undergo a reflow later, e.g. when javascript inserts another style
sheet or simply because the child nodes which have yet to be inserted
affect how it will be rendered.
In conclusion, you can not guarantee DOM is loaded before painting. So, I think that practical solution is hiding your splash screen a little bit later.
I have this 2-page website which uses angularjs. I like to be able to load page 1 on a certain position by clicking a link on page 2.
Normally, without angular you would give a div an ID like <div id="test"> and put a link on page2 test
On my angular website I use duScroll library to create smooth scrolling.
As a concept I've created the following example website: http://jdenuijl.com/test/#chapter2
this link will open the correct location and smoothscrolls when clicking the links at the top of the page.
On my production website the following link https://escapist.nl/nl/#gallery gets rewritten to https://escapist.nl/nl/#!#gallery and it doesn't open on the correct position.
I've read a lot of questions on stackoverflow about $hashprefix, $locationProvider, $location but I don't see why it's working on my test site and not on my production site. I use some other angularjs functionalities on the production website but I can't find what is causing the rewrite.
What is causing the rewrite and the failure of the normal behaviour?
Thank you very much!
Aleksey Solovey put me in the right direction. I was using the angular-google-analytics module which I found out was loading ngRoute which caused the problem.
animated.css not working properly in materialized css. I have follow all the steps in mentioned in github (i.e) added animated.css file in header and also jquery library.
But The all animate.css effects are loaded in first time. I can't show the animation when the window reached the scroll.
Here is my output: http://54.164.65.208/sequoia/
I am currently trying to make a transition between pages on a website.
Eg: If a user were on www.example.com/About and they clicked on a link to go to www.example.com/Contact, the about page would fly out to the left, whilst the contact page would fly in from the right.
So far all I could find online was how to do this on the same page with hashtags. But I want to do this with separate pages.
is it possible?
if not is there an alternative and how to do it?
UPDATE
Ok so I did a bit more research and I found this thing called barba.js(http://barbajs.org) that seemed to do what I'm looking for. So I installed the js script file followed the instructions on the site...and it didn't work! All it did was not load my pages correctly and didn't do what it was supposed to do. Anyone know how I can use this(or if there is a better option than barba.js).
-Thanks!
I don't think you can do that with pure html & js, as you load the entire page each time you click on a link if it's not an anchor.
However you can load just a part of the page, and so apply a transition of your choice with Ajax and js
But in the end, you won't really switch from page to page, but only load the parts that you want to update. This is approximately how modern front end frameworks like Angular, React,... are working
Here is a pure js example http://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first
Here is a jQuery example http://www.w3schools.com/jquery/ajax_ajax.asp
You are talking about is page transition and it normally happens in SPA (Single Page Application) where there is no hard refresh.
If you are not working in a SPA application I don't think you can do that where you are moving from one page to another by link/button click and a hard refresh happens.
You can choose angularjs one of the famous spa/mvc framework in jvascript and us ui-router to move from one page to another. there are many other you can explore.