preview selected image on popup in angularjs app - javascript

I am using ng-file-upload / ngImgCrop and ngDialog to make a dynamic app using angularjs 1.5 version.
I have an input field which trigger by another element. I want to open the pop-up and give the ability to crop the image using above libraries. It's working without the pop-up but when I use the popup , the image not preview.
If I add an input field inside the popup to select , it's working. Seems like it fails if I select the image before open the popup.How to solve this?
I tried http://jsfiddle.net/danialfarid/xxo3sk41/590/ way and open the popup with input change event but no success.

Related

jquery - crop image with "cropper" - in canvas

I'm trying to implement the https://github.com/fengyuanchen/cropper plugin. I've implemented it with bootstrap and I'm trying to make it so that the user can press a "crop button" and the user will see only the cropped part of the image - inside the image. The demo uses a modal box and this line of code:
$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
this will show find open a modal and put the result image (result) as html in the modal body. Then user can close and proceed as normal. I want to achieve the same -except no modal box. This approach will not work because it overrides all of the html code and the plugin doesn't work any more. I'm thinking I may have to replace the source image itself with the result. Any solutions to this ?
Your original image has to be in a container element like a div. You can select this div with $("thedivId") and call html(result) on this div.

Typeahead.js Set Query From Popup Window

So currently I have a typeahead field setup up and working with a remote url. I also have a popup window which allows the user to add another element to the database. Once the new element is saved, the popup window sets the typeahead field with window.opener.$(".typeahead").val(clientName). The issue is that the typeahead filed goes blank if you blur off it.
I found an issue for it here - https://github.com/twitter/typeahead.js/issues/28 but I can't figure out how to incorporate it into my popup and parent window scenario.
Eventually used window.opener.$('input[name=client-name]').typeahead('setQuery', clientName); and it worked.

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.

How to customize the position of an alert box

I am using an alert box to alert some messages after some validation.
Now I want to make alert box position over the control where it had a validation
error.
As a default, an alert box pops up in center of page,
Now I want it at some custom position,
for example I have 4 textbox to be validated, textbox-3 has some incorrect data,
I want the alert to be presented just above the textbox-3 instead of center of page.
Is this possible to change the display behavior of alert box?
If there's no other option to go for jquery dialog box.
Since that is a default dialog box, you cannot position that. However, you can design your own custom alert box and position that. Or, you can use 3rd party dialog boxes, jquery ui has a nice one: http://jqueryui.com/dialog/
Jquery dialog box is the best option u get.Follow this:
http://jqueryui.com/dialog/
Is it possible to create a non-centered Javascript alert box?
Not possible. You cannot change the default alerts in the browser.
However, if you want you can create one for yourself with following options.
If You don't want to use 3rd party plugin
go with this
Using HTML, CSS and JS : Click Here or Here
If you want to use a separate library for dialogs with full control? Click Here
If you wish to use 3rd party Plugin then there are many options available :
Using jQuery : Click Here
Using Bootstrap : Click Here or Here
Materialize CSS : Click Here
and Many more UI component libraries like PrimeNG, KendoUI etc

Using Kendo UI Upload Widget within a Lightbox

I am trying to use the Kendo UI Upload widget within a lightbox window. After I choose a file, however, the file name is repeated four times below the Select button (it should only appear once of course).
I have tried using the Kendo Window widget and Fancybox as my lightbox libraries, but I get the same result with either of them.
I have also verified that the Upload widget works fine when I don't put it inside a lightbox. (But I really need it to work inside the lightbox!)
Anyone ever run into this before?
http://demos.kendoui.com/web/upload/index.html
Thanks.

Categories

Resources