Link to home
Start Free TrialLog in
Avatar of Larry Vollmer
Larry Vollmer

asked on

JQuery conflicts/syntax issue

I have attached a simple HTML file.

I want two things to happen.

  1. A user should be able to reposition the images anywhere on the browser why clicking the image and dragging it.
  1. They should be able to hide the image by clicking the Show/Hide 2 button

The problem I have is that the user can drag the image anywhere they want, but after the click, the image hides. I don't want the image to hide unless I click the button.

I would appreciate another set of eyes. Thanks!
drag.html
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

The problem is your image and your input both have the class hideimage

So your click event handler on hideimage is triggering when you click the image instead of only the input.

Corrected code below
<script>
$(function () {
  $('input.hideimage').click(function (e) {
    $(this).parent().find('img.hideimage').toggle('slow');
  });

  $(".drag").draggable({
    stack: ".drag"
  });
});
</script>

Open in new window

Note: you don't have to include each event handler in its own document ready ($(function() { } ); They can both go in the same one as above
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Larry Vollmer
Larry Vollmer

ASKER

Thank you!!
You are welcome.