1

As part of a site I'm trying to design I have a div with the id "powersettings" when clicked it toggles a div with the id "powermenu" and toggles the class "blur" on my "content" div and "tab a"s, this is all done successfully.

I'm trying to make my "tab a"s unbind(click) when "powersettings" is clicked, this is successful. However I want it to bind(click) when "powersettings" is clicked again to close the "powermenu"...can anyone tell me how to do this?

My relevant jQuery code:

$("#powersettings").click(function () {
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    $("#tab a").unbind("click")
});

Thanks

Andrew

Update 1: ("#tab a") relates to code that changes my divs content based on menu selection: 

$('#tab a').click(function(e){
  hideContentDivs();
  var tmp_div = $(this).parent().index();
  $('.main #content').eq(tmp_div).fadeIn(2000);
});

function hideContentDivs(){
    $('.main #content').each(function(){
       $(this).hide();
    });
}
    hideContentDivs();
    $('.main #content').eq(0).fadeIn(2000);});

Update 2: as requested heres my html code for the divs and power menu

<div class="menu">
<div class="tab" id="tab"><a href="#">Home</a></div>
<div class="tab" id="tab"><a href="#">Page 1</a></div><div class="tab" id="tab"><a href="#">Page 2</a></div>
<div class="tab" id="tab"><a href="#">Page 3</a></div>
</div>

Above is the HTML Code for the tabs and menu links. The power menu is simply a with the id and class "powermenu" as I haven't added anything to the div yet.

