Example
I want to create a popup, directly in JS, that fires when text is selected and a button is clicked
My ultimate goal is when the user selects the desired area of text and clicks on the button, it triggers a popup.
Please point me to the right way how to do it
Related
When designing a task, I write the name of the task, and then press the Add button, the item appears, and next to it, the Finish button. When I press Finish, the item appears in the Tasks section that has been executed, and next to the item, a Notes button. When I press the Notes button, the text area appears and disappears, and in the text area there is an edit button. When I click on it, I can write a comment inside the text area, and by pressing the Save button, the modification is locked to the problematic text area? When I add more than one element, the entire text area takes the same first comment, and I want each element to be stable in writing the text area so that I can modify the comment in any element without affecting the rest of the elements
https://codepen.io/amr77/pen/QWBqLVJ?fbclid=IwAR2JmTaZUliSixWR3vei3-zQdJOcIOuxm-eLs5KRgtkqxO8I3QRfwGFJ6Yw
I want to add a new functionality to my Spring web application. I have an add new button on the home page and clicking it will pop up a modal with form to allow people to input something and submit. What I want is to allow dragging some text and dropover mouse on the add button, then the form modal displayed with one of the input field filled with the text dragged. Any solution on this?
For the modal, I suggest you use bootstrap modals
You need to be more specific as to from the "some text" you want to drag and drop will come from.
HTML5's drag and drop has some easy javascript to get you started
I have three search categories (see first image). The user selects one and I show the search input that corresponds to that topic in the space of the categories (see second image). I automatically focus on the input with jQuery so the user can easily begin typing. If the user changes their mind and blurs the intput I hide it and again show the three categories.
This all works great if the user clicks enter to search, but I also want to allow them to be able to click the go button next to the search input field. The issue is that if they try to click the go button the input is blurred and then hidden and the submit click is never fired (I cannot unbind the blur event upon clicking this element because it is never fired - the blur is triggered first)
So is there any way to execute the function bound to the blur event (hiding the div) unless this "go" element is clicked using jQuery or JavaScript?
You have several options:
You can only hide the input on blur if the focus has gone somewhere outside its container, so if the focus has gone to the "Go" button, you don't hide the input at all.
You can your code design and fire the search question as an ajax call rather than a form submit.
You can hide the input on blur after a brief setTimeout() which gives the form submission a chance to get sent before it's hidden.
instead of placing the blur event on the input, place the blur event on the container that holds both the input and the Go button.
I got a question. I'm using the jQuery modal dialog plugin to let user input some data that will be saved in a database. My dialog can actually have two states which users can choose from by selecting a radio button inside the dialog box. The problem I'm having is that I lose some of the styles on my dialog box when the user selects a radio button. Also, how do I make it so that when the user saves the input data on the dialog box, after the dialog has closed, I want to load the new data live on the current page (with without the user having to refresh the page to see the changes).
Any idea?
As suggested by the other guys, you should give us some code for your first question.
For your second question, The jQuery Modal Dialog plugin picks up a div from the DOM and converts it to the modal dialog. So all the controls which are available inside the modal dialog can be access with normal jQuery.
Also, you can assign a function to be executed when the OK or Cancel buttons are clicked inside the modal dialog. Have a look here:http://jqueryui.com/demos/dialog/#option-buttons
So what you can do is, when the "OK" button is clicked, your function will pickup all the values which are inside the controls on the modal dialog and assign them to the controls on the current page.
Hope this helps.
I've been working on some logic to process highlighted text by a user. I found a very good example by Mark Koli at http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html.
I've created a working example at: http://jsfiddle.net/metalskin/43c8h/8/
I have a problem with the code for a specific instance as follows:
select some text.
dialog appears.
close dialog.
now click without a drag to clear the highlighted text.
dialog appears.
close dialog.
text is deselected.
In my logic I'm not using a dialog (it's just easier as an example), I'm inserting a div with an image to allow the user to perform an action.
The problem is that the second click is really to clear the text, but for some reason the browser is firing the mouse up event before the browser clears the text (well under Firefox anyway). This is not obviously a problem with the dialog popping up, but with my logic I end up getting multiple div's added, and as such multiple floating images over the text.
Is there someway to determine that the event will result in the highlighted text being removed? Ideally I would rather the event fire after the browser has cleared the text.
I should explain the use case of how I'm using it.
user highlights text on a page
an icon appears above where they just released the mouse button from highlighting the text
the user selects the icon, which opens up a form to enter some details to mark against the highlighted text (the icon is removed at this point in time)
the user submits the form (ajax), the form closes.
page is displayed, highlighted text is now not highlighted (but extra markup is added).
or
user highlights text on a page
an icon appears above where they just released the mouse button from highlighting the text
the user clicks elsewhere on the page to both remove the highlighted text and remove the icon.
the user submits the form, the form closes.
I've no problems with the selected text being de-selected when the icon is chosen, but the problem is if they click on another part of the page, it reactivates the mouse event and thus double icons (or a dialog when it's not appropriate in the example provided).
Here you go ^_^
http://jsfiddle.net/43c8h/16/
I just changed this piece of code to clear the selection on the mouse up event.
if (selectedText != '') {
alert("You selected:\n" + selectedText + "\n");
window.getSelection().removeAllRanges();
}
Or if you wanted to keep the text highlighted after the user had selected it, you could call a mousedown function with the same window.getSelection().removeAllRanges(); code to clear the selection every time the mouse is clicked.