Hover / click / click to select text
I am working on interactive English-Czech parallel text with two columns. There is a rough version here . Someone made a sensible suggestion that where you hover over a paragraph, both that paragraph and its corresponding paragraph in another language are underlined. This is especially useful because there is no precise paragraph in the texts. There is a small jsfiddle implementing this idea here .
But I would like to add a related function. Hover over a paragraph and select both it and its copy, click on the paragraph and he and his colleague will remain selected, click elsewhere, and the highlighting disappears.
Will it be easy to implement? I know almost nothing about javascript and I just use another person's code:
$(document).ready(function() {
$("label").hover(function() {
$("label[class='" + $(this).attr("class") + "']").each(function(){
$(this).addClass("highlight");
});
});
$("label").mouseleave(function() {
$("label[class='" + $(this).attr("class") + "']").each(function(){
$(this).removeClass("highlight");
});
});
});
source to share
Simplified code and added click function: DEMO
$(document).ready(function() {
$("label").mouseenter(function() {
$label = $(this).attr("class");
$('.'+$label).addClass("highlight");
});
$("label").mouseleave(function() {
$label = $(this).attr("class");
$('label[class="'+ $label +'"]').removeClass("highlight");
});
$("label").click(function(event) {
event.stopPropagation();
$label = $(this).attr("class");
$('label[class="'+ $label +'"]').addClass("highlight-click");
});
$('html').click(function() {
$('label').removeClass("highlight-click");
});
});
ninja edit: added correct code for answer.
source to share
This is close to what you need. hover()
works as usual (the notification I used hover()
and toggleClass()
instead of hover()
and mouseleave()
. When you click, the highlight stays on. To remove the selection, just click the paragraph again (this seems more user-friendly and intuitive than "click anywhere"). It also allows you to select a few paragraphs and pretty clean in code.
$(document).ready(function() {
// Capture hover
$("label").on("hover click", function(e) {
var $label = $("label[class='" + $(this).attr("class") + "']");
if(e.type == "click")
$label.toggleClass("clicked");
else
$label.toggleClass("highlight");
});
});
Here's a working violin .
source to share
Basic script example is here .
The code uses a variable to indicate whether to remove the background highlighting ( mouseleave
). The default behavior is to remove the selection, and this changes on click only when the click target was label
. Clicking anywhere removes highlighting and also hovers the paragraph. Usability, you might want to change this behavior to make the click-triggered punch more permanent and harder to disable accidentally.
var stayHighlighted = false;
$(document).ready(function() {
$(document).click(function(e){
if ($(e.target).is(':not(label)') ) {
$('.highlight').removeClass('highlight');
stayHighlihted = false;
} else {
stayHighlighted = true;
}
});
$("label").mouseenter(function() {
$(".highlight").removeClass("highlight");
$("label." + $(this).attr("class") ).addClass("highlight");
});
$("label").mouseleave(function() {
if (!stayHighlighted) {
$(".highlight").removeClass("highlight");
} else {
stayHighlighted = false;
}
});
});
source to share