Onclick Javascript Function Not Working

Question

I have an image I want to be rotated,

<img src="images/anchor.png" alt="robot image" class="robot rotate" width="100px" height="100px" />

The following css code to rotate the image

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;
}  

.rotate:hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
}

And lastly the jquery to make it happen onclick

$(document).ready(function () {
    $('img.rotate').click(function () {
        $('img.rotate').addClass('hover');
    }, function () {
        $('img.rotate').removeClass('hover');
    });
    alert("working?");
});

But when I click on the image all that happens is my image rotates due to my css. What I want to happen is when the image is clicked then it will begin to rotate, not when I hover over it.

Here's my fiddle http://jsfiddle.net/sneakmiggz/7B8Ya/

your jsFiddle actually uses .hover(). if you don't want it to do that on hover, i recommend avoiding that method. — PlantTheIdea
– PlantTheIdea, Commented Jun 18, 2014 at 17:28
.click() expects one callback function, not two. Also, inside the callback you can make use of $(this) rather than retraversing the DOM for the node again... — War10ck
– War10ck, Commented Jun 18, 2014 at 17:57

Shaunak D · Accepted Answer · 2014-06-18 17:35:56Z

5

Demo

Use .hover in your css. You are adding class .hover from your JS, css :hover wont work for it.
Use $(this) wherever possible.
Use .toggleClass() to add/remove class.

CSS:

.rotate.hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
}

JS:

$('img.rotate').click(function () {
    $(this).toggleClass('hover');
});

edited Jun 18, 2014 at 17:35

answered Jun 18, 2014 at 17:30

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joseph Casey Over a year ago

@user3734377 It should be noted that this is not supported for IE8 or less. caniuse.com/transforms2d. Having a click fuction based on if/else would be support through all browsers.

Milind Anantwar · Accepted Answer · 2014-06-18 17:28:11Z

1

Use .toggleClass() instead:

$('img.rotate').click(function () {
     $(this).toggleClass('hover');
});

You would also need to modify CSS for hover.

Demo

answered Jun 18, 2014 at 17:28

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Alex Char · Accepted Answer · 2014-06-18 17:32:16Z

1

Try this:

css

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;



}  

.rotateHover{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
}

js

$(".rotate").on("click", function(){
    $(this).toggleClass("rotateHover");
});

fiddle

answered Jun 18, 2014 at 17:32

Alex Char

33.3k9 gold badges51 silver badges71 bronze badges

Comments

Joseph Casey · Accepted Answer · 2014-06-18 17:31:04Z

0

$(document).ready(function () {
            $('img.rotate').toggle(function () {
                $('img.robot').addClass('rotate');
            }, function () {
                $('img.robot').removeClass('rotate');
            });
        });

answered Jun 18, 2014 at 17:31

Joseph Casey

1,3031 gold badge14 silver badges35 bronze badges

2 Comments

gen_Eric Over a year ago

.toggle() is actually removed from jQuery.

Joseph Casey Over a year ago

The text inside the parenthesis for .addClass(text) .removeClass(text) are the css classes you are adding or removing, like rotate:hover, not .hover. img.robot would be the best way to identify this since you are making alterations to an img's class of rotate. _____________________________________________________________________________________________ I used toggle since it works similar to hover, except you click. _____________________________________________________________________________________________ BONUS: Make the transition to look smooth by adding transitionary css.

Monarch Wadia · Accepted Answer · 2014-06-18 17:43:59Z

0

Fiddle: http://jsfiddle.net/7B8Ya/12/

Your error lies in both your .js and your .css

First, change your CSS to .hover. By using rotate:hover { foo: bar }, you're telling your browser to apply foo:bar to objects which are of class .rotate when the mouse moves over them.

//NOT .rotate:hover  
.hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
}

Then, in your JS, as another user pointed out, use .toggle to remove and add the class hover to the object.

$(document).ready(function () {
    $('img.rotate').click(function () {
            $('img.rotate').toggleClass('hover');
        }
    )
});

answered Jun 18, 2014 at 17:43

Monarch Wadia

5,0944 gold badges40 silver badges39 bronze badges

Comments

Pluto · Accepted Answer · 2014-06-18 17:49:23Z

For a really lame/funny solution that works, without any JavaScript, you can use CSS selectors to transfer the focus somewhere else, and have that rotate the image (as long as it's hovered over).

So before the image, put a regular <input> with the rotate class and around the image, use a <label for="input_id"> that transfers the focus to the input. In your CSS, have objects with the rotate class use fixed positioning and moved out of the screen. Ensure this with a hidden overflow for your body.

body {
    overflow:hidden;
}
.rotate {
    position: fixed;
    top:-100px;
}
.rotate + label img {
    /* Image stuff */
}
.rotate:focus + label img:hover {
    /* Image hovered/clicked stuff */
}

The only problem is your user won't be able to use arrow keys to scroll and the backspace key to go back a page. Here's the Fiddle: http://jsfiddle.net/7B8Ya/11/

For a real solution, if you want it to happen only while the mouse button is being held down, you can use :hover and :active pseudo-classes to rotate the image without any JavaScript, as such: http://jsfiddle.net/7B8Ya/13/

gen_Eric · Accepted Answer · 2014-06-18 17:49:35Z

0

You are almost there, you just need to make below changes:

remove pseudo hover event and change to class

.hover {
   -webkit-transform:rotate(-90deg);
   -moz-transform:rotate(-90deg);
   -o-transform:rotate(-90deg);
}

use below jquery

$('img.rotate').click(function () {
 $('img.rotate').toggleClass('hover');

});

DEMO: jsfiddle.net/7B8Ya/10/

edited Jun 18, 2014 at 17:49

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

answered Jun 18, 2014 at 17:41

Ashok Kumar Gupta

9747 silver badges9 bronze badges

Collectives™ on Stack Overflow

Onclick Javascript Function Not Working

7 Answers 7

Demo

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related