Develop Reference

Is it possible to have a plugin triggered on any page load without having to re initialize it on every view loaded

I do not have any code to display as code would not help towards my question. I am wondering if there is a advanced JavaScript technique that can allow my plugin be called and ran against all items needed but without having to initialize it on every view in mb. Now the layout shared method is not what I mean. So fir example if I placed said plugin in a global scope in one he file and did a regular
$(document).ready(call plugin unit here)
Would that then be bound to every page and view so I do not need it to be added on every view or is thee some kind of event I can bind to when i initialize my plugin within the global.js file so it will be ran on any view or HTML page that the user goes to working on its elements? Kind of how using the older method event binding ".live" would handle all current items and future ones.
I am trying to find this out or find out if possible how to handle it. My plugin I'm testing with is proprietary so cannot post code here but uses the regular concept of a each loop on on elements affected. Hopefully my question has been stated with a clear goal.
Now understanding that it needs to run against any new target items that may not have been loaded prior but may come down the pipe a few page navigations away I'm not sure I can do this. Unless there is some kind of event in the global JavaScript scope I can bind to and during initialization of my plugin within the one section of code will then cause it to run against all items on what ever page is loaded. Please no rude downing with "we need to see code" as that would not affect an answer here and as mentioned the plugin cannot be publically displayed. Please helpful comments only and sorry if over complicating this and overlooking the answer. Thanks in advance.

JS/Jquery: Initiate window resize without actually resizing

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!

SharePoint web part automatic refresh javascript event?

Background: I'm modifying a SharePoint list web part using JSLink. I'm also adding jQuery and jQuery-UI to make the list items display as the jQuery Accordion. It works well, except that I also need to implement the ajax automatic refresh on the web part to refresh the content every 60 seconds.
Problem: When the web part refreshes, the jquery code reverts - the items no longer show in accordion mode. I can open the browser console and type the jquery code manually, e.g., $(".selector").accordion(); and it works fine. This makes me think that I need to find a way to call the jquery code after each web part automatic refresh completes.
Question: So, is there a javascript event or way to find out when an automatic refresh triggers on my webpart so that I can call again my jquery accordion after? Is there something else I could be missing?
Thanks for your time!

The answer was to use this code:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyFunction);
function MyFunction() {
//do something here;
}
Credit to #Thriggle
References:
https://msdn.microsoft.com/en-us/library/bb311028.aspx
https://www.daniweb.com/programming/web-development/threads/247263/ajax-postback-after-endrequest

I believe you can insert your own code or function calls into the callback chain by overriding the _onFormSubmit method of the current instance of the Sys.WebForms.PageRequestManager object.
Sys.WebForms.PageRequestManager.getInstance()._onFormSubmit = function(i){
Sys.WebForms.PageRequestManager.prototype._onFormSubmit.call(this,i);
alert("Refreshing the data..."); // -- your code or function call here
};
When I ran the above code in the F12 console on a page with a list view that had a 25-second refresh, I started seeing the "Refreshing the data..." pop-up every 25-seconds, but I haven't tested it with anything more complicated than that.

CKEDITOR.inline first load

CKEDITOR is giving me some hard time with the first load, i use:
CKEDITOR.inline
on the first load it takes about 2 seconds to load, on these two seconds if the user edit the div's content, when the CKEDITOR finally loads it restores it to before the edit :\ is there a way to fix it or maybe read-only the text untill the CKEDITOR loads? Right now i use opacity0 untill ckeditor is ready but it is a cheap hack and doesnt look good.
on the first load, the toolbar starts at the most left side of the screen, which on the other loads doesnt happen when it appears perfectly above the div being eddited.
I cant figure out how on the ckeditor inline demo they did it perfectly.

The question is a little too vague to really grasp any single underlying question. I would post this as a comment, but it is too long, so I'll just go ahead and add as answer. What do you mean by preloading the editor? Do you want to stop the user from editing content or do you want to load the editor before loading the HTML body content? Both are basically the same as "use opacity0 until ckeditor is ready but it is a cheap hack and doesn't look good.", what is the difference?
I wasn't talking about server performance in my comment, I was talking about client performance. There are many, many things you could try
Build a prettier fake preloader; for example mask the site with an overlay until CKE is ready
Defer DOM creation until CKEDITOR.instanceready or whatever event is usable for you. By this I mean you can just create a pretty loading animation and get the actual editable content with JS, this will look like a preloader too
Enable content editable only in document.ready or in some other later event, that might help
Monitor the network, see how long CKE requests load and if that is acceptable for you
Check that you are not using the source version of CKE
Check that caching works as expected
Minimize the load by removing any and all plugins you don't need
All of that is just for question number 1. As for "on the first load, the toolbar starts at the most left side of the screen, which on the other loads doesn't happen when it appears perfectly above the div being edited.", could we get a sample or how to reproduce this or a URL where this happens or even a screenshot? Based on that it is very hard to reproduce.

Page elements don't visibly update during load

I'm probably missing something really obvious here...
I'm showing a dialog box with progress bar during page load. The dialog and progress bar are both jQueryUI widgets. There are a couple of phases of loading - the page makes a load of jQuery $.get() requests to load resources, then on the $(document).ajaxStop() event, does things with those resources. I'm updating the progress bar and some status text throughout this process.
The issue is that as soon as the ajaxStop event fires, updates stop. The code works nicely during resource loading, but then freezes and I don't see any of the updates during processing. If I put a breakpoint on a post-ajaxStop update in Chrome and step through the code, the screen updates correctly so I know that the code works.
Can anyone explain why everything updates nicely during my AJAX loading phase, but then stops on the ajaxStop event? Is there an easy way to make updates continue afterwards?
Thanks!

Several hours of searching later, the following blog pointed me in the right direction:
There's a jQuery extension described in the entry which allows you to define two functions, one to compute and one to update the UI. It schedules them alternately using the setTimeout function.
I've had to rewrite my code in something akin to continuation passing style so that each function schedules its continuation to run using setTimeout. This returns control to the browser for long enough for the screen to be updated.
This feels like a bit of a hack though to get round browser/Javascript limitations. Anyone know of a better way?