Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

Receive Fast Advice
Learn Programming Languages

Get Professional Website Reviews
Quick Troubleshooting Assistance

The Web Squeeze > Programming Your Website > Frameworks > Javascript

Jquery Div Buttons On Top Of Each Other

This is a discussion on Jquery Div Buttons On Top Of Each Other, within the Javascript section. This forum and the thread "Jquery Div Buttons On Top Of Each Other" are both part of the Frameworks category.

Reply to this topic

Start new topic

Jquery Div Buttons On Top Of Each Other, disabling buttons once other buttons are pushed etc

cosmicbdog View Member Profile	Nov 16 2008, 10:22 AM Post #1
Rapid Squeezer Posts: 146 Joined: 3-July 08	This is a few queries rolled into one but I think the solution is connected. Say you have a toggle setup with jquery... I need to know how to be able to disable that toggle should it be clicked. So a div that has both a toggle, and a hover on it. The hover action simply changes the background color to reflect that you are hovering an interactive item. The toggle then selects it and applies a different class. Got that working sweetly. What isn't working however is that in an ideal world, once you've clicked the button, it no longer continues to apply the hover actions. Its selected now and the way I've set it up, is that other buttons then appear inside the same div that you just clicked. This is where I hit a wall. Because there are now other buttons inside the div that has jquery applied to it to have toggle and hover actions those toggle and hovers are no longer relevant and infact, they make it so that I can't click the other buttons that are inside it. Long story short... how can I disable those hovers and toggles once the object they are applied to have been clicked? At the same time, how does one enable them again?

cosmicbdog View Member Profile	Nov 16 2008, 10:29 AM Post #2
Rapid Squeezer Posts: 146 Joined: 3-July 08	Not sure I conveyed the above very well so thought I'd give u a look at what I'm looking at https://triumphantevents.co.uk/booking.beta.php?type=gc-sme You can see if you hover over the event and location options how there is a hover effect. If you click on the blue area it then selects the appropriate input and then reveals the other button. If you then click 'show all events' you will see that it appears to work. The hover function of that button inside the big button works as it goes to purple. and when u click it, it reveals all the events. However the click function being performed is not from the 'show all events' button but the big blue button still which is working on a toggle. So thats a hack. Ideally I could have a button inside and have it do its own special things. I've tried putting a z-index way high on the 'show all events' button thinking maybe it just needed to be elevated some but that does nothing. I can get around all this of course there are other ways to achieve this... i'm more curious at getting around this. This post has been edited by cosmicbdog: Nov 16 2008, 12:36 PM

japh View Member Profile	Nov 16 2008, 10:41 AM Post #3
Squeeze Machine Posts: 510 Joined: 7-October 08 From: Australia	Hmm... I think I know what you're asking, but so I can be sure, are you able to link to an example? Then I can see your problem first hand and work out a solution for you -------------------- The more you visit, the more I'll post: http://japheththomson.com/

cosmicbdog View Member Profile	Nov 16 2008, 11:26 AM Post #4
Rapid Squeezer Posts: 146 Joined: 3-July 08	Looks like i beat u to it and posted a link while you wrote this post!

cosmicbdog View Member Profile	Nov 16 2008, 11:38 AM Post #5
Rapid Squeezer Posts: 146 Joined: 3-July 08	Here is a simple look at it... the following image shows the div that has the toggle and hover jquery scripts applied to it. Inside the div is a simple text link to a google map. I can't click it because now when I click it it just does the toggle script on the wrapping div. The browser however hovers over the link and it seems like its clicking it... that pointer just never makes it... deceived by the div! Picture_15.png ( 22.92K ) Number of downloads: 5

Rakuli View Member Profile	Nov 16 2008, 05:14 PM Post #6
Squeeze Machine Posts: 766 Joined: 13-February 08 From: Catching the squeezed drips downunder.	I think what you're looking for is the jQuery.unbind() function. This function unbinds any event handlers applied to an object. So you could do something like: CODE $('.show-all-events-div').click(function() { // Unbind events on the parent $(this).parent().unbind('click'); return true; // Proceed with default behaviour }); You could do something like that above. You may want to play around with storing the function in a variable so you can attach it again later. -------------------- Luke Dingle . com Turn Over a Playful Leaf on Web Design -- read about the javascript cat

