Pretty Diff Usage - javascript

I want to use this fantastic Javascript Library on my little web project.
http://prettydiff.com/
I've downloaded PrettyDiff.js and ViewDiff.js
I've been researching on how to use it and I can't seem to find any examples on how to get the output for Javascript/Jquery
This is what I have so far.
<script xmlns="http://www.w3.org/1999/xhtml" type="application/javascript" src="prettydiff.js"></script>
<script xmlns="http://www.w3.org/1999/xhtml" type="application/javascript" src="diffview.js"></script>
<link xmlns="http://www.w3.org/1999/xhtml" href="diffview.css" media="all" rel="stylesheet" type="text/css" />
<script type="application/javascript">
$(document).ready(function () {
var pd = new prettydiff();
var dv = new diffview();
});
</script>
I have the two text areas and the button placed but I just don't seem to find the function to start the show.
Any documentation or code would be much appreciated.
Cheers

var str = "<html><body><h1>hello</h1></body><html>";
// Options can be viewed at:
// http://prettydiff.com/documentation.xhtml#function_properties
var options = {
source: str,
mode : "beautify", // beautify, diff, minify, parse
lang : "html",
wrap : 100,
inchar : "\t", // indent character
insize : 1 // number of indent characters per indent
}
var pd = prettydiff(options); // returns and array: [beautified, report]
var pretty = pd[0];
var report = pd[1];
console.log(pretty);
console.log(report);

Don't exactly know what you want to accomplish, but there are several examples on the site itself.
https://prettydiff.com/2/samples.xhtml
Also, documentation.
https://prettydiff.com/documentation.xhtml

Related

Calling .jSignature() on div doesn't update the div

I got this code from the GitHub:
<script src="path/to/jSignature.min.js"></script>
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
<div id="signature"></div>
But it doesn't pull anything up on the actual webpage. I would think there is more code required but I don't know where to start.
Here is a minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<lang>
<title>Minimal working jSignature Example</title>
<meta charset="UTF-8">
<!-- Files from the origin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://willowsystems.github.io/jSignature/js/libs/jSignature.min.js"></script>
<head>
<script>
$(document).ready(function() {
// Initialize jSignature
$("#signature").jSignature();
})
// ripped from the description at their the Github page
function getBase64Sig(){
// get the element where the signature have been put
var $sigdiv = $("#signature");
// get a base64 URL for a SVG picture
var data = $sigdiv.jSignature("getData", "svgbase64");
// build the image...
var i = new Image();
i.src = "data:" + data[0] + "," + data[1];
// and put it somewhere where the sun shines brightly upon it.
$(i).appendTo($("#output"));
}
</script>
<body>
Put your signature here:
<div id="signature"></div>
<button onclick="getBase64Sig()">Get Base64</button>
<div id="output"></div>
</body>
</html>
I hope you can go on from here.
It is really as simple as they describe it to be, only their description of the actual example is a bit lacking for beginners.

How to get substring using Dojo and javascript

Good Day,
I am a newbie learning Javascript & Dojo and I typically learn by picking apart other parts of running code.
I am confused as to how to get a substring value from the following code (from the ArcGIS Sandbox):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Query State Info without Map</title>
<script src="http://js.arcgis.com/3.6/"></script>
<script>
dojo.require("esri.tasks.query");
dojo.require("esri.map");
var queryTask, query;
require([
"esri/tasks/query", "esri/tasks/QueryTask",
"dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Query, QueryTask,
dom, on
){
queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
query = new Query();
query.returnGeometry = false;
query.outFields = ["SQMI","STATE_NAME","STATE_FIPS","SUB_REGION","STATE_ABBR","POP2000","POP2007","POP00_SQMI","POP07_SQMI","HOUSEHOLDS","MALES","FEMALES","WHITE","BLACK","AMERI_ES","ASIAN","OTHER","HISPANIC","AGE_UNDER5","AGE_5_17","AGE_18_21","AGE_22_29","AGE_30_39","AGE_40_49","AGE_50_64","AGE_65_UP"];
on(dom.byId("execute"), "click", execute);
function execute(stateName) {
query.text = dom.byId("stateName").value;
//execute query
queryTask.execute(query, showResults);
}
function showResults(results) {
var s = "";
for (var i=0, il=results.features.length; i<il; i++) {
var featureAttributes = results.features[i].attributes;
for (att in featureAttributes) {
s = s + "<b>" + att + ":</b> " + featureAttributes[att] + "<br>";
}
s = s + "<br>";
}
dom.byId("info").innerHTML = s;
}
});
</script>
</head>
<body>
US state name :
<input type="text" id="stateName" value="California">
<input id="execute" type="button" value="Get Details">
<br />
<br />
<div id="info" style="padding:5px; margin:5px; background-color:#eee;">
</div>
</body>
</html>
All I would like to do is pick apart the input (in this case the id="stateName" which is the word California).
So a silly example would be substituting the following code to get the first 10 characters of when someone types in 'California is on the west coast'
query.text = dom.byId("stateName").substring(0,10);
This is really so I can support other queries but I figured if I can do a substring on this input then it is really the same anytime when I query other attributes.
Thanks in advance for a newbie !
You need to get the innerHTML of your DOM element
query.text = dom.byId("stateName").value.substring(0, 10);
As Thomas Upton correctly pointed out the correct form would be:
dom.byId("stateName").value.substring(0, 10);
apparently the following also works
dom.byId("stateName").value.substr(0, 10);
As noted in comments, a call to .value will deliver what you need. Substring is a method on the string prototype See here. However, dom.byId returns a domNode. You don't want the substring of the domNode itself, you want the substring of the text value of the domNode. On inputs this is easily done with .value and is commonly done with .textContent and .innerHTML as well.

