show/hide

[Shikkediel]

It’s only missing the flashing effect when closing a widget.

That’s kind of a shortcoming in the original functionality, it requires for the shadow element to be put outside of the widget and be positioned with javascript. A css approach is a lot cleaner.

Edit – much had to be altered… but here’s a version that does the animations with jQuery so it’s a lot easier to tweak the effect.

Link

$('.widget-hide').click(function() {

  $(this).closest(matter).next(haze).stop().fadeTo(200,0.3).delay(300).fadeTo(50,0);
});

When clicking the close button the shadow first fades to opacity 0.3 in 200ms, waits 300ms then fades out completely in 50ms.

fadeTo(200,0.3).delay(300).fadeTo(50,0)

[Beverleyh]

TS decided to use another draggable script

Yes I know but being as its a combination of the work we’ve both done, and the “box-shadow on move” was a feature I already implemented (noted here https://css-tricks.com/forums/topic/showhide/page/3/#post-241293), I thought you’d extract that part too :)

[Shikkediel]

It’s cool, gotta admit I kinda overlooked it while mostly checking your page that’s without the draggable script…

Replicating the original effect turned out to not be very doable with a box-shadow alone by the way.

:-s

[Shikkediel]

I’m actually also not that great with css animations and am only now learning that you can stack transitions and animate box-shadow separately.

[Allie_P]

That’s kind of a shortcoming in the original functionality, it requires for the shadow element to be put outside of the widget and be positioned with javascript. A css approach is a lot cleaner.

Edit – much had to be altered… but here’s a version that does the animations with jQuery so it’s a lot easier to tweak the effect.

Oh, that’s not what I meant.
I was talking about the navigation menu at the top. That’s what should flash when you close one of the widgets. Take a look here.

[Shikkediel]

Okay, that was probably wasted time then. Lol.

For what you mentioned, another small plugin is needed. Colour animations aren’t a standard option.

http://www.bitstorm.org/jquery/color-animation/

Would be a single line of code but I’m not sure with which pen to proceed. Is the first or second example more to your liking?

Edit – I think I’d prefer to use the latest example… the styling was made a lot cleaner as well.

[Shikkediel]

Wow, what was I thinking before @Beverleyh… your two lines of code are about a hundred times more elegant than the spaghetti I put together.

Using jQuery animations for it as in the latest pen has it advantages though when it comes to control. And using the special easing plugin, the choice of effects is pretty neat as well.

I’ve added the flashing background colour for the menu by the way. That was a piece of cake.

$('.widget-hide').click(function() {

    $(this).closest(matter).next(haze).stop().fadeTo(200,0.3).delay(300).fadeTo(50,0);
    /* this line */ $('.navigation').animate({'background-color': 'black'}, 40).animate({'background-color': '#ddd'});
});

[Allie_P]

@Shikkediel @Beverleyh
It looks and works real good now. Thank you both very much for your help.

One other question, though… would it be possible to have each navigation link open multiple widgets? Not opening widgets from other links, but simply opening several widgets instead of only one…

[Shikkediel]

That looks rather hard to achieve if they should also have individually placed random positions. But relatively easy to achieve by using a single widget with multiple child elements…

[Allie_P]

relatively easy to achieve by using a single widget with multiple child elements…

How so?

I forgot to mention that they should then have to be closed one by one.

You’d close the first one (any of them) and the link would reappear in the navigation menu just like it does now. Then as you close the remaining widgets and the navigation link is already there, it should only flash. I hope that was not too confusing…

[Shikkediel]

Okay, I understand what you are saying but that would mean the script has to be rewritten extensively as far as I can see. Maybe @Beverleyh can have a glance if it’s doable for her without a whole lot of effort. Not underestimating her skills, I suspect not though.

[Allie_P]

@Shikkediel, I’ve found an issue with the shadow effect.

The widget and its respective shadow should behave as a single element, meaning that when you have one widget partially on top of another the shadow of the widget that’s on top should also be on top of the other widget.

If you look at the yellow widget you’ll notice that its shadow is behind the blue widget. It shouldn’t, it should be in front of it.

Is that fixable?

http://i.imgur.com/RVMlK2Q.png

[Shikkediel]

Fixed. :-)

Link

[Beverleyh]

Okay, I understand what you are saying but that would mean the script has to be rewritten extensively as far as I can see. Maybe @beverleyh can have a glance if it’s doable for her without a whole lot of effort. Not underestimating her skills, I suspect not though.

Sorry, I haven’t logged on in over a week – I’m still on holiday at the moment. The timing isn’t great as I have a new website launch booked when I get back, so I’m not sure if this is something I’ll be able to look at again for a few weeks, if at all. It would require a re-write for sure and unfortunately I don’t have much free time ATM. Sorry.

[Author]

Posts