I'm new with VueJS and I don't find a solution to my issue.
I use a jquery plugin, zoomslider that is load in main.js inside the mounted function.
My website is multi-page and i use the router plugin to switch around, but when I back on the page where i use zoomslider,
the plugin don't reload, i think the problem is because zoomslider is loaded when DOM is ready, how can reload the plugin?
Or better where is the best practice for loading globally an external plugin?
You can do $(yourElement).zoomSlider() to load the plugin on a new element!
You can select one element, or multiple ones, inside the $ function.
Related
The very unpleasant situation arises when the page loads before some parts (fonts, necessary css files) are loaded.
I see on some sites, they hide some parts before the page components loads.
For example:
I don't want to put a preloader in the page. Is there just a tactic or any other solution for the problem?
These pages use a javascript framework such Angular, React, or Vue.
They use something called a lifecycle hook. I'm most familiar with Vue.js, but there are different ones depending on when they are called/what is loaded.
They more than likely use a before mounted & mounted lifecycle hook which performs actions until an item is fully loaded, then performs different actions.
If you don't use a library, and are looking to - I'd recommend Vue.js ecause you don't have to install/learn node.js to use it on a page, only need a CDN, and the link I used below will show you how to prevent your page elements from being viewed before they are loaded.
https://v3.vuejs.org/api/options-lifecycle-hooks.html
https://angular.io/guide/lifecycle-hooks
https://reactjs.org/docs/state-and-lifecycle.html
We use a closed source knowledge base solution currently, and the WYSIWYG to create articles is TinyMCE (looks like it may be a modified/simplified).
They do not currently allow changing it at all (adding plugins, etc, unless you can inject plugins somehow).
I do have full access to the header and can use javascript, so the question is, is there a way to remove the existing tinymce instance and replace it with my own on page load?
...is there a way to remove the existing tinymce instance and replace
it with my own on page load?
Indeed there is but it may be more work than you want to take on.
If you cannot modify the code that the app uses to load TinyMCE the best you could do would be to...
Wait for the page to load and TinyMCE to initialize
Manually remove TinyMCE from the page using the remove() API
Initialize a new TinyMCE instance on that same textarea using the init() API
Remove API: https://www.tinymce.com/docs/api/tinymce/root_tinymce/#remove
Init API: https://www.tinymce.com/docs/api/tinymce/root_tinymce/#init
You can play with these APIs on http://fiddle.tinymce.com/ to see how they work before you try to mess with the app's codebase. This should get you started: http://fiddle.tinymce.com/kpgaab
I'm trying to use the Bootstrap 3 Datepicker plugin (http://eonasdan.github.io/bootstrap-datetimepicker/) with Angular 4.0.
I've included the necessary JS and CSS (and a custom JS script calling the plugin) in my angular-cli.json file and the script loads great on the first page that I open but stops working as soon as I route to another component.
I figure that I need a way to call $('.datetime-picker').datetimepicker() every time I route to the new component. How would I do that?
this is a different solution try using primeNg google it.
I am using fullPage.js in an angularJs application on homepage only and no other page / route should get affected, In order to achieve this I am calling destroy on locationChangeSuccess event.
Am I doing it right or could there be any better way to do this?
I guess this is a more generic question. Something like "using jquery plugin only in the home page when using angular.js".
I'm no very familiarized with angular.js, but you probably can initialize the plugin from the angular side only when certain element exist in the DOM.
Something like:
if($('#fullpage').length){
$('#fullpage').fullpage();
}
I'm developing a PHPFox Module where I use a jQuery Plugin to paginate a serie of images. When I access the module the plugin doesn't work, but the rest of the js code have no problem. The only code that doesn't work is which is placed inside the $(document).ready event. If I refresh the page the plugin starts to work.
I think the problem is caused for the cache of the CMS, because the DOM isn't reloaded when I load the Module. I tried to change de $(document).ready for window.onload but I've the same problem.
Could somebody help me?
Finally I've find the solution:
To use jQuery functions on load in phpfox you must use the sintax $Behaviour.onLoadEvents = function(){rest of the code} insted of the traditional and standar $(document).ready