CODEWITHSUNDEEP
javascriptjquerycssonclick
Nathaniel Mignotte
Nathaniel Mignotte

Reputation: 37

Onclick Javascript Function Not Working

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/

Upvotes: 1

Views: 396

Answers (7)

Ashok Kumar Gupta
Ashok Kumar Gupta

Reputation: 974

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

  1. remove pseudo hover event and change to class

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

  2. use below jquery

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

});

DEMO: jsfiddle.net/7B8Ya/10/

Upvotes: 0

Pluto
Pluto

Reputation: 3026

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/

Upvotes: 0

Monarch Wadia
Monarch Wadia

Reputation: 4996

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');
        }
    )
});

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20646

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');
});

Upvotes: 5

Alex Char
Alex Char

Reputation: 33228

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

Upvotes: 1

Joseph Casey
Joseph Casey

Reputation: 1303

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

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

Use .toggleClass() instead:

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

You would also need to modify CSS for hover.

Demo

Upvotes: 1

Related Questions