I'm looking for a way to minify my HTML code that's retrieved with Javascript like this
document.getElementById("content").innerHTML;
The HTML is very disorganized and poorly indented but its w3c validated. I came across this plugin https://github.com/kangax/html-minifier But need help implementing with raw JS/jQuery because it only provides instructions for node.js, and my app isn't server-based.
Include the file from dist directory in your page and use minify function. For reference see the options and the demo they provide.
Below I implemented it into a quick demo that removes the attribute value quotes:
$("#input").on("input", function() {
$("#output").val(minify($(this).val(), {
removeAttributeQuotes: true,
collapseWhitespace: true
// other options
}));
});
<script src="https://rawgit.com/kangax/html-minifier/50fad6e3a7a77f37671afae6782f557bd686bc8b/dist/htmlminifier.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Input</h1>
<textarea id="input"></textarea>
<h1>Output</h1>
<textarea id="output"></textarea>
Related
I can create a jQuery function within my HTML no problem:
<body>
<input type="text" id="mainInput" />
<button class="btn" id="mainButton"></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#mainButton").click(function () {
$("#mainInput").hide("slow");
});
});
</script>
</body>
This does exactly what I intend it to do.
I read it was a good idea to create a separate script to contain the actual function, so I put the script in its own file...
<body>
<input type="text" id="mainInput" />
<button class="btn" id="mainButton"></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="~/js/jQueryPractice.js"></script>
</body>
Here is the .js file with the jQuery
$(document).ready(function () {
$("#mainButton").click(function () {
$("#mainInput").hide("slow");
});
});
As soon as I do this, the functionality no longer works.
From everything I have researched, this should be working as intended; I have read multiple tutorials that use this method. I must be missing something simple...
This path:
src="~/js/jQueryPractice.js"
Uses ~, which doesn't really mean anything to a browser. What URL do you expect that to refer to? Should it be the root of the server?:
src="/js/jQueryPractice.js"
Relative to the page?:
src="./js/jQueryPractice.js"
Something else?
Whatever the URL is for the script, relative or absolute, that's what needs to be used in the src attribute.
Here is what got it to work.
My project has a 'wwwroot' directory. It was included when generating a new ASP.NET Core application through Visual Studio.
There is a js folder inside of this. When I put my script in there, the browser started finding it successfully.
This was the HTML:
<script src="~/js/jQueryPractice.js"></script>
The '~' seems to refer to 'wwwroot'. The script is now referencing and behaving as intended.
i'm trying to make cloudinary direct upload working but something in the documentation is missing... here are the steps i'm doing:
Controller:
/**
* MyaccountController
*
* #description :: Server-side logic for managing myaccounts
* #help :: See http://sailsjs.org/#!/documentation/concepts/Controllers
*/
var cloudinary = require('cloudinary');
cloudinary.config({
cloud_name: 'MyCloudName',
api_key: 'MyAPIKey',
api_secret: 'MyAPISecret'
});
Now this is my layout:
<!--SCRIPTS-->
<script type="text/javascript" src="/js/dependencies/sails.io.js"></script>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
<script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>
<script type="text/javascript">
cloudinary.cloudinary_js_config();
var cloudinary_cors = "http://" + window.location.host + "/cloudinary_cors.html";
console.log(cloudinary_cors);
cloudinary.uploader.image_upload_tag('photo', { callback: cloudinary_cors });
$(".photo").cloudinary_fileupload();
// Using the config function
var cl = cloudinary.Cloudinary.new();
cl.config( "MyCloudName", "MyAPIKey");
/*
$.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});
</script>
My form:
<form action="" method="post" enctype="multipart/form-data" class="upload_form">
<div class="form-group">
<label>Foto de perfil</label>
<input type="file" name="photo" id="photo" class="photo">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Cargar</button>
</div>
</form>
I don't get why it isn't working, in the docs it says Cloudinary's jQuery plugin requires your cloud_name and additional configuration parameters to be available. Note: never expose your api_secret in public client side code.
To automatically set-up Cloudinary's configuration, include the following line in your view or layout:
cloudinary.cloudinary_js_config()
This is done...
Direct uploading from the browser is performed using XHR (Ajax XMLHttpRequestâ) CORS (Cross Origin Resource Sharing) requests. In order to support older browsers that do not support CORS, the jQuery plugin will gracefully degrade to an iframe based solution.
This solution requires placing cloudinary_cors.html in the static folder of your Node application. This file is available in the html folder of Cloudinary's Javascript library. The following code builds a URL of the local cloudinary_cors.html file:
Done...
Direct upload file tag
Embed a file input tag in your HTML pages using the image_upload_tag view helper method.
The following example adds a file input field to your form. Selecting or dragging a file to this input field will automatically initiate uploading from the browser to Cloudinary.
cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors });
this is what i don't get... this is the uploader? how should i use it? and then i don't know what else to do, i'm using different docs to make it work but nothing helps... I hope anyone who did this can help me, thanks!
On controller initialize cloudinary as
var uploader = cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors, html: { multiple: 1 } });
and pass it to view and render it over there,
<%-uploader%>
then use jquery to get data:
$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {}
you can use this script to bind the data to some hidden fields inside your form and
cloudinary-fileupload will be generated when <%-uploader%> is rendered
In addition to CodeBean's answer, note that it seems that there are different ways of using Cloudinary that are mixed here (in the original code as was in question).
Controller
As far as it can be seen from here, the MyaccountController controller doesn't do a thing:
You're requiring "cloudinary" - presumably from npm install, which creates an instance of the jQueryless Cloudinary class.
The variable is local to the controller so has no effect on the rest of the code
View:
Only one of these lines is required (preferably the second one):
<script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
<script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>
This method returns a string with the <script> tag. The string should be then embedded in the HTML code. It is a server side code.
Here, it does nothing.
cloudinary.cloudinary_js_config();
If you're using the jQuery File Upload code, you should refer to $.cloudinary. cloudinary was never defined in your layout.
Now you're creating a jQueryless instance, which you don't use afterwards.
var cl = cloudinary.Cloudinary.new();
cl.config( "MyCloudName", "MyAPIKey");
Finally, there's an open-ended comment with the code you were supposed to use in the beginning of the whole script:
/*
$.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});
Regardless of CodeBean's response, you still need to config $.cloudinary.
I am trying to use CKEditor or TinyMCE editor in my project.
So I put TinyMCE folder in meteor public folder, also put
<head>
<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
in template head tag.
However receiving following error.
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3000/%3Cyour%20installation%20path%3E/tinymce/tinymce.min.js". (index):97
Uncaught SyntaxError: Unexpected token < tinymce.min.js:1
Uncaught ReferenceError: tinymce is not defined
How do I fix this problem? It is same to CKEditor.
Is there any other rich editor ,which I can use in Meteor JS?
First, you need to put everything from the CKEDITOR build download in the public folder. CKEDITOR comes with all sorts of stuff and references everything based on relative directories.
Your public folder should have a directory named ckeditor it should contain contain the following files and folders:
adapters
lang
plugins
skins
ckeditor.js
config.js
contents.css
styles.js
In your primary layout file reference CKEDITOR like so:
<head>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
</head>
In your template:
<template name="yourTemplate">
<textarea id="content" name="content"></textarea>
</template>
Finally, in the rendered function of your template:
Template.yourTemplate.rendered = function() {
$('#content').ckeditor();
};
Normally, you would say this.$('#content').ckeditor() but that doesn't work because CKEDITOR is in your public folder. As a result, you need to the global reference to the #content element.
Instead of /public folder, put your files in /client/compatibility. Then initialize it in the template you want to use it.
Template.editor.rendered = function() {
tinymce.init({
selector: 'textarea'
});
};
This was the only result searching for wysiwyg:
https://github.com/mcrider/meteor-bootstrap-wysiwyg
meteor add mcrider:bootstrap-wysiwyg
Looks a bit simpler than CKEditor or TinyMCE but maybe that's ok for your project.
At http://emberjs.com/ I am try to get the auto-updating and handlebars templates example working, it is the first one. When I run it, my html page look like:
Name: {{input type="text" value=name placeholder="Enter your name"}}
My name is {{name}} and I want to learn Ember!
It is just plain text, it is not like how it looks on the ember website.
This means I am not loading my javascript files right? Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>EmberDemo</title>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/handlebars-1.1.2.js" type="text/javascript"></script>
<script src="./js/ember-1.5.1.js" type="text/javascript"></script>
<script src="./js/app.js" type="text/javascript"></script>
</head>
<body>
<div>
<label>Name:</label>
{{input type="text" value=name placeholder="Enter your name"}}
</div>
<div class="text">
<h1>My name is {{name}} and I want to learn Ember!</h1>
</div>
</body>
</html>
Here is my path in Eclipse for where my javascript files live. /EmberQuickstart/src/main/webapp/js/
My path for my index.html is /EmberQuickstart/src/main/webapp/index.html
Can anybody tell me what is wrong? I am really stumped. I should not need a webserver and a war file to get javascript to work right?
Update
Malik I changed my paths to what you said and I appear to be on the right track, but it is still not working.
Here is my console output in Chrome's developer tools:
DEBUG: ------------------------------- ember-1.5.1.js:3521
DEBUG: Ember : 1.5.1 ember-1.5.1.js:3521
DEBUG: Handlebars : 1.1.2 ember-1.5.1.js:3521
DEBUG: jQuery : 1.10.2 ember-1.5.1.js:3521
DEBUG: ------------------------------- ember-1.5.1.js:3521
Ember Debugger Active
Remove the ./ part in your src="".
You should write it as:
src="js/jQuery "
I figured it out. I am 100% new to handlebars and ember so I did not realize that I need a tag to surround my topmost . Now it works!
I recommend to use Ember-Cli to start is easy and super complete Ember-Cli
I'm using Bottle to make a simple web form and want to set the Selectize.js jquery plugin to a field so the user can set several values to that same field.
Inside my form tag I have the following code:
<label>
<span>Links :</span>
<input type="text" id="input-tags" name="links">
</label>
<script>
$('#input-tags').selectize({
persist: false,
createOnBlur: true,
create: true
});
</script>
And the following .js and .css inside the head tag:
<link href="/selectize.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/selectize.js"></script>
To deal with static files I have the following route in my .py script:
#get('/<filename:re:.*\.js>')
def javascripts(filename):
return static_file(filename, root='static/js')
#get('/<filename:re:.*\.css>')
def stylesheets(filename):
return static_file(filename, root='static/css')
My route to deal with static files seems to be working properly 'cause I've tested it with other jquery plugin that does not use explicit code within the html file.
On this one, the problem seems to be on the explicit script code bellow the label tag. I found some articles about dealing with JSON but couldn't make it work (I also don't know if that is the right way to go).
Well, my best option was to put that explicit javascript into a new javascript file and add its path to the html like:
<script type="text/javascript" src="/<script_path_here>"></script>
That way my functions that handles the static files on the .py would do their job.