- This topic is empty.
May 12, 2016 at 12:00 pm #241565
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.May 13, 2016 at 4:30 am #241585BeverleyhParticipant
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:
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.htmMay 14, 2016 at 5:01 am #241601May 16, 2016 at 12:05 pm #241686
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.May 16, 2016 at 7:24 pm #241769
Here’s the parallax effect and optimised randomisation (using most of the script of the other pen) :
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…May 17, 2016 at 9:43 am #241801
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.
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.May 17, 2016 at 3:51 pm #241809
No probz. Took a CSS approach with the shadow so far. Have a look if it’s working for ya.May 18, 2016 at 12:38 am #241816May 18, 2016 at 10:26 am #241841
That’s just a matter of minor styling. Thought it looked nicer myself…May 18, 2016 at 11:07 am #241842
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?May 18, 2016 at 11:43 am #241843bearheadParticipant
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
box-shadow: 5px 5px 0px rgba(0,0,0,.5);
Then you could just remove the after pseudo class altogether.May 18, 2016 at 1:49 pm #241847
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
beforepseudo 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-pMay 19, 2016 at 1:32 am #241858
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… ;)May 19, 2016 at 4:16 am #241870BeverleyhParticipant
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.htmMay 19, 2016 at 4:24 pm #241890