Deleted
  • 29
  • 2
  • 7
  • can you make a fiddle for this? – NewUser Nov 29 '13 at 02:06
  • How are you binding the `click` events to those `#tab a`? Only via jQuery? That matters to the "rebind" step. – acdcjunior Nov 29 '13 at 02:13
  • do you mean when "powersettings" is clicked again , $("#tab a") will also rebind some "click" event again? – andyf Nov 29 '13 at 02:24
  • @NewUser - I have no idea how to make a fiddle, would that mean uploading all my code because theres alot, I only posted the relevant bit. – Deleted Nov 29 '13 at 02:46
  • @acdcjunior - Thats the question I want answered, how do I rebind click to the $("#tab a"), I want it to re-bind when the same button that unbinds it is clicked for a second time. – Deleted Nov 29 '13 at 02:50
  • @andyf - Yes, When "powersettings" is clicked again I want it to rebind click to $("#tab a"). – Deleted Nov 29 '13 at 02:50
  • By "How are you binding" I mean, are you using the (inline) `onclick` attribute? Or are you binding only via jQuery's `.click()`? Or are you also using `element.onclick = function(){}`? Or are you using `.addEventListener()`? You see, there are many possibilities. If you narrow down and eliminate some of these (that is, by saying, I'm only binding through jQuery), then things would be much easier. – acdcjunior Nov 29 '13 at 03:34
  • @acdcjunior - Sorry, I'm quite new to jQuery and this is my first project involving it. I'm using `$("#tab a").click(function(){morecode});` in my jQuery script, thats the only one I know how to use. – Deleted Nov 29 '13 at 03:39
  • Can you show the part where you do `$("#tab a").click(function(){morecode});` ? If you can change it, I believe we can find a solution/workaround. – acdcjunior Nov 30 '13 at 00:11
  • @acdcjunior - Sorry for the delay in my response, I'm away at the moment, the "'tab a" relates to a function of my menu to change the content of the divs. I have updated my first post with this code. – Deleted Nov 30 '13 at 12:43
  • @aw555000 there are several problems with this code, since @andyf answer should work I would suspect something else. 1. notice that ```hideContentDivs``` function is calling it self recursively. not sure if you intent that behavior (and if so - why?) 2. are tabs created dynamically and added to the dom after document.ready is fired? maybe with some other jquery plugin, jquery ui tabs etc? if so this can be part of the problem. if so you may need to use ```$.on``` (that replaced ```$.live```) see [this](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – alonisser Nov 30 '13 at 13:04
  • @acdcjunior, As I said I've very new to jQuery and as such that is the only part of my code I didn't write, I stole it from a website and edited the elements to match my div ID's. If there is a better way for loading different divs into the same space from a menu then I'm up for using that instead. The "#Tabs" and ".main #Content" are html divs. – Deleted Nov 30 '13 at 15:22
  • I added a snippet if you want to give a try. It does not do a binding/unbinding, but may achieve what you need. – acdcjunior Nov 30 '13 at 19:08

2 Answers2

0

As function .toggle(fn1, fn2...) deprecated (See: http://forum.jquery.com/topic/beginner-function-toggle-deprecated-what-to-use-instead)

You can do like this:

var clicked = true;
$("#powersettings").click(function () {
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    if (clicked) {
        $('#tab a').off('click',foo);
        clicked = false;
    }
    else {
        $('#tab a').on('click',foo);
        clicked = true;
    }
});

Here is a fiddle(http://jsfiddle.net/android/3U4sK/1/).

As your updated code, the foo function should like this:

function foo(e){
  hideContentDivs();
  var tmp_div = $(this).parent().index();
  $('.main #content').eq(tmp_div).fadeIn(2000);
}
Praveen Reddy
  • 7,099
  • 2
  • 18
  • 39
andyf
  • 2,928
  • 3
  • 19
  • 35
  • That didn't work, It still unbinds the "#tab a"'s but doesn't rebind them. – Deleted Nov 29 '13 at 18:21
  • I updated the answer. Rebind not work because i miss the function name in bind/unbind(See the fiddle). – andyf Dec 01 '13 at 15:24
  • I retried this code and it still doesn't work, the content divs don't show up any more neither does the power or colour menu. – Deleted Dec 01 '13 at 16:48
  • Can you provide a fiddle? – andyf Dec 02 '13 at 05:38
  • Yep, http://jsfiddle.net/aw555000/b3CJg/ the viewing window messes up some of my positioning though – Deleted Dec 02 '13 at 10:42
  • Thank you :) my creations are always inventive and original (My first website was based on a tablet ui, this one is based on a computer :) Your update to my code has performs perfectly :D Thank you for help with my code :D – Deleted Dec 02 '13 at 19:07
0

This requires some small change in your code, but should solve.

1- Remove the unbind() line, as it will no longer be necessary:

$("#powersettings").click(function () {
    $("#powermenu").toggle();
    $(".content, .tab").toggleClass('blur');
    // $("#tab a").unbind("click") // remove this line
});

2- Add an if statmentent to the click() of #tab a:

$('#tab a').click(function(e) {
    if ($("#powermenu").is(':visible')) {
        return; // if #powermenu is not visible, do nothing (quit the function)
    }
    hideContentDivs();
    var tmp_div = $(this).parent().index();
    $('.main #content').eq(tmp_div).fadeIn(2000);
});

How it works: as you are toggling #powermenu's visibility ($("#powermenu").toggle();) on #powersettings' click ($("#powersettings").click(function () {...). You seem to want to #tab a's clicks have no effect while #powermenu is hidden. This code does that.

acdcjunior
  • 114,460
  • 30
  • 289
  • 276
  • I want the #tab a's not to work while the power menu is open, I tried your code and like andyf's code it stopped both menus from popping up and stops content divs being shown...I don't know why none of this code is working... – Deleted Dec 01 '13 at 16:51
  • Ok, maybe we are getting it wrong. Change `:hidden` to `:visible`. Give it a try. – acdcjunior Dec 01 '13 at 17:02
  • It still doesn't work and completely stops my jquery script from working...I really don't understand whats going on with my code – Deleted Dec 01 '13 at 19:09
  • Hm, so this is confusing. It seems we are getting the problem wrong. Maybe showing more of your javascript code and html would make it easier to get help. – acdcjunior Dec 01 '13 at 19:30
  • Perhaps it would work if I toggle something, for example class and it have it so the menu links are only active when its on the ".tab" as oppose to another class? is that possible to do? – Deleted Dec 01 '13 at 19:30
  • Yeah, it is. You'd have to bind the click event using `on()`, like `$(document).on('click', '.tab', function() { /* ... */ });`. -- This is necessary because when you bind using `.click()`, the event is bound to the element, and even if you change the element's properties, the event will still be bound. – acdcjunior Dec 01 '13 at 19:33
  • urm....Can you elaborate on that a little more please...as I said I'm new to jquery. I really am confused as to why simple things arent working – Deleted Dec 01 '13 at 19:36
  • Can you show some more of your HTML code? Perhaps the `#tab` and the `#powermenu`? Because right now anything I'd suggest would only solve the problem the code in my answer should have solved. And as it didn't help, my new tries won't help much as well. – acdcjunior Dec 01 '13 at 19:41
  • I have updated my original post with the html code for the "tabs" but the "#powermenu" is just an empty div at the moment. – Deleted Dec 01 '13 at 19:48