Develop Reference

Drag and Drop to pop up add new modal form with pre-filled?

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

Javascript/jquery hide loading image from select files screen

I am using this image show/hide script
Instead of using a submit button, I want to submit the form by using onchange submit in the file select field. Until here, everything is working fine. However, when I click the cancel button in the (pup-up) file select screen, the loading image won't hide. I have no clue how to solve this, and any suggestions are welcome.

Why the Grid view zooms after JavaScript pop up

I have a simple ASP.NET page with a Grid view (pulling data form SQL-DB), a textbox and a save button.
To add info; the user Inputs info into Textbox and press Save Button. When the user clicks on save button, s/he is presented with a JavaScript pop up saying “Saved”
Everything is working perfectly fine; the only problem I am having is; after this JavaScript pop up the Grid view just zooms.
How can I fix it?
Response.Write("<script>alert('Saved')</script>");
Zooms
The contact in the Grid view expends in size However goes back to normal after a Page refresh.

Try this one, instead of Response.Write()
ClientScript.RegisterStartupScript(this.GetType(), "scriptSave", "alert('Saved');", true);

Manage mousedown events with javascript when highlighting and unhighlighting text

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.

JQuery Modal Form Input Field Autofocus Issues

I'm encountering an issue with a JQuery modal form with many labels and corresponding input fields in it.
The issue occurs when I open the JQuery modal form and scroll down. When I close and re-open the JQuery modal form, the form is auto-scrolled so that the first input field is at the top of the form and has keyboard focus. However, this cuts off the label and header above the first input field.
I have tried $("input").blur(), and that successfully disables keyboard focus on the first input element, but the modal form still automatically scrolls so that the first input form is flush against the top of the screen.
I have also tried placing a hidden input field above everything else in the JQuery modal form, but Firefox is smart about it and still scrolls to the first active non-hidden input element.
Has anyone encountered this situation before, and if so, does anyone know the proper resolution for it?

Issue resolved. I used the scrollTop() method on the JQuery modal dialog div itself, like so:
$("dialog").scrollTop(0);
This is separate and distinct from autofocus/blur issues, as Firefox's autopositioning apparently does not tie with its autofocus.