cosmicbdog View Member Profile	Nov 16 2008, 08:58 PM Post #7
Rapid Squeezer Posts: 146 Joined: 3-July 08	Wow... you can put a function in a variable?! I just found this after reading your post Rakuli CODE var foo = function () { // code to handle some kind of event }; $("p").bind("click", foo); // ... now foo will be called when paragraphs are clicked ... $("p").unbind("click", foo); // ... foo will no longer be called. This is perfect.

Rakuli View Member Profile	Nov 16 2008, 09:04 PM Post #8
Squeeze Machine Posts: 766 Joined: 13-February 08 From: Catching the squeezed drips downunder.	Well "put a function in a variable" is one way of putting it. Essentially, in JavaScript, whenever you don't add the parenthesis to a function call, the actual function itself is returned. Whatever then holds it can be called as a function or attached to something else later. It's very handy for storing the functions held in event handlers, you can store them while you do something and then simply attach them again via the function reference inside the variable. -------------------- Luke Dingle . com Turn Over a Playful Leaf on Web Design -- read about the javascript cat

cosmicbdog View Member Profile	Nov 16 2008, 09:20 PM Post #9
Rapid Squeezer Posts: 146 Joined: 3-July 08	Can hover functions be held in variables as well? e.g CODE var eventHover = function() { // stuff }, function() { // stuff }; ? Seems I can get this method working with a simple click function, but with a hover it doesn't like me. I'll keep trying This post has been edited by cosmicbdog: Nov 16 2008, 09:27 PM

cosmicbdog View Member Profile	Nov 16 2008, 09:30 PM Post #10
Rapid Squeezer Posts: 146 Joined: 3-July 08	I get it... Hover binds or toggles need to work like so CODE $(this).hover(functionA,functionB); So I just need to split my variable with the 2 functions into 2 variables

cosmicbdog View Member Profile	Nov 16 2008, 09:38 PM Post #11
Rapid Squeezer Posts: 146 Joined: 3-July 08	Turns out I can unbind the click functions... its these dual function functions I am stuck on. Hovers and toggles.

Rakuli View Member Profile	Nov 16 2008, 09:55 PM Post #12
Squeeze Machine Posts: 766 Joined: 13-February 08 From: Catching the squeezed drips downunder.	With jQuery, toggle and hover work differently. They attach events to click and mouseover/mouseout respectively. To unbind hover or unbind click you would need to unbind the 'click' and 'mouseover'/'mouseout' events and pass the function you wish to unbind. -------------------- Luke Dingle . com Turn Over a Playful Leaf on Web Design -- read about the javascript cat

cosmicbdog View Member Profile	Nov 16 2008, 10:12 PM Post #13
Rapid Squeezer Posts: 146 Joined: 3-July 08	I was thinking that is what I might need to do. Thank for the guiding hand!!!

cosmicbdog View Member Profile	Nov 16 2008, 10:45 PM Post #14
Rapid Squeezer Posts: 146 Joined: 3-July 08	success thanks again!

cosmicbdog View Member Profile	Nov 16 2008, 11:12 PM Post #15
Rapid Squeezer Posts: 146 Joined: 3-July 08	I spoke to soon... it appears my code has no trouble unbinding things, but rebinding them doesn't work so well. here is my variables an js CODE var hoverEventa = function() { $j('.eventWrapper').removeClass('rollover'); $j(this).addClass('rollover'); }; var hoverEventb = function() { $j(this).removeClass('rollover'); }; var clickEvent = function() { $j('#eventID').attr('value',$j(this).attr('id')); $j(this).removeClass('rollover'); $j('.eventWrapper').hide('fast'); $j('#'+$j(this).attr('id')).show('fast').addClass('eventSelected'); $j('#showAll'+$j(this).attr('id')).show('fast'); $j(this).unbind('click',clickEvent); $j(this).unbind('mouseover', hoverEventa); }; // the initial page loading binding $j('.eventWrapper').bind('click',clickEvent) $j('.eventWrapper').bind('mouseover',hoverEventa); $j('.eventWrapper').bind('mouseout',hoverEventb); // the problematic function $j('.showAll').click( function(){ $j('.eventWrapper').show(); $j('.showAll').hide('fast'); $j('.eventWrapper').removeClass('eventSelected'); $j('.eventWrapper').bind('mouseover', hoverEventa); $j('.eventWrapper').bind('click', clickEvent); } ); If you look at that last function, .showAll... in its current form like that it doesn't perform its operation. It appears to me that what it actually does, is when I click the showall button, its supposed to display all these others DIVS... yet I think that because I have the bind function in there, it performs the showall, but then binds the click function to the div below it and then actually even performs that click. So Im left looking at the same single event as last time. Question: if you bind something inside a function, is it going to perform whatever you setup as a bind? If its in a click function, and the new bind is a click on the div its inside, is it going to perform that bind? So I gave the following a go CODE $j('.showAll').click( function(){ $j('.eventWrapper').show().removeClass('eventSelected'); $j('.showAll').hide('fast', function() { $j('.eventWrapper').bind('mouseover', hoverEventa); }); } ); Which is basically the same as before with a few lines combined. Now with that it does show all the events... so I believe its true that if the bind is inside something it will bind it, AND perform it. The question is now how do I overcome the challenge of having it bind this function on the click, without performing it?

cosmicbdog View Member Profile	Nov 17 2008, 01:01 AM Post #16
Rapid Squeezer Posts: 146 Joined: 3-July 08	solved Instead of rebinding the click function to the div that wrapped the button to the click of the .showAll, I added a bind function to the rollover. Now it seems to work nicely

« Next Oldest · Javascript · Next Newest »

If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!

Reply to this topic

Start new topic

1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)

0 Members:

Similar Topics

Similar Topics

Similar Topics

		Topic Title	Replies	Topic Starter	Views	Last Action
		PHP Remembering Radio Buttons Selection	5	edd	218	26th March 2008 - 03:37 AM Last post by: c010depunkk
		Javascript Jquery - Set Css Element	2	Jason	382	6th May 2008 - 07:33 AM Last post by: Rakuli
		Javascript Jquery Examples	8	unitedcraig	575	9th September 2008 - 10:03 PM Last post by: Monie
		Javascript Jquery Innerhtml --> Dom	10	MikeHopley	1,273	21st June 2008 - 07:40 PM Last post by: karinne
		Javascript Jquery Problem	19	jackfranklin	609	21st June 2008 - 07:39 PM Last post by: karinne

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum