show/hide

[Shikkediel]

By the way, it’s possible to choose some of the widgets to be open by default (on load) and others to be closed (docked), right? I forgot to mention it before, but that’s kinda crucial to the whole thing.

I can look into it but that part sounds more like the expertise of @Beverleyh.

[Beverleyh]

OK – I’ve revised the scripts to include an option to initially hide widgets with a ‘.widget-hide-init’ class on the side dock list item.

Look for the extra code block in the widgetShow loop (in both demos)

Cookie demo, no drag+drop:
http://fofwebdesign.co.uk/template/_testing/widgets-show-hide-dock-cookie.htm

And a change to the showWidget() function in the drag+drop demo – Local Storage with drag+drop:
http://fofwebdesign.co.uk/template/_testing/widgets-show-hide-dock-drag-local-storage.htm

[Allie_P]

Thanks @Beverleyh, it’s working great. ;)

@Shikkediel, if you could add the shadow, flashing and parallax effects whenever you have some free time, I’d really appreciate it. Thanks so much!

[Shikkediel]

Gimme a little while… I’ll see if I can optimise the randomisation along with it. That doesn’t seem to be working as expected to the full extent.

[Shikkediel]

Here’s the parallax effect and optimised randomisation (using most of the script of the other pen) :

Demo

I added some background to see the effect better. The ratios for widget displacement caused by the parallax calculation aren’t automated and will have to be manually altered :

var ratio = [-0.05,0,0,0]

A negative number will send it towards to top, positive towards the bottom. Keeping the order of the HTML, separated by a comma.

Still some tweaking to be done as usual, I see…

[Allie_P]

The ratios for widget displacement caused by the parallax calculation aren’t automated and will have to be manually altered:

A negative number will send it towards to top, positive towards the bottom.

Got it.

It’s looking good. :)

Looking forward to see the flashing and shadow effects.

I could never do this JS stuff on my own, so thank you very much for your help.

[Shikkediel]

No probz. Took a CSS approach with the shadow so far. Have a look if it’s working for ya.

[Allie_P]

It can’t be blurred. It needs to be solid just like it is here.

[Shikkediel]

That’s just a matter of minor styling. Thought it looked nicer myself…

[Allie_P]

I thought so too, but for some reason couldn’t get it to work.
I see you’ve changed that now. Thanks.

It looks good except the shadow is not going behind the border, as it should, despite the negative z-index. Why is that?

[bearhead]

I haven’t been part of this thread, so maybe there is a good reason for not doing it, but it seems like it would make more sense to just put a box shadow on .widget?
something like: box-shadow: 5px 5px 0px rgba(0,0,0,.5);

Then you could just remove the after pseudo class altogether.

[Shikkediel]

Cheers, bearhead. I had used a box-shadow on the pseudo initially (but Allie_P didn’t prefer the blur). The original idea was to be able to animate the shadow’s opacity separate from the widget itself, that’s why I used an element of it’s own. I also had to put a workaround in place, using a before pseudo to create the background colour. It wouldn’t be possible to put the shadow pseudo behind the background otherwise. But I’m sure there’s some optimisation still possible.

It looks good except the shadow is not going behind the border, as it should, despite the negative z-index. Why is that?

I’m not really seeing it but it can probably be explained by the logic in the previous alinea nonetheless. Like the background colour of a parent, one can’t put a child lower than the parent itself. Let me have a look at a workaround.

Edit – yep, I actually do see what you mean now.

Back to the box-shadow now by the way, no need for positioning when I could’ve just removed the blur factor.

X-p

[Allie_P]

Yep, that’s it! Looks real good now.
It’s only missing the flashing effect when closing a widget.

If possible don’t update the previous pen, save as a new one instead.
It’s always helpful to have these different stages of development to go back to… ;)

[Beverleyh]

Re: box-shadow on “.widget”

I kind of wondered why you’d gone with a pseudo element too when this demo applied a CSS box-shadow to “.widget” by adding a “.move” class: http://fofwebdesign.co.uk/template/_testing/widgets-show-hide-dock-drag-local-storage.htm

[Shikkediel]

TS decided to use another draggable script, @Beverleyh…

I’ll have another look at how I stuck that part together in any case though, not too sure it’s the cleanest approach.

[Author]

Posts