CODEWITHSUNDEEP
javascriptjqueryfunctionevent-handlingclick
A. Bunker
A. Bunker

Reputation: 33

Removing an onclick function

I'm currently playing around with creating a new image slider for a project, but had a question. The task is to have an image displayed on page that will open the full size onclick. However, I'd like to make it so the function goes away and the image returns to the original state onclick again.

Here's my code:

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
    <img src="//path" onClick="full()" id="image" />
    <script type="text/javascript">
        function full() {
            $(function () {
                $('#image').on('click', function () {
                    $(this).width(1000);
                });
            }); 
        }
    </script>
</body>   
</html>

The image opens in a larger state which is good, but how would I implement a second onclick function to take away the first?

Thanks for the help!

Upvotes: 3

Views: 105

Answers (5)

John Slegers
John Slegers

Reputation: 47111

What you're literally asking for :

The code below shows you how to do what you're literally asking for :

  1. After the first click, You change the width to 1000, you remove the inital click handler and add a new click handler to reset the width
  2. After the second click, you reset the with and remove the second click handler
  3. Any clicks after the second click don't do anything anymore
<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <img src="//path" id="image" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('#image').on('click', function() {
                $(this)
                    .width(1000)
                    .off('click')
                    .on('click', function() {
                        $(this)
                            .width('')
                            .off('click');
                });
            });
        }); 
    </script>
</body>   
</html>

See also this Fiddle for a working demo.

What you probably want :

What you probably want, is just a single click handler that toggles the width of your image.

The best way to do that, would be something like this :

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <img src="//path" id="image" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('#image').on('click', function() {
                var me = $(this);
                me.width(me.width() !== 1000 ? 1000 : '');
            });
        });
    </script>
</body>   
</html>

See also this Fiddle for a working demo.

Upvotes: 0

MaxZoom
MaxZoom

Reputation: 7763

To take an event previously assigned use

$('#image').off('click')

To scale back the image, use

var size = 0;
function full() {
    $(function () {
        $('#image').on('click', function () {
            if (size === 0) {
                size = $(this).width();
                $(this).width(1000);
            } else {
                $(this).width(size);
                size = 0;                     
            }
        });
    }); 
}

Upvotes: 1

brk
brk

Reputation: 50346

Use a class & toggleClass

function full() {
    $(function () {
        $('#image').on('click', function () {
            $(this).toggleClass('changeWidth');
        });
    }); 
}

Example

Upvotes: 0

Shomz
Shomz

Reputation: 37711

You don't need to remove the onclick listener, but you need to fix a few things. You have an inline onclick callback which was actually calling the full function that attaches a new click listener over and over again, eventually causing the click handler to be called 2^n times.

You can just keep the one in the code, and inside it check the current width of the image in order to choose what happens when you click it (assuming 50px is the starting width): 

$('#image').on('click', function() {
  $(this).width($(this).width() != 1000 ? 1000 : 50);
});
img {
  width: 50px;
  transition: width 0.2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.planwallpaper.com/static/images/518084-background-hd.jpg"  id="image" />

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

If width is 1000px then remove it otherwise set it to 1000 like following.

<img src="//path" id="image" />

<script type="text/javascript">
    $('#image').on('click', function () {
        if ($(this).width() == '1000')
            $(this).width('');
        else
            $(this).width(1000);
    });
</script>

Upvotes: 0

Related Questions