CODEWITHSUNDEEP
jquery
nick danvery
nick danvery

Reputation: 41

Jquery fading in nested span

I recently started to learn jquery and I decided to write a little plugin as for an exercise.
Here's the jsfiddle link : http://jsfiddle.net/ndanvery/hy4cY/35/

Now I have 2 questions :

  1. Why do the span disappears then reappers when I click on it?
  2. I wanted to add some "blurred" on the background while the span is active : http://jsfiddle.net/ndanvery/hy4cY/34/
    But I don't want the span to be transparent ! Did I select the wrapper but omitted the .big class in my statement right?
    $('#wrapper:not(.big)').addClass("not_focused");

Anyway, thanks everyone for helping me out :)

EDIT :
I'm sorry but I have to admit that my problem wasn't very clear. What I was looking for in the first question was a way to actually let the span STAY visible when clicked and not to disappear!
Again, sorry for the misunderstanding...

Upvotes: 3

Views: 77

Answers (3)

Ian Routledge
Ian Routledge

Reputation: 4042

1) Your e.focus in your mouseup isn't working (it is null for me), so you are always going into the if statement which fades out the div. Then because of event capturing/bubbling your span click handler fires next which then fades it back in. You'd be better off checking if the element you clicked on directly (using e.target) wasn't a .big span, something like:

$(document).mouseup(function (e) {
    if(!$(e.target).hasClass(".big")) {
        $(".big").fadeOut("slow");
        $('#wrapper').removeClass("not_focused");
    }
});

2) Your selector $('#wrapper:not(.big)') says "Find the element with the id of wrapper that doesn't have a class of big", which isn't what you want, which just gives you the wrapper. You are fading out the wrapper which fades out everything inside it.

You could either fade out the children that aren't the one you clicked:

$("[id^=span]").click(function () {
    $("[id^=span]").not(this).addClass("not_focused");
    $(this).find('.big').fadeIn("fast");
    $('#wrapper:not(.big)').addClass("not_focused");
    $(this).dequeue();
});

Or you could fade out the wrapper and copy the .big span and append it to the document to after the wrapper so it would sit above.

Upvotes: 1

som
som

Reputation: 4656

$("div[id^=span]").click(function(e) {
    $(this).find('.big').fadeIn("fast");
    $(this).dequeue();
}).find('.big').click(function(e) {
    e.stopPropagation();
});

Try this it is working fine.

Upvotes: 0

Vimal Stan
Vimal Stan

Reputation: 2005

The answer to your first question: Event propogation

The answer to your second question is that you are setting the opacity for the wrapper which in turn affects the opacity for all its children. If you want only some of the wrapper's content to have a different opacity, you'll have to select those elements and specify the opacity for them.

Upvotes: 0

Related Questions