I am using a jQuery autocomplete to allow for users to search through a directory. I have it setup so that the Drop Down doesn't disappear once they click away.
However, I need it so that they can copy, say the email address, from the dropdown. However, when I click and drag nothing happens and the text does not get highlighted.
I have tried:
$("ul.ui-autocomplete *").enableSelection();
And I have tried:
*{
-ms-user-select: text;
-moz-user-select: text;
-khtml-user-select: text;
-webkit-user-select: text;
user-select: text;
}
That's all I could think of. Any ideas?
EDIT 4/14/13
You can see live version of this issue by going to http://wnmu.edu and clicking on "Search" on the yellow bar on the right.
How about adding a copy selected value-link or -button outside the dropdown list that copies the address to the clipboard?
That should be pretty straight forward using clippy (https://github.com/mojombo/clippy) or similar.
Related
I'm using mapbox to show a pulsating icon of the closest ping for a given line. Meaning, I have a geojson line that is comprised of multiple ping locations, and what I am currently doing is when I hover the line I find the closest ping and display it.
Now the issue with this is this ping has a popup that shows some specific information about each individual ping. This popup covers the line in some situations which prevents the mousemove event on the map. This makes it so the closest ping isn't showed all of the time because the closest ping to my cursor location would be under the popup. Anyone have an idea of how to fix this? I've tried a few things including adding pointer-events: auto to the popup.
Here is a codepen showing what I'm talking about
You were super close. The correct answer is pointer-events: none;
Updated codepen.
(Edit - John)
For others coming to this I needed to make some popups "readonly" that would pass events through while leaving other popups as is. Steve was correct that setting pointer events to none works, but there isn't a way through CSS to style a parent element (aka the popup-content class). I ended up adding a class to the popups content element when I want to show it. Because Mapbox doesn't support this you have to fidget with it a little bit. The last change/update you make to the popup during a render cycle has to be the class update or Mapbox will remove the class
CSS
.no-pointer-events {
pointer-events: none !important;
}
JS
const popup = marker.getPopup();
popup.setHTML(... html here ...)
if (!popup.isOpen()) {
marker.togglePopup();
}
popup._content && popup._content.classList.add('no-pointer-events');
I am making a custom plugin for the editor provided by Google Closure. The plugin makes it able to add a button.
I am having problems by setting an onclick on the button, the other values are nicely set.
button.innerHTML = event.label;
button.className = event.initialClass;
var extraClasses = event.extraClasses;
if (extraClasses)
{
button.className += ' ' + extraClasses
}
button.onclick = function() { event.onclick };
Does anyone know what I am doing wrong and how I can fix this?
After creating a button it is added to the editors SeamlessField. A second problem that I currently have is that after creating the button, my pointer is inside the button and I can't seem to get it out of there.
I've got the follow piece of code for handling this at the moment. The var button is the created button. button contains: <button class="orange">test</button>
// We want to insert the button in place of the user's selection.
// So we restore it first, and then use it for insertion.
this.restoreOriginalSelection();
var range = this.fieldObject.getRange();
button = range.replaceContentsWithNode(button);
// Done making changes, notify the editor.
this.fieldObject.dispatchChange();
// Put the user's selection right after the newly inserted button.
goog.editor.range.placeCursorNextTo(button, false);
// Dispatch selection change event because we just moved the selection.
this.fieldObject.dispatchSelectionChangeEvent();
Any ideas about how I could fix this second problem aswell?
For the first, it does not look like you have begun using Google Closure event code. Wiring up the button to the 'click' event in Google Closure would be as follows:
goog.events.listen(button, goog.events.EventType.CLICK, event.onclick)
You should also be investigating the goog.dom and goog.dom.classes namespaces if you'd like to use Google Closure's wrappers around standard CSS class and text DOM manipulation.
For the second, were you testing in Chrome? If so, you might have ran into a range issue in Webkit, documented within the Closure code itself:
https://code.google.com/p/closure-library/source/browse/closure/goog/editor/range.js#174
I have gotten around this in the past by inserting an empty <span> element as a sibling after the offending element (the button, in your case), and placing the cursor next to the <span> instead. However, there's nothing stopping the user from moving the cursor back inside your button. You'll have to add more logic to prevent a user from placing the cursor within the button's text.
Chrome's dev tools become almost unusable if you use a lot of vendor prefixes and have long property values...
Is there a way to tell the dev tools not to display the 'Unknown property values' (e.g the ones with a triangle)?
You probably don't want to fully hide all unrecognized style properties, because that would make it too easy to accidentally overlook a mistake.
You can customize the developer tools via a custom User style (it's not an extension).
First locate your profile directory, then enter the User StyleSheets subdirectory. You'll find a file called Custom.css. Edit this file, and add the following:
EDIT: Custom user styles have been removed from Chromium. To change the appearance of the developer tools, the new chrome.devtools.panels.applyStyleSheet method can be used (sample code).
#-webkit-web-inspector .properties > .not-parsed-ok:not(.child-editing):not(:hover) {
white-space: pre;
}
This CSS selector selects all CSS property-value pairs which are invalid, and force all content on single line, unless you're editing it, or hovering your mouse on it. If you really want to hide styles, use display:none;.
For the reasons given above, I would use something else, such as max-height: 8px; background-color: rgba(0,0,0,0.5); instead of display:none; to hide the properties. Then, you can still see that incorrect properties exist, without being bothered too much.
An alternative style is to indeed hide all properties by default, and only show the hidden properties when the mouse is on the CSS declaration:
#-webkit-web-inspector .properties:not(:hover) > .not-parsed-ok:not(.child-editing) {
display: none;
}
Hiding these unconditionally puts you on a slippery road. Consider yourself adding a property and inadvertently dropping a single character in the property name (background-colr) or value (rb(128,120,120)) (these typos are there for a reason, do not edit!). This property will instantly disappear, and you will have no way to restore it (by editing the CSS model), yet this broken property will remain in the style sheet text forever. That's why we don't hide them.
I'm having a problem with select fields in my forms.
It's a single select field, so JQuery turns it into a button which I can tap on to select the respective option. If the text that option is rather long, then the select button becomes wider than the screen, so it's only partly visible.
I checked the that gets created by JQuery to display the button and it has the CSS 'overflow: ellipse' set, so when I give said span a fixed width smaller than the screen width the option text gets truncated with '...' and everything looks fine.
Is there a way to trigger that behaviour automatically?
the 'viewport' meta-tag is set to 'width=device-width, user-scalable=no'
It maybe late, but I hope someone else can find this helpful.
If the select is wrapped in a fieldset tag, replacing it with a div can fix the problem.
I was also looking for ways to set the width of the select box, but after googling for a long time, I gave in and just shortened the text that is displayed in the select control.
<script type="text/javascript">
$('#myselect').change(function () {
var sel = $("#myselect option:selected").text().substring(0, 20);
$("#myselect option:selected").text(sel);
});
</script>
I know this isn't much helpful, but it has come to my understanding that the select box is one of the toughest to interact with, or at lest, that's what the internet is saying.
I'll throw in a "JQuery select cheat sheet" which I found helpful in my pursuit of a solution -> http://comp345.awardspace.com/select_element_cheatsheet.pdf
tyrpx is a GWT / Google App Engine app that allows players to do typing races. I am trying to prevent people from selecting text to type (it's a quote). The quote is made of GWT labels. Is there a way to prevent people to select text? of to intercept a click over a panel or label?
See it here http://app.typrx.com then click on 'compete in a race'.
Thanks.
You can make text unselectable via CSS using either/both of these:
user-select: none;
-moz-user-select: none;
http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select
I've had the same issue and added a solution to the http://www.cobogw.org library. It handles all the browser specific implementations. You can add the library to your project or see how it's implemented and copy it to your own code. The method to use is:
CSS.setSelectable(getElement(), false);