Javascript : External Functions won't work

I have been using javascript for the last couple of days and have decided to use it for my website. I also decided to use external functions in a single .js file
function imageLoad() {
var path,domain,cut;
path = window.location.pathname;
domain = "WEBSITE DOMAIN ADDRESS";
cut = path.substring(domain.length,path.length);
/* Still in progress */
}
function pageStart() {
var image-on = 0;
var imgArray = new Array();
alert("boo"); /* Used to check the script will run */
}
Now that's a simple process. Nothing too complex. And I have done the following (it is a code extract of my template)
<script type="text/javascript" src="main_script.js"></script>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Grandpa Pixel</title>
</head>
<body onload="pageStart();">
Now that should do the trick. On body loading, it should cause an alert "boo". But it doesn't. It just loads the page normally. However If I make the external script ONLY contain the line alert("boo"), it works perfectly. Can I ask why this is the case? Does this mean you can only have one function per external file?
check this:
function pageStart() {
var image_on = 0;
var imgArray = new Array();
alert("boo"); /* Used to check the script will run */
}
HTML
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Grandpa Pixel</title>
<script type="text/javascript" src="main_script.js"></script>
</head>
<body onload="pageStart();">
recommended using Firebug or other debuggers.
ERRORS
SyntaxError: missing ; before statement
var image-on = 0;
main_script.js (line 12, col 13)
ReferenceError: pageStart is not defined
pageStart();
SOLUTION
change
var image-on = 0;
with
var imageOn = 0;
it would be cleaner to put the <script> tag into the <header> tag.

Validate loading CSS with JavaScript

I have two style sheets, one default style and one Christmas style. I would like the Christmas style to be loaded in December and the default to be used in every other month.
I have written the code below which achieves what I want, however if I put it in to a validator I get the error: "document type does not allow element "link" here". I was wondering how I could make this code validate?
<head>
<script type="text/javascript">
var i = new Date();
var m = i.getMonth();
if (m==11) {
document.write('<link rel="stylesheet" type="text/css" href="mystyle-christmas.css" />');
} else {
document.write('<link rel="stylesheet" type="text/css" href="mystyle-default.css" />');
}
</script>
</head>
The validator has problems because you're not using CDATA, thus the validator will parse your javascript. Use the following to solve your problem:
<head>
<script>
//<![CDATA[
// Your code here
// ]]>
</script>
</head>
Btw, the following is a better way to do it:
<head>
<script type="text/javascript">
var i = new Date(),
m = i.getMonth(),
l = document.createElement( 'link' )
l.rel = 'stylesheet'
if ( m === 11 ) {
l.href = 'mystyle-christmas.css'
}
else {
l.href = 'mystyle-default.css'
}
document.getElementsByTagName( 'HEAD' )[ 0 ].appendChild( l )
</script>
</head>
And an even better way is to have your javascript in an external js file.
Try creating the element instead of using document.write:
var christmas = document.createElement("link");
christmas.setAttribute("rel", "stylesheet");
christmas.setAttribute("type", "text/css");
christmas.setAttribute("href", "mystyle-christmas.css");
document.getElementsByTagName("head")[0].appendChild(christmas)

Using Fzip lib under Adobe Air App

I'm currently working on a project for Adobe Air (1.5.3) and I need to unzip a file, copy some of its contents to another file.
Then I saw people talking about the Fzip (http://codeazur.com.br/lab/fzip) lib. The problem is that I don't know how to "import" or use this library with Javascript and Adobe Air, since Javascript doesn't have the import directive.
How can I manage to do that ?
I posted a demo of how to use FZip with Adobe Air and Javascript. I hope it hopes clear things up for you.
In short you need to pull the SWF file out of the compiled SWC (when applicable) and access the class.
The demo is pretty simple and really just a proof of concept but you should be able to extend it easily.
http://www.drybydesign.com/2010/05/12/adobe-air-fzip-without-flex/
-Ari
Ari's example is pretty good, and it got me started but he left out some pretty crucial stuff--like writing the uncompressed files back to the disk. And the zip file does not have to be hosted remotely--the thing about AIR is that it runs like a local Application...here is an example that build on the good start Ari gave us. (I am using HTML5 just to be cool and hip and modern! :)-
<!DOCTYPE HTML>
<html>
<head>
<title>Test Fzip</title>
<script type="application/x-shockwave-flash" src="scripts/fzip.swf"></script>
<script type="text/javascript" src="scripts/AIRAliases.js"></script>
<script type="text/javascript" src="scripts/AIRIntrospector.js"></script>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
var fzip;
if (window.runtime) {
if (!fzip)
fzip = {};
fzip.FZip = window.runtime.deng.fzip.FZip;
fzip.FZipFile = window.runtime.deng.fzip.FZipFile;
}
var file = air.File.documentsDirectory.resolvePath("test.zip");
//file.url
var zip = new fzip.FZip;
zip.addEventListener(air.Event.OPEN, onopen);
zip.addEventListener(air.Event.COMPLETE, oncomplete);
zip.load(new air.URLRequest(file.url.toString()));
function oncomplete(event) {
var count = zip.getFileCount();
alert(count);
for ( var idx = 0; idx < count; idx++)
{
var zfile = zip.getFileAt(idx);
// alert(zfile.filename);
var uzfile = air.File.applicationStorageDirectory.resolvePath(zfile.filename);
var stream = new air.FileStream();
stream.open( uzfile, air.FileMode.WRITE );
stream.writeBytes( zfile.content,0, zfile.content.length );
stream.close();
}
}
function onopen(event) {
alert("file is opened");
}
</script>
</head>
<body>
</body>
</html>

Categories

Resources