Easiest way to implement spellchecker for IE - spell-checking

I'm using ASP.NET webforms and lots of javascript/jQuery. I'm looking for a really simple and easy way to implement spell checking for a single text area in IE (since all the other browsers implement their own spell checking). I usually stay away from IE specific technologies but I'm willing to make an exception since I only need the feature in IE (6,7,8).
Gmail's spellchecker is nice. Hotmail's spellchecker is amazing (only works in IE) although it doesn't seem multi-lingual. I'd love to find an easy to have the same feature.
Telling my customer to download a plugin for their browser is not an option.
I'm looking for a really quick implementation. The only feature I really want is multilingual.
Suggestions? Thanks

http://spellerpages.sourceforge.net/
<!-- Source the JavaScript spellChecker object -->
<script language="javascript" type="text/javascript" src="spellChecker.js">
</script>
<!-- Call a function like this to handle the spell check command -->
<script language="javascript" type="text/javascript">
function openSpellChecker() {
// get the textarea we're going to check
var txt = document.myform.mytextarea;
// give the spellChecker object a reference to our textarea
// pass any number of text objects as arguments to the constructor:
var speller = new spellChecker( txt );
// kick it off
speller.openChecker();
}
</script>
The demo for this is no longer available.

Related

Elm to manage a particular section of a site

Hi I am new to elm and would like to know if it would be possible to set up elm such that it manages only one section of a website. the rest of the site would be in plain javascript, html, css.
but i would like to load up the compiled elm app in a separate script tag and it should manage only a particular section
let us say that the website is divided into 10 divs vertically of height 300px. i would want only the 3rd div to be an elm app.
is such a thing possible? if so how can i get this working
You can use Html packages embed function for this. I once did this just to try it out, but unfortunately cannot recall any details of it. I did found some source code though.
The html page would be something like this
<html>
<head>
</head>
<body>
<div id="personnel"></div>
</body>
<script src="elm.js"></script>
<script>
Elm.Person.embed(document.getElementById('personnel'));
</script>
</html>
By including elm.js, you'll get the Elm runtime. Here Person is my compiled Elm module. Something like
module Person exposing (..)
-- Module details here...
main =
Html.beginnerProgram { model = init, view = view, update = update }
Elm code is compiled to JavaScript with command
elm-make Person.elm --output elm.js
My knowledge on this is quite limited, but I did investigate it enough to be certain that with by doing this, one can add multiple components made with Elm to an html page / existing application.
Addendum: I found the source of my information
In addition to previous answer perhps you would like to take a look on:
https://ellie-app.com/h7vqHrPdWa1/0

Programmatically inject custom script into page body at runtime - like Browser Link

I'm looking for a way to inject a custom script into the _Layout.cshtml purely from code. _Layout.cshtml cannot know anything about it. Just like Browser Link does it.
You simple write this:
app.UseBrowserLink();
And this gets injected into the body at runtime.
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
</script>
<script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
There is no sign of it in _Layout.cshtml.
Unfortunately Browser Link isn't open source so I can't see how they have implemented it. Browser Link source now available
So I was wondering how it was done?
It's not open source, but you can easily decompile it to see how it works.
From a comment in the source code:
This stream implementation is a passthrough filter. It's job is to add links to the Browser Link connection scripts at the end of HTML content. It does this using a connection to the host, where the actual filtering work is done. If anything goes wrong with the host connection, or if the content being written is not actually HTML, then the filter goes into passthrough mode and returns all content to the output stream unchanged.
The entire thing seems pretty involved, but doesn't seem to use anything not available out of the box, so I guess it can be possible to code a similar thing.
Razor allows you to do this quite easily - you can even use a flag.
Example:
In your controller:
ViewData["RegisterCustomCode"] = "true";
In your View (.cshtml):
#if (ViewData["RegisterCustomCode"] == "true")
{
<text>
<script src="..."></script>
</text>
}

How do I use Dojo Toolkit in an Electron application?

