I'm using snipcart to add cart service to my website. However I can't get it to show lables on the form and I'm unable to figure out why.
Does anyone know where I'm going wrong?
I'm using Test API key, is that why? or is there somthing else I'm missing?
{
resolve: 'gatsby-plugin-snipcart',
options: {
apiKey: 'YOUR_SNIPCART_KEY'
}
}
This is generally caused by a conflict between your website's CSS and Snipcart's CSS.
You'll have to inspect the labels using developer tools in your browser to determines which files are affecting the labels. you may have to use more specific selectors to not affect those from Snipcart.
Note that you're using the V2 of Snipcart and the V3 has been available for seven months now.
I've installed highcharts-custom-events from the Highcharts plugins, https://www.highcharts.com/plugin-registry/single/15/Custom-Events
I wanted to make the labels in the Highcharts chart to be clickable and run a function when clicked but this returns this error
I do know that the click is being recognized but the isNumber function that is in customEvents.js is not existing. Does the highcharts-custom-events plugin have to be modified to get it to work with highcharts-ng? If so, how could I make this work?
Thanks.
In the high-charts plugin page [as accessed from the link above], click on the demo link.. you should be directed to a JS fiddle page.
Ensure that you have added the external resources mentioned in the Left hand side page of the JS fiddle page as accessed above.
I made a little chrome extension with angularjs and bootstrap. I have a alert like this:
<div class="alert alert-danger" role="alert" ng-show="errorMailZR">error</div>
and in angularjs controller :
$scope.errorMailZR = false;
i put it to false because i see the alert by default, it's not hidden :/ but in single web page when i go on it with browser, everything is ok. So, what i need for it's works in chrome extension ?
ng-show="false" doesn't work too in chrome extension...
UPDATE:
https://docs.angularjs.org/api/ng/directive/ngCsp#!
In order to run angular on an extension page, you have to use the ng-csp directive, or satisfy the ng-csp policies. I'm assuming you've done this, or nothing would be working at all.
Doing so turns off inline style insertion, this line in particular in angular.js (showing for reference, not for modification!):
!window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend('<style type="text/css">#charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>');
To get directives that rely on classes like ng-hide, ng-animate, ng-cloak, to work, manually link to the classes using:
<link rel="stylesheet" href="path/to/angular/angular-csp.css">
That's all there is to it.
OLD HACKY STUFF
Immediate fix, add this to your document head:
<style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
Ng-show and hide work by angular adding the class ng-hide to items that are hidden and removing it when they are shown.
Why doesn't it work in extensions?
Good question. For whatever reason (will update when I find the reason) chrome extensions prevent that style tag from being added to the head. It's probably some kind of security thingy, and there's probably a way to turn off that security bit, I'll update when I find out more.
You can debug chrome extension in chrome, just click right on extension popup. my guess is that angularjs isn't loaded or bootstraped in your extension, from my experience you should rather load angular from local files rather than CDN
I'm using parlsey validation and all is good. The problem is that if you partially load the website or load the website and click on "send" before everything is loaded, then parsley validation does not work.
Its not working because it hasn't been loaded. However, the validation script for parsley is in the header of the document? Is there a way to load a script before the website is loaded at all?
No that's not possible. If you place the JavaScript src in the head of the HTML document that's moste likely the only thing you can do. But that's not a good idea at all. JavaScript has to be placed before the closing body tag - at least until all Browsers and Servers are using SPDY.
The problem you are facing is caused by the way parsley works. While loading the page it will "scan" the HTML markup and search for parsley validation informations and apply bindings to them. It seems that this is not fully done.
What you can do is trying to avoid hitting a submit or what you use for submitting a form before the domready event is available. You could eg. set a submitt button for the form to disabled ...
I'm new to angularjs and creating my custom select directive using ng-transclude for select/option(static data through option tag).
Here is my plunker: http://plunker.co/edit/qozbIdRZGYucW95TEqsH?p=preview
In firefox, chrome and IE10 its working as expected and I'm able to see select option data.
But on IE9 select option data is not getting populated. I analyzed angular.js code and found that addOption from optionDirective is not getting called on IE9 due to which option is not getting added on selectDirective.
Any one facing same issue on IE9 or is there any issue with my implementation?
Thanks,
Vinay