jQuery select on div content - javascript

I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?

The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.

In accordance with jQuery docs, "this event is limited to fields and boxes".

From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here

All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here

we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/

Related

Detect focus loss for input element, not onBlur

I'm implementing an autocomplete/combobox in dart. I'm using two elements for this, a <input type="text"> and a <ul> for the suggestions. I want to hide via css style display: none whenever the user leaves the input box. This works when using onBluron the input element.
If the user tries to click an item in the <ul>, the input looses focus and the <ul>is hidden before the click event on the <li> is run.
_listElement = new UListElement();
_textElement = new TextInputElement()
..onBlur((e) => setDisplayToNone(_listElement)); // hide element
I noticed that a jQueryUI implementation does not have this issue and I can not figure out how they detect when to hide the suggestion box. see https://jqueryui.com/autocomplete/
What alternate way can i use to hide the <ul> without hiding it on _textElement.onBlur?
If it helps, the two elements are always wrapped by a <div>. I'm looking for a dart-only solution, although vanilla-js answers that I can rebuild in dart are also appreciated.
Please look at events sequence:
input.focus
li.mousedown
input.blur
li.mouseup
li.click
So you might setup a flag variable, turn it up on li.mousedown, check it on input.blur and decide if you need to hide the list, and then turn it down on li.click

Javascript: DataTables custom search box doesn't keep the 'X' button

jsfiddle: http://jsfiddle.net/d1zqsayh/9/
Trying to put the search box of DataTables in a <div>.
Html:
<div class="dataTables_filter">
<input type="text" id="dataTables_filter" class="dataTables_filter">
</div>
Script:
oTable = $('#example').dataTable();
$('#dataTables_filter').keyup(function(){
oTable.fnFilter( $(this).val() );
})
I saw this from another stack overflow post , but unfortunately the little 'X' button on the right of the search box doesn't show when you start typing in the box. Any way around this ? Perhaps i am using the wrong class on my <input> or <div>.
You need to add the little x yourself, it's not something that magically appears, unless you're using Internet Explorer.
Edit:
Since datatables creates this search box, You need to use fnInitComplete callback/function in datatables to target this search field, then you initialize this button.
You can see a working example here:
http://jsfiddle.net/d1zqsayh/20/
Edit:
You're referring to the behavior in Chrome for input type=search
Just change the input type from text to search and it will do this behavior in Chrome.
See here: http://jsfiddle.net/d1zqsayh/23/
Should your div class be dataTables_wrapper, not _filter, perhaps?

Is there A way to use JavaScript to add help bubbles

Is there a Way with Javascript to add Help bubbles over an input Box?
For example when you you hover over an input for Name: _____ it would say like First Name????
Thanks
An example is this https://edit.europe.yahoo.com/registration?.intl=uk
When you go over the name field it says First name in a bubble
Do you mean the title attribute?
<input type="text" title="First Name" />
As said in another answer you can add a title attribute to a html tag to have a tool tip display.
Or if you are after the behaviour where information is displayed somewhere on the page telling you about the text box you have selected you can; dynamically add to a div using document.createElement() and appendChild() when you hover over the element and removing it with removeChild() upon moving your mouse away or change the innerHTML of the html tag on those two events.
Edit:
Unfortunately because I am a 'new' user I can't include all the hyperlinks to each part of the mozilla developer site, but simply search for those functions there for more explnation.

Dropdown form field

With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?
I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...
Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.

disableSelection on everything except input[type=text]

I am looking to use jQuery's "disableSelection()" function because I have a lot of drag and drop on the pages but I do not want to disable selection on input boxes, just everything else.
I have tried
$('body').disableSelection(); $('input').enableSelection();
$('body').not('input').disableSelection();
still DISABLES EVERYTHING ON THE PAGE. Thank you.
With
$('body').not('input').disableSelection();
You disable selection on every instance of body that is not an input. Since body is not an input this will just disable selection on body.
Try this:
$('body *').not(':has(input)').not('input').disableSelection();
However, like other people pointed out it's probably pretty useless disabling selection on things that aren't draggable in the first place. So maybe you should replace body with .drag or however you can select all the objects that are draggable (keeping the rest of the function the same).
I dont think so disableSelection will work for input textboxes. It's useful for making text elements, or elements that contain text, not text-selectable. For example, if you have a draggable element, you may not want text selection to occur when the user goes to drag the element.

Categories

Resources