onclick, click not working? jquery

Question

I'm simply trying to change a hover trigger to a click but for some reason any click function I use does not work?

This my current code that works when you hover...

Current Script Thats Working on hover...

    $showSidebar.hover(function() {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
    }, function() {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    });

But see my attempts below to get it work when clicked, but weirdly nothing happens.

My Attempt One

    $showSidebar.click(function() {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
    }, function() {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    });

and

My Attempt Two

    $showSidebar.on('click', function () {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
    }, function() {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    });

and a couple of others but nudda...

This is my mark up...

<a href="#" title="More" class="button blu large" id="show-sidebar"><span>//</span> MORE</a>

and my var

$showSidebar  = $("#show-sidebar");

Any ideas where I'm going wrong? Would be hugely helpful thanks!

See working code, thanks @hurshagrawal

$showSidebar.on('click', function () {
    if ($showSidebar.html() == '<span>//</span> CLOSE') {
        $wrapper.stop().animate({ left: "0" }, 300);
        $sidebarSlider.stop().animate({ width: "274px" }, 300);
        $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
    } else {
        $wrapper.stop().animate({ left: "-178px" }, 300);
        $sidebarSlider.stop().animate({ width: "452px" }, 300);
        $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);
        $showSidebar.html('<span>//</span> CLOSE');
    }
});

Using Firebug in FF do you get any javascript errors?

Cyclonecode
– Cyclonecode

2011-12-01 22:50:45 +00:00
Commented Dec 1, 2011 at 22:50 — Cyclonecode
– Cyclonecode, Commented Dec 1, 2011 at 22:50
Why do you pass 2 parameters into .click()?

zerkms
– zerkms

2011-12-01 22:51:38 +00:00
Commented Dec 1, 2011 at 22:51 — zerkms
– zerkms, Commented Dec 1, 2011 at 22:51
Nope, syntax errors, not nothing :-/

Joshc
– Joshc

2011-12-01 22:54:00 +00:00
Commented Dec 1, 2011 at 22:54 — Joshc
– Joshc, Commented Dec 1, 2011 at 22:54
@zerkms how do you mean?

Joshc
– Joshc

2011-12-01 22:55:07 +00:00
Commented Dec 1, 2011 at 22:55 — Joshc
– Joshc, Commented Dec 1, 2011 at 22:55
@Krister Andersson: how about second code sample?

zerkms
– zerkms

2011-12-01 22:55:12 +00:00
Commented Dec 1, 2011 at 22:55 — zerkms
– zerkms, Commented Dec 1, 2011 at 22:55

rkw · Accepted Answer · 2011-12-01 22:53:37Z

3

I think you are looking for the .toggle() command:

$showSidebar.toggle(function() {
    $wrapper.stop().animate({ left: "-178px" }, 300);
    $sidebarSlider.stop().animate({ width: "452px" }, 300);
    $latestTweet.stop().animate({width: "452px", top : "-1px", backgroundColor: "#464848" }, 300);              
}, function() {
    $wrapper.stop().animate({ left: "0" }, 300);
    $sidebarSlider.stop().animate({ width: "274px" }, 300);
    $latestTweet.stop().animate({ top : "-1px", width: "274px", backgroundColor: "#464848" }, 300);
});

answered Dec 1, 2011 at 22:53

rkw

7,2974 gold badges28 silver badges39 bronze badges

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

2 Comments

Joshc Over a year ago

Yeah good call... but one problem, I need to control the second alternation via another script, with toggle, if I click on the a#show-sidebar button when second alternation is run by another script, then it runs the second alternation again instead of starting at the beginning.

rkw Over a year ago

Not sure if I understand you correctly; are you saying that there is another script that executes code similar to clicking the sidebar? If that is the case, it is better to pipe that other code into actually clicking the side bar: e.g. function SomeOtherCode() { showSidebar.trigger('click'); }.

hurshagrawal · Accepted Answer · 2011-12-01 22:55:20Z

1

I don't think $.click() takes 2 functions as parameters. Did you try taking the second function out? If you're trying to toggle between the two, you might have to write something with an if-else in there.

EDIT: Ah, or use .toggle().

answered Dec 1, 2011 at 22:55

hurshagrawal

6836 silver badges16 bronze badges

1 Comment

Joshc Over a year ago

Yep, your right, doesn't work like this, need to rewrite it a bit. Cheers

Wayne · Accepted Answer · 2011-12-01 23:00:32Z

0

Try using bind(), I've found that more reliable across browsers.

http://api.jquery.com/bind/

basic usage in your case would be (untested):

$showSidebar.bind('click', function() {
  // do stuff
});

answered Dec 1, 2011 at 23:00

Wayne

334 bronze badges

1 Comment

Joshc Over a year ago

interesting, will try this out now.

Collectives™ on Stack Overflow

onclick, click not working? jquery

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related