When I implemented google recaptcha for my site using the instructions given by Google everything works fine but the div itself renders a bit oddly:
I am using the standard DIV code recommended by Google:
<div class="g-recaptcha" data-sitekey="my-site-key" data-callback="enableBtn" data-expired-callback="disableBtn"></div>
I have tried to adjust the padding for the DIV but nothing seems to work. Has anyone else had this problem and solved it?
UPDATE: I tried with the most basic site possible, no css and I still get the same rendering.
<!DOCTYPE html>
<html>
<body>
<div class="g-recaptcha" data-sitekey="my-secret-site-key"></div>
<script src="https://www.google.com/recaptcha/api.js">
</script>
</body>
</html>
UPDATE 2. Works fine in Microsoft Edge. Seems to be a Firefox problem...
Related
I'm trying to use Google ReCaptcha V3 for my site, but when I load the page always get a message "Invalid site key or not loaded in api.js".
So for the first question, I need to make sure Google Recaptcha V3 can run on the local environment, right? (without SSL)
If it can run, How to verify domain or site key is correct?
HTML&JS
<html lang="en">
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="col-md-4">
<div class="g-recaptcha" data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}"></div>
</div>
</body>
</html>
Screenshot:
Google Recaptcha V3
Please help me :)
You may have to include the sitekey in the script tag itself:
You have: https://www.google.com/recaptcha/api.js
You want: https://www.google.com/recaptcha/api.js?render=<v3_site_key>
Is it possible to run ckeditor on an IFrame so that can encapsulate a full html page? I have tried various methods but nothing seems to work.
What I am looking for is to have a ckeditor wrapper page say Editor.htm which contains an editable IFrame linked to my real html page say test.htm. Something line:
Editor.htm
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.ckeditor.com/4.5.10/standard-all/ckeditor.js"></script>
</head>
<body>
<iframe contenteditable="true" src="test.htm" id="editor1" name="editor1"></iframe>
</body>
</html>
You can set ckeditor to use "fullPage" mode, allowing you to edit everything from the opening tag to the closing tag. See the official sample here.
You will still need to get the content into the editor (e.g. the html page you want to edit) and save the result on the server, but this is something specific to your site, language, platform etc.
I am working with CKEditor 4.4.5 and its plugin Stylesheet Parser 4.4, but I get empty list from the style drop-down.
To make my question easier to understand, please try this code (download from its example site: http://sdk.ckeditor.com/samples/styles.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Stylesheet Parser plugin</title>
<script src="http://cdn.ckeditor.com/4.5.2/standard-all/ckeditor.js"></script>
</head>
<body>
<textarea cols="80" id="editor2" name="editor2" rows="10" ><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
</textarea>
<script>
CKEDITOR.replace( 'editor2', {
extraPlugins: 'stylesheetparser',
height: 300,
// Custom stylesheet for editor content.
contentsCss: [ 'http://sdk.ckeditor.com/samples/assets/stylesheetparser/stylesheetparser.css' ],
// Do not load the default Styles configuration.
stylesSet: []
} );
</script>
</body>
</html>
It doesn't really work. But the sample on that site works well.
I also find another sample site:
http://ckeditor.com/ckeditor_4.3_beta/samples/plugins/stylesheetparser/stylesheetparser.html
I tried to copy all the sources code from this demo site, but get no luck.
Did anyone else have the same problem?
How can I make the codes above work? It basically uses the source codes from CDN site so I don't think the version of source code matters.
You should try with this version: http://ckeditor.com/addon/stylesheetparser-fixed
The official plugin has some problems since very long ago but they don't seem to plan to fix them.
This problem is caused by Cross-domain request. The CSS file is in HTTP server, and my application is running with a port number. So they are treated as cross domain request.
I also tested the HTML page and CSS file in the local files. However, file://...path is still treated as Cross Domain request in Chrome, but FF and IE works with that properly though.
When I tried this in server, it works properly with Chrome. Unfortunately, there seems no way to make cross domain request work in Chrome and Firefox.
I am trying to implement a signup PopUp from Mailchimp but as it seems, I am not able to make it working! Here's the code:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"http://mc.us9.list-manage.com","uuid":"146962178e8704d5ccaf9c28f","lid":"e13cc10d95"}) }) </script>
</head>
<body>
<p>This is a test!</p>
</body>
</html>
If I open the html file (locally), it loads but nothing else happen. Also there is no html code embedded what I would expect it to do. Do you have any ideas?
you have to know a couple of things:
this shows your popup on page load (hence no HTML code)
it only shows once since it places a cookie, and if you already saw your popup won't bother you with it again. (try it in private mode in your browser)
Try to add in header this google libraly <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
I've tried to implement the jQuery Tags Manager (http://welldonethings.com/tags/manager) the last days in vain...
What the environment looks like:
it is a bootstrap powered website with several elements on it which should be able to be tagged (within a bootstrap modal).
What I have done so far:
I have added the tagManager class to my input field.
<form>
<input type="text" name="tags_0" placeholder="Tags" class="tagManager">
</form>
Furthermore, in the head section of my website I have included a custom javascript file:
<script type='text/javascript' src="js/javascript.js"></script>
The file looks like this:
jQuery(".tagManager").tagsManager();
Of course also the jQuery lib and the bootstrap & TagsManager css files were included.
However when ever I am entering a tag it does reload the website with the get-variable "?tags_0=test"
I am kind of frustrated right now. It seems so simple, but I cannot get it working...
Best regards,
Nico
This probabily isn't going to help the original poster since this was asked some time ago, but I was having the exact same problem and when I searched for help I found this question, so my answer might help someone that ends up here with the same problem.
I was trying to use this jQuery plugin as well and I was having a hard time to get it working too. Spent hours checking the code and searching for help but always got to the conclusion that the code was correct, so I had no idea what was wrong. However, somehow, it then started working.
One thing I noticed was that if I had the call for the css file first and then the js files, it would show some weird thing in the place where it should have the "x" for deleting the tag. But if I called the js files first and then the css file, it would work perfectly.
This is the code I used:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-tagmanager.js"></script>
<link href="bootstrap-tagmanager.css" rel="stylesheet" type="text/css">
</head>
<body>
<input type="text" name="products" placeholder="Add your Products" class="tagManager">
<script>
jQuery(".tagManager").tagsManager();
</script>
</body>
Hope this helps someone.