I'm exploring Electron and I've run into a roadblock. I can't figure out how to load the Dojo Toolkit and use it in Electron.
For example, here is the simple "Hello World" for Dojo:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!</em>', greetingNode);
});
</script>
</body>
</html>
That works fine in a browser, but doesn't work at all in Electron. After a couple hours of googling and trying 50 different experiments I've gotten nowhere.
Can someone please enlighten me?
While you can disable node-integration as Shwany said, I believe that will effectively render the ipc modules useless, which will probably pose undesirable limitations since you won't be able to communicate between the main and renderer processes.
However, it is possible, with a bit of finagling, to get Dojo to play nice with Electron. There are only a couple of things you need to do in your entry page.
Firstly, force the host-node has feature to false. This can be done by setting it in dojoConfig.has, e.g.:
var dojoConfig = {
async: true,
has: {
'host-node': false
}
}
Secondly, as Shwany pointed out, Dojo is going to see the already-existing require, so we need to move that out before loading Dojo:
// Move Electron's require out before loading Dojo
window.electronRequire = require;
delete window.require;
After loading dojo.js, you can move Dojo's require elsewhere and move Electron's back, if you wish. Whether you want to do this may depend on how you intend to code the client side of your application. Ostensibly, Dojo's global require is never needed, since you can request a context-sensitive require in any defined module via the 'require' module ID.
If you want to see a scaffolded Electron application incorporating Dojo, I created a boilerplate a few weeks ago (though be advised it's currently relying on a fork of electron-packager). If you want to see an example of a more full-blown Electron/Dojo application, I wrote a music player called Nukebox a couple of months ago which uses Dojo and dgrid (though its scaffolding is a bit different than the newer boilerplate).
I have your test code working in Electron.
First, I assume you are trying to load dojo.js from the web. //ajax.googleapis... etc will probably attempt to pull the file from the file system. I added http: to the front of it. That allowed me to open a .html file in the browser and work. I am not sure if that was an oversight or not.
Secondly, because the browser-window has node-integration on by default, 'require' is already defined and it does not understand what you are passing to it because it expects a path not an array. If you construct your browser window with node-integration turned off it should work:
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600, "node-integration": false});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
});
Note the "node-integration": false. This may cause additional issues if you want to use node integrations in your app. However, your code should work.

Simulating clicks, keyboard input etc in a web view?

I have decided to have some fun with VB.NET and make a bot for some online games.
First of all, I plan on viewing the game through a webview control, which I believe is perfectly possible... unless I can't see Flash/Java content?
If it is possible, I've been wondering how would you "simulate a click" in the web view control? And, of course, keyboard input?
Perhaps a little late and I have no experience with VB.NET but to work with keys on a web page you need to use Javascript. For example:
<html>
<head>
<script>
document.onkeyup = function(event){ console.log(event); };
</script>
</head>
<body>
press a key within this document.
</body>
</html>
Cursor keys don't generate a keypress event hence the use of onkeyup. Also note it's lowercase. onKeyUp is not correct. If you're using Chrome or Firefox console.log will output the object that you can inspect. Not sure about IE but I think later versions support this too. Properties and methods can be used to get the keycode, character and any modifiers.
This code was tested on Chrome 12 beta. There are differences between IE and other browsers (as usual). This page shows an example of some of the differences: http://www.w3schools.com/jsref/event_onkeypress.asp
Not sure what you mean by "simulate a click" but I suspect you're not referring to testing.
Try for WatiN, its like testing a web application

Google's hosted dojox.gfx

I'm using the following html to load dojo from Google's hosting.
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("dojo", "1.1.1");</script>
<script type="text/javascript">
dojo.require("dojox.gfx");
...
This errors out on the requre line with an error like dojox.gfx is undefined. Is there a way to make this work, or does Google not support the dojox extensions?
Alternatively, is there another common host I can use for standard dojo releases?
Differently from when you reference the .js files directly from the <script> tag (note that google js api also supports this, see here), google.load is not synchronous. This means that when your code reach google.load, it will not wait for dojo to be fully loaded to keep parsing; it will go straight to your dojo.require line, and it will fail there because the dojo object will be undefined.
The solution (if you don't want to use use the direct <script> tag), is to enclose all your code that references dojo in a start function, and set it will as a callback, by doing:
google.load("dojo", "1.1.1", {callback: start});
function start() {
dojo.require("dojox.gfx");
...
}
or
google.setOnLoadCallback(start);
google.load("dojo", "1.1.1");
function start() {
dojo.require("dojox.gfx");
...
}
A better question is - why would you want to? If you are developing on your localhost then just use a relative path, if you're developing on an internet facing server - stick the dojo files on that.
Also - make sure you're not falling foul of the same origin policy
I believe that google becomes the namespace for your imported libraries. Try: google.dojo.require.
Oh! And as pointed out below, don't forget to use google.setOnLoadCallback instead of calling your function directly.
dojox is practically unmaintained, and will be taken out from dojo-2. There are major problems with most widgets in dojox, there is only a few good.
IMHO dojo should be self-hosted, because there are always things what you need to overwrite - for example, you need some fix in this dojox.gfx.