Can you Load Plugins inline in Chartjs 4? - javascript

I have been trying to use Chart JS 4 and its custom plugin API. I can register my plugin globally but not inline.
According to the Chart JS 4 docs you can add plugins globally, using registration while other plugins can be used inline because they do not require registration.
WARNING
inline plugins are not registered. Some plugins require registering,
i.e. can't be used inline.
This sounds vague, and I couldn't find any good information on what that means. In Chart JS 2.x.x I could add a plugin inline but I needed some more features so I had to update to version 4. If I cannot add a plugin inline I guess I will just have to make sure that I turn the plugin off on charts that don't require it. Any suggestions would be greatly appreciated!
Edit:
The solution seemed the be that I had a typo somewhere in my code when comparing it to this sample as pointed out by the helpful comments below. I honestly do not know which part of my code had a typo I just know that it had to because when I used the sample code and worked from there everything worked perfectly.

Related

Which version of bootstrap i have to use in grouping inputs?

I am new to bootstrap and hence i am working with the help W3schools.com. Now i am modifying a website that have been already made with bootstrap version 3. I have created another html for testing and verifying my code in bootstrap. In the test html, i have included bootstrap.min.css downloaded from here.
I was trying to do input grouping as in w3schools tutorial and it works in my test html and hence i decided to do it in my official website. But when i included the same code in official website the alignment differs and its not working.
When i look into the css folder of official website, instead of bootstrap.min.css it was given that style.min.css. I have asked the former developer of the same site and he said that bootstrap used is version3.
I didn't understand what really differ? what is style.min.css and bootstrap.min.css
Can any one please clarify me?

Jsfiddle with external libs, Font Awesome not rendering, isotope does not toggle layout

Jslint says everything is fine, and I am able to add the external libs. Also code works fine in the IDE/browser, not in Jsfiddle
using Jsfiddle I am trying to debug Isotope toggle size and layout in JS fiddle, but I am unable to get the external libs to render.
Can you help, and correct me?
- if the issue is the order of libs, or what options I selected, is it the semi-colon infront of the JS, I thought this is normally good/safe coding in JS..
Here is the code in JsFiddle, it works in the IDE not JsFiddle
I am using the following font awesome, bootstrap, isotope, ba-bounce, jquery 1.11.2 (JSfiddle only shows 1.11.0)
I'm not sure where you were trying to load your resources from, but you need to provide a URL to the css or js file you want to include. These are usually easy to find hosted on a cdn. I have reconstructed your fiddle using cdn links to the external resources:
jsfiddle: http://jsfiddle.net/voveson/popzfey4/5/

What is the difference between these two plunkers? (angularjs, angular-ui)

Somewhere in my attempt to use the wonderful ui-bootstrap project in my own current project I am going terribly wrong. I've used ui-bootstrap with no issues in the past and cannot see where I am making a mistake. The following punkers illustrate my issue and what it ought to look like.
Link to functional popover directive plunker from angular ui site.
Link to non-functional replication of popover directive that I put together.
Where am I going wrong? I've tried stripping everything down to the barebones and I'm not having any luck in determining what is causing this issue.
For what it's worth this issue applies to any directive that requires a layover of other DOM elements in its functionality (datepicker, tooltip, typeahead, etc.).
It seems the issue lies in the specific files I've included, but being as the versions are the same it doesn't explain to me why including them as I have (as opposed to how they are included in the working example) should make any difference. Any help/advice in this matter would be greatly appreciated.
Your bootstrap css file has a number of issues (including looking truncated and thus missing a number of key css properties you were trying to use).
Using a good version of the Bootstrap css file fixes everything. Here's a new version of your plunker that works: http://plnkr.co/edit/VTjb2S?p=preview
Note the new "new.min.css" which I added- it's just a good copy of the bootstrap minified css. The only change I made is to use that css file instead of the one originally in the plunker.
Or, alternatively, using the CDN version of the bootstrap css also fixes the issues:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

Why do bootstrap dropdowns only work when bootstrap-responsive.css is also included?

For a test case, I created a test project with the exact same code from Hero Demo and then removed the responsive CSS code.
Why is it that dropdowns do not work unless responsive is also included? I do not wish to use responsive in my project.
There must be something else wrong in your usage. Here's a very basic fiddle (markup copied directly from the linked demo) using just jquery.js, bootstrap-dropdown.js, bootstrap.css.
Make sure you've loaded the scripts before calling $('.dropdown-toggle').dropdown();, and that you're using the proper selector according to the way you've structured your dropdown!
As #crowjonah mentions in a comment above, dropdowns are not dependent on responsive.css. You should verify that you have jquery.js included in your page before bootstrap.js. I have a page that is not including bootstrap-responsive.css and the dropdowns work just fine. Also you should not need to include $('.dropdown-toggle').dropdown() if you are using the correct css tags as described in the demo. The only features that are opt-in are the tooltips and popovers.
Hope this helps, but if not please update your question with more code example of how you have bootstrap implemented.

Javascript errors in my Joomla website

my website is marutiindia.in. My website was working fine until I installed a module named lof k2 scroller. The website was showing jquery errors and the module at the lower half of the template was not working. But I managed to get the module to work by adding the following code at the start of the JS file which was showing error:
if(jQuery){
jQuery.noConflict();
}
But, now I am getting other JS errors which I am not able to understand.
Below is the link for the screenshot of errors:
Screenshot
I don't know what these errors mean.
Also I have one more plugin to use for my website which also causes scroller to not work.
Please help me resolve these errors.
Thanks.
Joomla uses Mootools, which also use the $ function name. in order to avoid this, your plugins either:
must use jQuery instead of $. For example, instead of $('div') to get divs, use jQuery('div')
if you really want to use $, wrap the jQuery code in a closure
(function($){
//code that uses `$`
}(jQuery))
make sure the plugins are extending from jQuery and not $.

Categories

Resources