We Keep Coding

Add class on highlighted elements?

Is it possible to add a class on highlighted elements? For example: If I Select the .block-2, .block-3, .block-4, and press Enter key then all of these blocks should add a new class. I mean I need to get all of these elements on highlight selection when pressed the Enter key.
<div class="root">
<div class="block-1"> 1st </div>
<div class="block-2"> 2nd </div>
<div class="block-3"> 3rd </div>
<div class="block-4"> 4th </div>
<div class="block-5"> 5th </div>
</div>

Youll want to use the selections api to do this. You can use containsNode to do the rest, if your are ie9+.
https://developer.mozilla.org/en-US/docs/Web/API/Selection
Assuming you can use containsNode you should just be able to listen to keydown, filter by Enter, and then finaly query the document for the selection and apply classes depending on if the block nodes are contained within the selection.
const $root = document.querySelector('.root');
document.addEventListener('keydown', (e) => {
if (e.code == "Enter") {
const selection = document.getSelection();
console.log(selection)
for (const $child of $root.children) {
if (selection.containsNode($child) || $child.contains(selection.anchorNode) || $child.contains(selection.focusNode)) {
$child.classList.add('selected');
} else {
$child.classList.remove('selected');
}
}
}
});
This code was thrown together in about 3 minutes, is sub optimal, and should be reviewed before being used. You can see it in action # https://jsfiddle.net/z0gh7eck/2/.

According to jandy's answer to stackovweflow. There is no event that "text was selected". But you can bind mouseup event to check if there was a selection then add a class.

showing suggestions for spell checker in content-editable div

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.

JS expand onClick multiple events

Please check this page first : Solarking - About Us
Check first 2 boxes which has a READ MORE button. On clicking them, they expand a paragraph.
Now I want it to be like when I click on it, it should expand the text and change the button value to "CLOSE" from "READ MORE". And on again clicking on "CLOSE", it should change value to "READ MORE".
I searched for long time to see how to fire multiple events on onClick, but I saw that some said to use a ; in them, some said make a new function and put 2 functions in it.
Now I tried to make a new function with 2 functions inside it (one to expand the paragraph, other to change value of button, but I failed. (I am new to JS).
Help please. Thank you in advance!
Code I have on the page :
button code:
<p style="text-align: right;"><input id="button12" style="background-color: #eca200; color: #ffffff;" onclick="return toggleMe('para1')" type="button" value="Read more" /></p>
Script :
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

I think the easiest way to do this would be to set a boolean variable. In other words, let's say that it starts off with the dclaration at the beginning of the page.
var hasbeenclicked = false;
Then, after the first click
hasbeenclicked = true;
After a second click
hasbeenclicked = false;
When the function is called, it checks the variable and operates accordingly. The following is not real JS....
if hasbeenclicked = true {
do some stuff;
}
else {
do some other stuff;
}
That is a simple way to accomplish what you are trying to do.
Additional info:
Use two DIV tags with separate ID's. One for the paragraph and one for the "label". Use getelementbyID to alter each one appropriately.

I noticed you are using jQuery.
You could use a toggle method.
Alter the html link. Add a class of expander and use the data attribute to identify the paragraph id
<p style="text-align: right;">
<input id="button12" data-toggle="para1" class="expander" style="background-color: #eca200; color: #ffffff;" type="button" value="Read more" />
</p>
The JS
$(".expander").click(function() {
var self = $(this);
$("#" + self.data('toggle')).slideToggle(500, function () {
if ($("#" + self.data('toggle')).is(':visible')) { // paragraph is open
self.val("Close");
} else { // paragraph is closed
self.val("Read More");
}
});
});

What's the smartest way to select specific table elements in javascript?

I've got a table with hidden rows on it, like such
-visible-
-invisible-
-visible-
-invisible-
When I click on a table row, I want it to show the invisible row. Currently I have that using this function:
var grid = $('#BillabilityResults');
$(".tbl tr:has(td)").click(
function () {
$(grid.rows[$(this).index()+1]).toggle();
}
However, this table also hides the visible rows if I click on one of the (now visible) hidden rows.
I'd like the click function to only work on the specific visible rows. Currently all my invisible rows have the class "even" so I figured I could limit the click based on that. However, I can't seem to find the syntax to explain that to my function. How would I go about doing that? And, more importantly, is there a better way to approach this?

Use next:
$(".tbl tr:has(td)").click(
function () {
$(this).next().toggle();
}
);
And also if you have specific selector for odd or even:
$(".tbl tr.odd").click(
function () {
$(this).next().toggle();
}
);
But I think that the major help with my answer is to use next() that get you the next row, instead of the index process that you were doing.

var grid = $('#BillabilityResults');
$(".tbl tr:visible").click(
function () {
$(this).next('tr').toggle();
});

Use the NOT function to disregard the EVEN tr elements:
http://jsfiddle.net/7AHmh/
<table class="tbl">
<tr><td>one</td></tr>
<tr class="even" style="display:none"><td>two</td></tr>
<tr><td>three</td></tr>
<tr class="even" style="display:none"><td>four</td></tr>
</table>​
$(".tbl tr:has(td)").not("tr.even").click(function() {
alert("Click triggered.");
$(this).next("tr").show();
});

I guess you could check for even/odd rows with the modulus operator before calling your toggling code:
function() { // your anonymous function
if (rowNumber % 2 == 0) { // only even rows get through here
// toggle code here
}
}
I hope it helps.

jquery nextuntil filtering for multiple classes

I am trying to sort my site out so that when I click an anchor link it highlights the heading and the paras underneath it. I have it nearly right but am struggling with a few issues.
I have some HTML like:
<p id="pp1" class="Subsubhead">Stuff</p>
<p>Nonsense</p>
<p>More</p>
<p id="pp7" class="Subsubhead">Meow</p>
<p>Lorem</p>
<p class="subhead">
and I have some javascript that nearly works like:
function highlight(elemId) {
var elem = $(elemId);
elem.nextUntil(".Subsubhead").addClass("snaphighlight");
//elem.addClass("snaphighlight");
setTimeout(function () {
elem.removeClass("snaphighlight")
}, 1000);
}
$('#navigation a').click(function (event) {
var elemId = '#' + $(this).attr('href').split('#')[1];
highlight(elemId);
});
This currently doesn't highlight the heading, but it does highlight the <p> tags underneath it until the next Subsubhead. however, when the next p has a class of Subhead, it keeps highlighting which I don't want either. Is there a way of telling it to nextUntil ".subsubhead"&&".subhead" or something similar? also my timeout doesn't work anymore. how can i fix that?

You are applying the class to numerous elements but only removing it from one
Try this:
function highlight(elemId) {
var elem = $(elemId);
var highlight=elem.nextUntil(".Subsubhead").addClass("snaphighlight");
//elem.addClass("snaphighlight");
setTimeout(function () {
highlight.removeClass("snaphighlight")
}, 1000);
}
Your syntax using ## for a jQuery selector is invalid, should only use one #