In my current app there are quite some complex calculations to do after $routeChangeSuccess before the new page is really fully shown. This causes a bit of "flickering" as the content changes position and size. I'm already preloading the needed JSON and images before the route changes (via resolve in the $routeProvider).
My idea to prevent this is to stop ngView from deleting the old content before the new one gets inserted. Instead I want to insert the new content with display:none set, so the newly compiled directives can execute their linking procedures while the old route content is still showing. After this is all finished, the old content would be deleted and the new content would be displayed which would happen instantly with no flickering.
Is there a way to do this? I didn't find any option in the docs or in google where you could define such a behaviour. The only option I see now is a custom build of ngRoute where I change the ngViewFactory to my needs. But I don't really like that idea as this will be stressful when I want to upgrade my angular version etc. Maybe there's a better way?
Related
So I have a very specific problem that presented itself recently (right before our planned launch day tomorrow) and I am not completely sure how to solve it. I have built our website of an HTML-template with my modest front-end skills and we are very pleased with it. However, I can't seem to solve this.
The problem:
I have a filter system that allows a user to filter articles that are presented on a page. A user can even fill in this filter on the home page, direct to the page with the articles and have the filter applied. However, if then the filter is broadened (less strict) and new articles present itself, the pictures do not show up. Found out this is the case because the flexslider behind it has to be initialized again which happens on a window load (e.g. when the window is resized). The function that controls the initialization of the flexslider is in an external js file and I am not sure whether I can call on it from my own custom.js file, so I am thinking of just calling a resize/reload window function to active it.
The question:
Can I run a resize window function (or something that activates the flexslider) without hindering user experience (more specifically, without ACTUALLY resizing/reloading the window)? I will run this on a change in the filter.
I know this is a very specific question but hopefully somebody can help me out.
Take care!
p.s. it would be ideal if I could run the actual function that loads the flexslider but this is located in an external js file.
EDIT:
Briefly some additional info. If I go straight to the article page, it has no filter active and thus shows all articles, if I then start flipping through the filter, all is good. It is however only if I arrive from the homepage with a set filter that the problems arise. You then arrive on the article page which shows only the articles that are within the boundaries, and when the filter is taken away it has problems loading the images of the new articles showing up. As if it had not loaded these because they were not open on window load the first time.
You can trigger a resize event by creating a new event and passing it into the dispatchEvent command on window. There's a nice guide here. You'll want the type of event to be resize, since that's what it's listening for.
window.dispatchEvent(new Event('resize'))
This will work for events that were added via jQuery as well as events added via addEventListener.
I managed to solve it after all by delaying the function that drops the filter values into my inputs so it loads in all images initially before applying the filter. It happens at such speed it's hardly noticeable.
Also, I did try to initiate a window resize function, it did work without actually resizing anything, but unfortunately the images did not load in properly (overlap and such).
Anyway, it has been solved. Thanks for all the input!
The default behavior or angularjs/ionic is to remove the DOM element when the route changed/left the page and replace it with the new DOM elm/run the controller again if you navigate back to the previous page.
Is there a way to hide the DOM elm associated to the route instead of removing it completely?
My use case is: my IONIC app landing page/index takes some time to compute/render and when the user navigate to detailed view and come back to the index page it build it again from scratch, because the DOM was removed and it needs to build again, which is a waist of time so rather than removing the DOM elm when the route changed hide it instead and if the user come back to the previous route, show it. this will definitely improve the app performance.
Looking forward to your response.
Thanks in advance
Abod
Use tabs in your project: http://ionicframework.com/docs/api/directive/ionNavView/
There is a lot of stuff to understand but this feature works great.
Basicly it allows you to change view without removing DOM (it stores it in memory). When you come back to previous DOM it's just loaded from memory.
I am currently using backbone to render a view. I have set an interval to update and pull the latest json, it then appends the changes and updates the corresponding DOM elements.
The problem I seem to be facing is that whenever it empties the container and then re-populates it with the updated info, it jumps to the top of the page. Is there something I can change in my view to make sure it doesnt jump after I append?
You can override your view's render() method, or you can register an event handler for the appropriate change event to handle an incremental render. Without examples, it's hard to be more specific.
I think what's happening is the content is momentarily removed, making the page shorter. The browser window is pushed up for a tiny moment, then the new content is appended, making the page longer again.
To test, try making your browser window very short and triggering the update. If the page doesn't jump, this is your issue.
I'm dealing with the same thing myself right now. My solution is to read the height of the parent element before removal, set it, then clear the set height when the new content is appended.
The way DerbyJS (http://derbyjs.com) seems to work at the moment is that it replaces everything in the body tag of the document whenever you click a link.
Is there anyway to say use the template, but replace the content inside #main-content with that instead of the whole body?
Navigation on the left is fixed and doesn't need the benefits of realtime interaction.
Why this is an issue is needing to run some Javascript on the page load to set the size of some containers based on the size of a users browser window, and once I click a link, this setup gets wiped and recreated, and of course, the Javascript doesn't run again, because the document itself hasn't refreshed, just the body.
This would also allow me to write nicer jQuery bindings for the most part, $('element').click(, rather than $('html').on('click','element', ...
Any thoughts, or is this a step too far for this framework at this point in time?
P.S. As I'm only just getting started with Derby, and realtime frameworks in general, maybe what I'm trying to do isn't best practice anyway? I chose Derby because I like the UX part of initial render on the server, then the rest in the client, but sharing routers, which reduces the duplication of code. Open to any better ways of achieving this.
There is no way to rerender part of body on page reload. Just whole body.
You can use app.enter hook to run js code after every page render.
No need to use jQuery bindings, use Derby bindings
I fully agree with Vladimir's answer, just trying to add something to it.
It should be possible to re-render part of the UI through transitional routes (http://derbyjs.com/#routes). In your case it seems like app.enter is the way to go though.
I am currently using CKEditor to be able to edit and to view documents in my SQL database. If I change the content of the document in the sql database it should automatically update the CKEditor instance with the new text. My only problem is that it flashes when ever it updates (ie: it goes blank and then updates to the new text). Does anyone know of a way to make it a smother transition. I'm also using JQuery so I'm not sure if there is anything that could be used there to make a smooth transition to the new text.
CKEDITOR.instances.content.setData("data");
CKEDITOR.instance.content.setData("new data");
The change from data to new data will have a quick bit of lag.
There's no way to avoid some slight flickering when setting data in framed (based on wysiwygarea plugin) editor instance. This is because the entire contents of the iframe containing your work must be re-created. This is nothing like a piece of cake and I hardly think we can bypass this thing.
I'd recommend you to play with element.setHtml( html ) on editable though:
CKEDITOR.instances.editor1.editable().setHtml( '<p>FooBar</p>' );
This is not a valid method for setting editor contents in any way because it bypasses internal filtering, processing and stuff. Yet it may work formay you if you're careful.
P.S. You'll probably also want to cache editor1.editable() object to speed-up things.
There are quite some core developers of CKEditor active on stack
overflow.
Yep. We are ;)
It seems that the screen flickers because the page is reloading an iframe within the editor. By using the divarea plugin for CKEditor I can get rid of the flickering. The only problem now is that the CKEditor.readOnly property no longer works...