I am developing spell checker for an Indian Language. So far the spell checker is able to find the wrongly spelt words.
I am using a content-editable div for this purpose.So now I need to show the suggestions for wrongly spelt words whenever the user right clicks or selects the wrong word suggestions are to be shown to replace with the wrongly spelt words or simply ignore it.
Iam having a suggestion generator algorithm in perl. I just need to link with javascript .Iam stuck in how to show the suggestions(draw the menu at the cursor).I found some code after searching Google.But could not go further.
<script type="text/javascript">
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
alert("You've tried to open context menu"); //here you draw your own menu
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
alert("You've tried to open context menu");
window.event.returnValue = false;
});
}
</script>
You could use jQuery to compromise your goal. I've created a very simple example, but with a bit of effort you could make it as you want to(prevent multiple contextmenu's, styling, load the items dynamically, ...).
HTML
<div id="context">lalalalala</div>
Javascript
$(document).ready(function(){
$('#context').on('contextmenu', function(e){
var content = $('#context').html();
var temp = content +
'<div style="background-color: #CCC; color: #000; width: 150px; padding: 5px;">\
<h4>Suggestions</h4>\
<ul class="suggestions">\
<li>first suggestion</li>\
<li>second suggestion</li>\
<li>third suggestion</li>\
</ul>\
</div>';
$('#context').html(temp);
$('.suggestions li').on('click', function(e){
$('#context').html($(this).text());
});
e.preventDefault();
});
});
http://jsfiddle.net/4gWjM/
You just need to use spellcheck="true" on your div
Ex. <div spellcheck="true"><input type="text" name="fname" ></div>
Reference site
Reference site 2
Edit: I forget to give the link of the second one
How about something like this: http://jsfiddle.net/974Dm/
It doesn't build the whole menu, but it does give you the misspelled word on right click.
var editor = document.getElementById("editor");
editor.addEventListener("contextmenu", function(event) {
var misspelling = event.target;
while (misspelling && misspelling.className != "misspelled") {
misspelling = misspelling.parentNode;
}
if (misspelling) {
// Show your suggestions menu
// misspelling is <span class="mispelled">abc</span>
console.log("Show suggestions for " + misspelling.innerHTML, misspelling);
event.preventDefault();
}
});
Update: In order to create the suggestions menu, you will need to use AJAX.
Related
Sorry if this is a really noobish question but I have just made a form with sections that are toggle-able. Each section has a '.header' which on click will perform a slideToggle on the section div.
I would like to add a triangle either pointing down or sideways to let people know it is toggle-able. (i.e ▶ or ▼).
I have the triangle in a span with the class '.arrowTog'
I was able to get partial success with
$('.header').on('click', function() {
if ($('.arrowTog').text().contains('▼')){
$('.arrowTog').text('▶');
}else{
$('.arrowTog').text('▼');
}
});
When I clicked on one all of the triangles swapped so I tried this (which causes none of them to rotate at all):
$('.header').on('click', function() {
if ($(this).prev('.arrowTog').text().contains('▼')){
$(this).prev('.arrowTog').text('▶');
}else{
$(this).prev('.arrowTog').text('▼');
}
});
This is a sample of the HTML
<div class="header" style="cursor: pointer;">
<span class="arrowTog">▶ </span>
<b>Merchant</b>
</div>
<div class="searchContent" style="display:none;">
Any ideas what I am doing wrong?
Thanks!
In your first version, the problem is you're finding every .arrowTog in the page. You can use the fact that within the click handler, this is bound to the element that was clicked, and then just search within that using find:
$('.header').on('click', function() {
var arrow = $(this).find('.arrowTog');
if (arrow.text().contains('▼')){
arrow.text('▶');
} else {
arrow.text('▼');
}
});
You're using a class. You probably have a number of elements with the same class in it, so jQuery is matching all of them and doing this transformation to all of them.
Use a context (All .arrowTog RIGHT INSIDE THIS NODE):
$('.header').on('click', function(evt) {
if ($('.arrowTog', evt.target).text().contains('▼')){
$('.arrowTog', evt.target).text('▶');
}else{
$('.arrowTog', evt.target).text('▼');
}
});
Why not use CSS?
.arrowTog:before {
content: '▶';
}
.arrowTog.open:before {
content: '▼';
}
And then
$('.header').on('click', function() {
$(this).toggleClass('open');
});
I'm trying to modify this pen I found on CodePen. I'd like to be able to open a specific list on the page from another page. Clicking the link should open the corresponding section on the next page on page load.
I'm a bit of a newbie when it comes to jQuery, so I appreciate any help I can get. I've tried searching around and have an idea of what I need to target, but I haven't been able to make it happen. Here is my code:
HTML:
<!--Link on Previous Page-->
Click Here
<!--Target List-->
<div class="integration-list">
<ul>
<li class="integration">
<a class="expand" id="list">
<div class="expand_intro"><h3 class="teal_bold">Click Here</h3></div>
<div class="right-arrow">▼</div>
</a>
<div class="detail">
<div><p>Lorem Ipsum Dolor...</p></div>
</div>
</li>
</ul>
</div>
JS:
$(function() {
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "▼") {
$expand.text("▲");
} else {
$expand.text("▼");
}
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
$('.expand').find('a[href*='+ thash + ']').trigger('click');
});
});
Few things that I did to get it to work:
The trigger event is probably firing before the handler is actually attached. You can use setTimeout as a way around this.
Also, even with setTimeout around $('.expand').find('a[href*='+ thash + ']').trigger('click'); it didn't work for me. I changed that to simply $(thash).click();.
The complete code of the "expand.js" file:
$(function() {
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
setTimeout(function() {
$(thash).click();
}, 10);
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "â–¼") { //If you copy/paste, make sure to fix these arrows
$expand.text("â–²");
} else {
$expand.text("â–¼");
}
});
});
Apparently the arrows don't display properly here, so watch that if you copy/paste this.
I want to focus a special id (in roundcube) by a keyboard shortcut. The html is
...
<div id="mainscreen">
<div id="messagetoolbar" class="toolbar">
<div id="mailview-left" style="width: 220px;">
<div id="mailview-right" style="left: 232px;">
...
I tried the following:
// Strg + Tab, um in Nachrichtenbereich zu kommen
...
else if (event.keyCode == 9 && event.ctrlKey) {
alert("taste erkannt");
//document.getElementById("messagetoolbar").focus();
//$("#messagetoolbar").focus();
setTimeout(function() { $('#messagetoolbar').focus(); alert("zeit"); }, 3000);
}
...
The first alert and the second alert is shown but no focus on id messagetoolbar. Does anybody have an idea?
Thank you very much.
Edit: I think I should describe it better: I want to mark the first line/email in the email-inbox in roundcube. The inbox is a table with a tr-tag...when I try your solution the first line is dotted, too, but with enter I can't open the mail and with other keys I can't MARK the first line/mail... I think I have to "simulate a left-klick" to get the first line marked...?
Now I tried to use jquery's .trigger. The html of the inbox-Table is
<table id="messagelist" class="records-table messagelist sortheader fixedheader">
<thead>
<tbody>
<tr id="rcmrow27428" class="message">
<td class="threads"></td>
<td class="date">16.04.2014 13:41</td>
<td class="fromto">
...
I tried to use...
$('#messagelist tr').eq(1).addClass('message selected focused').removeClass('unfocused').trigger("click");
...but it doesn't work: It adds an removes the classes but doesn't really focus the line :-( With "buttons" it works.
EDIT AGAIN: I think the file list.js of roundcube is important for that question. There I found the following:
/**
* Set focus to the list
*/
focus: function(e)
{
var n, id;
this.focused = true;
for (n in this.selection) {
id = this.selection[n];
if (this.rows[id] && this.rows[id].obj) {
$(this.rows[id].obj).addClass('selected').removeClass('unfocused');
}
}
// Un-focus already focused elements (#1487123, #1487316, #1488600, #1488620)
// It looks that window.focus() does the job for all browsers, but not Firefox (#1489058)
$('iframe,:focus:not(body)').blur();
window.focus();
if (e || (e = window.event))
rcube_event.cancel(e);
},
Does anybody know how to modify or use referring to my question? Thank you!
Add tabindex=0 attribute to the div you want to foucs and you will be able to set focus on the div using .focus()
Do you want to highlight the div then you can use the jquery and following code to give highlight effect.
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
You can not focus controls like div, span etc. You can move to that div if required using book marks.
Good morning,
I've read a few times now, that one can't focus table rows but only can focus elements, which accepts input by the user. Otherwise I think there must be a way to simulate a click on a table row by jquery/javascript! I tried the following:
document.onkeydown = function(event) {
...
else if (event.keyCode == 9 && event.ctrlKey) {
$('#messagelist tr').on('click', function () {
alert('I was clicked');
});
$('#messagelist tr').eq(1).click();
}
...
}
The alert is shown! But the row isn't "marked"!?
Very simply put : the line currentItem.toggleClass('open'); doesn't seem to work.
More precisely, when inspecting the results with firebug, I can see the class "open" flashing (appearing and immediately disappearing) on the relevant element. So it's like the function is actually triggered twice (of course I only click once).
Can somebody explain me why this is and how to prevent it?
Here is my jQuery code :
$('div.collapse ul.radio_list li input[type=radio]').click(function (event) {
var currentTree = $(this).parent().parent().parent();
var currentItem = $(this).parent().parent();
var currentGroup = currentItem.attr('rel');
$(this).parents('ul').children('li').removeClass('select');
if ($(this).is(':checked')) {
currentItem.addClass('select');
}
currentItem.toggleClass('open');
var currentLevel = 0;
if (currentItem.is('.level1')) {currentLevel = 1;}
if (currentItem.is('.level2')) {currentLevel = 2;}
if (currentItem.is('.level3')) {currentLevel = 3;}
var nextLevel = currentLevel + 1;
currentTree.children('li').filter('li[rel ^=' + currentGroup + '].level' + nextLevel).animate({'height': 'show', 'opacity': 'show'}, 250).addClass('currentChild');
});
And here is a part of my HTML code, slightly simplified for better readability (not very pretty I know, but I only have a limited control on the HTML output) :
<div class="col_left collapse">
<ul class="radio_list" rel="7">
<li class="onglet level0" rel="group1">
<span class="onglet level0">
<input type="radio" />
<label>Services Pratiques</label></span>
<input type="hidden" value="1">
</li>
Thanks in advance.
Problem solved: the JS file was actually included twice in the HTML head, which caused the function to be triggered twice with each click.
I had a similar problem on my site, and I found that I had accidently duplicated the toggleclass hook all the way at the bottom, when first messing around with it. Oops! Make sure to look for double calls!
I had a similar problem doing this:
html:
<a>JS-link</a>
js:
$('a').click(function(event) {
... my stuff ...
# Forgot to do event.preventDefault(); !!
}
results in clicks being register twice!
I had the same issue and realized I had accidentally bound the function twice. I had originally meant to move the code from one javascript file to another but accidentally left the original in its place.
I have a div that contains many spans and each of those spans contains a single href.
Basically it's a tag cloud. What I'd like to do is have a textbox that filters the tag cloud on KeyUp event.
Any ideas or is this possible?
Updated question: What would be the best way to reset the list to start the search over again?
Basically, what you want to do is something like this
$('#myTextbox').keyup(function() {
$('#divCloud > span').not('span:contains(' + $(this).val() + ')').hide();
});
This can probably be improved upon and made lighter but this at least gives the functionality of being able to hide multiple tags by seperating your input by commas. For example: entering this, that, something into the input will hide each of those spans.
Demo HTML:
<div id="tag_cloud">
<span>this</span>
<span>that</span>
<span>another</span>
<span>something</span>
<span>random</span>
</div>
<input type="text" id="filter" />
Demo jQuery:
function oc(a){
var o = {};
for(var i=0;i<a.length;i++){
o[a[i]]='';
}
return o;
}
$(function(){
$('#filter').keyup(function(){
var a = this.value.replace(/ /g,'').split(',');
$('#tag_cloud span').each(function(){
if($(this).text() in oc(a)){
$(this).hide();
}
else {
$(this).show();
}
})
})
})