Say I have an ul (li) list in the page:
<ul>
<li>xxx<li>
<li>xxx<li>
</ul>
The element li are clickable and double-clickable, they are attached with these events, and I return false in both of them.
$('ul li').on('click',function(){
//do what I want
return false;
}).on('dblclick',function(){
//do what I want
return false;
});
But when the user double-clicks the element, the text inside the li will be selected. How can this be prevented?
Update:
Solved now,I use the following code with the css selector by NiftyDude:
$('ul li').on('click',function(){
//do what I want
return false;
}).....on('dragstart',function(){return false;}).on('selectstart',function(){return false;});
You can disable text selection using css (Note that this will effectively disable all selection methods and not just double clicking)
ul li {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
http://jsfiddle.net/T3d7v/1/
You can't stop the select from happening but you can clear the selection right after it's made:
<script type="text/javascript">
document.ondblclick = function(evt) {
if (window.getSelection)
window.getSelection().removeAllRanges();
else if (document.selection)
document.selection.empty();
}
</script>
To also prevent selecting whole paragraph by "triple click", here is the required code:
var _tripleClickTimer = 0;
document.ondblclick = function(evt) {
ClearSelection();
window.clearTimeout(_tripleClickTimer);
//handle triple click selecting whole paragraph
document.onclick = function() {
ClearSelection();
};
_tripleClickTimer = window.setTimeout(function() {
document.onclick = null;
}, 1000);
};
function ClearSelection() {
if (window.getSelection)
window.getSelection().removeAllRanges();
else if (document.selection)
document.selection.empty();
}
Source/Live test.
This should work on any browser, please report any browser where it's not working.
Related
I'm using this CSS to disable text selection. It works in Chrome and Safari, but not in Firefox
*.e-pdfviewer-pageCanvas {
-moz-user-select: -moz-none !important;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
*.e-pdfviewer-pageCanvas * {
-moz-user-select: text;
-khtml-user-select: text;
-webkit-user-select: text;
-o-user-select: text;
user-select: text;
}
With the following code you can disable text selection in the entire webpage, except inputs and textareas:
document.getElementsByTagName("BODY")[0].onselectstart = function(e) {
if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") {
e.preventDefault();
return false;
}
return true;
};
Alternatively, if you want to disable text selection completely you can use this code:
document.getElementsByTagName("BODY")[0].onselectstart = function(e) {
e.preventDefault();
return false;
};
If you want to disable text selection only for the elements having the class .e-pdfviewer-pageCanvas you can use:
var pdfviewer = document.getElementsByClassName("e-pdfviewer-pageCanvas");
for (var i = 0; i < pdfviewer.length; i++) {
pdfviewer[i].onselectstart = function(e) {
e.preventDefault();
return false;
};
};
[EDIT]:
If none of the aforementioned solved your issue, use the following code in your HTML <body> or the element you want to disable text selection for specifically:
<body onselectstart = "return false;" style = "-moz-user-select: none;">...</body>
Or in JavaScript:
document.getElementsByTagName("BODY")[0].onselectstart = function(e) {return false};
document.getElementsByTagName("BODY")[0].style.mozUserSelect = "none";
Try this simple jQuery plugin:
jQuery.fn.extend({
disableSelection : function() {
this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).css({
'-moz-user-select': 'none'
,'-o-user-select': 'none'
,'-khtml-user-select': 'none'
,'-webkit-user-select': 'none'
,'-ms-user-select': 'none'
,'user-select': 'none'
});
});
}
});
$('.e-pdfviewer-pageCanvas').disableSelection();
I have a menu that hides/shows child elements with mouseenter & mouseleave, but the child elements appear when the page loads.
I'd like it so the elements don't appear when the page loads but only on mouseenter & mouseleave.
How would I accomplish this with my code below?
$('.side-nav>li.has-flyout', this).on('mouseenter mouseleave', function(e) {
if (e.type == 'mouseenter') {
$('.side-nav').find('.flyout').hide();
$(this).children('.flyout').show();
}
if (e.type == 'mouseleave') {
var flyout = $(this).children('.flyout'),
inputs = flyout.find('input'),
hasFocus = function(inputs) {
var focus;
if (inputs.length > 0) {
inputs.each(function() {
if ($(this).is(":focus")) {
focus = true;
}
});
return focus;
}
return false;
};
if (!hasFocus(inputs)) {
$(this).children('.flyout').hide();
}
}
});
Doing just $('.side-nav>li.has-flyout').hide(); obviously hides the whole nav item. FWIW I'm using Foundation 5's framework.
Ideal: all your initial styles (like display: none) which is what .hide() does should be written in your stylesheet.
/* css */
.side-nav > li.has-flyout .flyout {
display: none;
}
Less ideal:
// JavaScript
$('.side-nav>li.has-flyout').children('.flyout').hide();
Through CSS, if your sub element list has class e.g. .sub-menu
then just add css
.sub-menu { display: none; }
Fiddle
$(document).live('mouseup', function () {
flag = false;
});
var colIndex;
var lastRow;
$(document).on('mousedown', '.csstablelisttd', function (e) {
//This line gets the index of the first clicked row.
lastRow = $(this).closest("tr")[0].rowIndex;
var rowIndex = $(this).closest("tr").index();
colIndex = $(e.target).closest('td').index();
$(".csstdhighlight").removeClass("csstdhighlight");
if (colIndex == 0 || colIndex == 1) //)0 FOR FULL TIME CELL AND 1 FOR TIME SLOT CELL.
return;
if ($('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).hasClass('csstdred') == false) {
$('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).addClass('csstdhighlight');
flag = true;
return false;
}
});
i am Dragging on table cells.
While dragging(move downward direction) i have to move table scroll also.
and also i want to select cells reverse (upward direction).
what should i do.
I have make an selection on tr class.
Updated jsFiddle: http://jsfiddle.net/qvxBb/2/
Disable normal selection like this:
.myselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
}
And handle the row-selection with javascript like this:
// wether or not we are selecting
var selecting = false;
// the element we want to make selectable
var selectable = '.myselect tr:not(:nth-child(1)) td:nth-child(3)';
$(selectable).mousedown(function () {
selecting = true;
}).mouseenter(function () {
if (selecting) {
$(this).addClass('csstdhighlight');
fillGaps();
}
});
$(window).mouseup(function () {
selecting = false;
}).click(function () {
$(selectable).removeClass('csstdhighlight');
});
// If you select too fast, js doesn't fire mousenter on all cells.
// So we fill the missing ones by hand
function fillGaps() {
min = $('td.csstdhighlight:first').parent().index();
max = $('td.csstdhighlight:last').parent().index();
$('.myselect tr:lt('+max+'):gt('+min+') td:nth-child(3)').addClass('csstdhighlight');
}
I just added a class in the HTML. All the HTML and CSS in unchanged besides what I've shown here.
Updated jsFiddle: http://jsfiddle.net/qvxBb/2/
There are several problems with your table, but I will correct the one you asked for.
To make your table scroll when your mouse get outside the container, add this code inside your mousedown event handler :
$('body').on('mousemove', function(e){
div = $('#divScroll');
if(e.pageY > div.height() && (e.pageY - div.height()) > div.scrollTop()) {
div.scrollTop(e.pageY - div.height());
}
});
and this, inside your mouseup event handler :
$('body').off('mousemove');
See the updated Fiddle
But now, another issue appear. This is because of the rest of your code. The lines are not selected because the mouse leave the column.
Try removing the return false; inside
$('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).addClass('csstdhighlight');
flag = true;
return false; //Remove this line
}
Because return false; stops browser default behavior (scrolling automatically).
DEMO
I have a table which I've added some multiple selection functionality where shift + click selects rows between the first click and second click but it ends up highlighting all text between the rows.
I don't want to disable text selection via CSS because this stuff really does need to be selectable, just not when shift + clicking when my multi-select function fires.
Can this be done?
var lastChecked;
$("#contact_table tr").click(function(e) {
if (e.target.getAttribute('type') == 'checkbox') {
return;
};
if (e.shiftKey && lastChecked) {
// select between last point and new point
var tableRows = $("#contact_table tr");
var newRow = tableRows.index($(this));
var oldRow = tableRows.index(lastChecked);
if (oldRow < newRow) {
newRow = newRow +1;
}
var sliceRange = [newRow, oldRow].sort();
var selectedRows = tableRows.slice(sliceRange[0], sliceRange[1])
.find('input[type=checkbox]').attr('checked', true);
} else {
var checkbox = $(this).find('input[type=checkbox]');
var checked = toggleCheckbox(checkbox);
if (checked) {
lastChecked = $(this);
}
};
recalculateSelectedButton();
});
You can deselect all text with javascript; add a call to RemoveSelection() after you run the multi-select logic.
From http://help.dottoro.com/ljigixkc.php via Clear a selection in Firefox
function RemoveSelection () {
if (window.getSelection) { // all browsers, except IE before version 9
var selection = window.getSelection ();
selection.removeAllRanges ();
}
else {
if (document.selection.createRange) { // Internet Explorer
var range = document.selection.createRange ();
document.selection.empty ();
}
}
}
You can try disabling user select based on the number of checked checkboxes. If there are any, just add the CSS style user-select: none; (and prefixed versions) to the #contact_table.
If you provide a jsfiddle with your current javascript code and table, I'd test the code too - now it's as-is ;) I'm not sure how the click interactions will play out with any cancelled event bubbling etcetera. Also, this implementation doesn't take into account that users might want to select text even if there's a checked checkbox (so it might not be what you're looking for).
$(function() {
var $contactTable = $("#contact_table"),
userSelectNoneClass = "user-select-none";
$contactTable.on("change", ":checkbox", function(e) {
var numberOfCheckedRows = $("#contact_table :checkbox:checked").length,
anyCheckedRows = (numberOfCheckedRows > 0);
if (anyCheckedRows && $contactTable.hasClass(userSelectNoneClass)) {
$contactTable.addClass(userSelectNoneClass);
} else {
$contactTable.removeClass(userSelectNoneClass);
}
});
});
.user-select-none
{
/* From https://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Edit: using the change event instead.
I can't seem to figure this out. I have a div with some text in it. When the user selects pieces of it (totally at random, whatever they want), I want a small popup to occur with the text inside of it.
To initiative the popup, can I just do this? ...
$('#textdiv').click(function() {
But then how do I get only the selected/highlighted text?
jQuery isn't going to be of much use here, so you'll need pure JS to do the selection grabbing part (credit goes to this page):
function getSelected() {
if(window.getSelection) { return window.getSelection(); }
else if(document.getSelection) { return document.getSelection(); }
else {
var selection = document.selection && document.selection.createRange();
if(selection.text) { return selection.text; }
return false;
}
return false;
}
You were on the right track with the mouseup handler, so here's what I got working:
$('#test').mouseup(function() {
var selection = getSelected();
if (selection) {
alert(selection);
}
});
And a live demo: http://jsfiddle.net/PQbb7/7/.
Just updated first answer.
Try this
function getSelected() {
if(window.getSelection) { return window.getSelection(); }
else if(document.getSelection) { return document.getSelection(); }
else {
var selection = document.selection && document.selection.createRange();
if(selection.text) { return selection.text; }
return false;
}
return false;
}
/* create sniffer */
$(document).ready(function() {
$('#my-textarea').mouseup(function(event) {
var selection = getSelected();
selection = $.trim(selection);
if(selection != ''){
$("span.popup-tag").css("display","block");
$("span.popup-tag").css("top",event.clientY);
$("span.popup-tag").css("left",event.clientX);
$("span.popup-tag").text(selection);
}else{
$("span.popup-tag").css("display","none");
}
});
});
.popup-tag{
position:absolute;
display:none;
background-color:#785448d4;
color:white;
padding:10px;
font-size:20px;
font-weight:bold;
text-decoration:underline;
cursor:pointer;
-webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select any text :<br>
<textarea type="text" id="my-textarea" style="width:100%; height:200px;" >
While delivering a lecture at the Indian Institute of Management Shillong, Kalam collapsed and died from an apparent cardiac arrest on 27 July 2015, aged 83. Thousands including national-level dignitaries attended the funeral ceremony held in his hometown of Rameshwaram, where he was buried with full state honours.
</textarea>
<span class="popup-tag"></span>
see: https://jsfiddle.net/arunmaharana123/kxj9pm40/
We've just released an jQuery plugin called highlighter.js that should allow you to do this flexibly. The code is https://github.com/huffpostlabs/highlighter.js, feel free to ask any questions on the github page.
You can get it from the base DOM element likeso:
var start = $('#textdiv')[0].selectionStart;
var end = $('#textdiv')[0].selectionEnd;
var highlight = $('#textdiv').val().substring(start, end);
// Note the [0] part because we want the actual DOM element, not the jQuery object
At this point, you just need to bind it to a click event. I think in this case mouseup is the event you'd want to bind to, since a user clicks and holds the mouse and then releases it after they're done highlighting text.
The problem is this would not trigger users that use only the keyboard to highlight text. For that you'd want to use keyup on the element and filter for the right keystrokes.
You need a event listener that listen to mouseup event.
var bubbleDOM = document.createElement('div');
bubbleDOM.setAttribute('class', 'selection_bubble');
document.body.appendChild(bubbleDOM);
// Lets listen to mouseup DOM events.
document.addEventListener('mouseup', function (e) {
var selection = window.getSelection().toString();
if (selection.length > 0) {
renderBubble(selection);
}
}, false);
// Close the bubble when we click on the screen.
document.addEventListener('mousedown', function (e) {
bubbleDOM.style.visibility = 'hidden';
}, false);
// Move that bubble to the appropriate location.
function renderBubble(selection) {
bubbleDOM.innerHTML = selection;
bubbleDOM.style.visibility = 'visible';
}