jquery - crop image with "cropper" - in canvas - javascript

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.

Related

Modal mask appears over modal element

I have a modal pop up that needs to be fired from an article in a module, I need to have this format. The modal pop up is behind the modal backdrop and positions in relation to the module.
I get that its taking the parent relative position of the article in the module but I need to stop it without breaking the page layout.
In other words I need this page: http://my-healthy-living.co.uk/weight-management/herbalife-core-nutrition-formula-1-meal-replacement-shakes
To behave like the pop ups in this page :http://my-healthy-living.co.uk/weight-management/herbalife-protein-shake-solutions
With it in front of the backdrop and central to the screen. Please help!
Ignore please, was trying to post comment on my phone but added as an answer!!! Can't find delete on the darn app....
He means the actual code for the modal and any relevant JavaScript and PHP.

getting rid of lower bar in colorbox

I want to use colorbox to display a form. The form will have two buttons, one for submitting the form and one for dismissing the window created by colorbox.
I have been following the examples, particularly the so called Outside HTML (Ajax). It works, but I am trying not to show the close button and to hidden also the whole bar that colorbox uses to display the title and other button for galleries.
If I set closeButton:false, the close button is not shown but I still have some white space at the bottom that I'd like to remove.
Do you know how to achieve this?

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

How to make the Background behind Alert Box clickable?

I have a application where i make all Divs clickable by using this code :
$("html").click(function(){
alert("Click");
return false;
});
This one work normally for all divs. Well, when Alert popup, the Background behind alert box cannot be clicked. How can i turn that to be clickable too?
PS: Right Click on the Background dont work too.
Thats not possible. You have to use a JS plugin doing the alert, so you can influence the behaviour (like the jquery ui modal widget, mentioned here). But with the browser alert this is not possible, as far as i know.
Not sure how to do exactly what you're asking (if it's possible). Maybe someone else can shed some light on that.
But a solution you could look into would be the dialog widget from jQuery UI. You can easily create pop-ups, modal or non-modal (meaning with the background faded out or not).
http://jqueryui.com/dialog/
They have some demos there, but it's as simple as created a div with some text and calling...
$("#the_div_id").dialog();
Other config parameters can be found from the API:
http://api.jqueryui.com/dialog/
By default its modal popup behaviour ,If you want to clickable
Assuming you are using Jquery Ui dialog
Try with the option modal
$('#selector').dialog("option","modal",false);
http://api.jqueryui.com/dialog/#option-modal

jquery push element down on button click

I am using blocksit.js to get Dynamic Grid Layout in my web-app.
It works perfect. The problem comes when I have to dynamically hide and unhide a textbox on button click, the boxes below are not shifting down so the textbox is going under the box below. See the image below.
I have tried whole day, but without luck.
If you are not creating your div dynamically then you should, in your markup, place the textbox above your buttons :)
What to do:
Let's say this is your HTML:
--BUTTON--++--BUTTON--++--BUTTON--
--------------TEXTBOX-------------
Make it like this:
--------------TEXTBOX-------------
--BUTTON--++--BUTTON--++--BUTTON--

Categories

Resources