17
$\begingroup$

I like to create dock cells, that enhance the look of my notebooks. Do you know of a simple way to get the functionality in iBooks shown below in the video. I want the dock cell in Mathematica to "fade" into view when my cursor hover over it and "fade" out when it's not hovering over it.

enter image description here

Edit 1: Thank you Karsten. This is exactly what I was looking for. Below is a gif implementing a version of your code.

enter image description here

Improve this question
$\endgroup$

3 Answers 3

Reset to default
19
$\begingroup$

Edit: Fading overlay window

In order to get a top dock element with real transparency, one can create a window that overlays the current notebook window and adjusts its position together with it.

With[{nb = EvaluationNotebook[]},
  DynamicModule[{wm, ws},
   CreateWindow[
    PaletteNotebook[
     {DynamicWrapper[TextCell["Click OK to close", Orange], 
       ws = {CurrentValue[nb, WindowSize][[1]] - 15, 100}; 
       wm = AbsoluteCurrentValue[nb, WindowMargins] + {{7, 0}, {70, 50}}, 
       Initialization :> (wm = 
          AbsoluteCurrentValue[nb, WindowMargins] + {{7, 0}, {70, 50}}; 
         ws = {CurrentValue[nb, WindowSize][[1]] - 15, 100})],
      DefaultButton[]}
     , WindowMargins -> Dynamic[Setting@wm], WindowSize -> Dynamic[Setting@ws]
     , TextAlignment -> Center]
    , Background -> Blue
    , WindowOpacity -> 
     Dynamic[1/
       100 (150 - 
         Replace[MousePosition["WindowAbsolute", {0, 1}], None -> {0, 150}][[2]])]
    , WindowFloating -> True, WindowElements -> {}, WindowFrame -> "Frameless"
    , WindowFrameElements -> {}]
   ]];

TopDock

One can use PaneSelector to create a fading effect.

CurrentValue[EvaluationNotebook[], DockedCells] =
 Cell[BoxData@ToBoxes@PaneSelector[{
      False -> 
       Panel["", ImageSize -> {Full, Automatic}, Appearance -> "Frameless"],
      True -> Panel["Hi", ImageSize -> {Full, Automatic}, Alignment -> Center]
      },
     Dynamic@CurrentValue["MouseOver"]
     , ImageSize -> All
     , ImageMargins -> 0, FrameMargins -> None
     , TransitionEffect -> "Fade", TransitionDirection -> Bottom, TransitionDuration -> 0.75
     ]
  , CellFrameMargins -> {{0, 0}, {0, 0}}]

DC1

The size of the DockedCells can be reduces, when the mouse isn't hovering over it:

CurrentValue[EvaluationNotebook[], DockedCells] =
 Cell[BoxData@ToBoxes@PaneSelector[{
      False -> Panel["", ImageSize -> {Full, 0}, Appearance -> "Frameless"],
      True -> Panel["Hi", ImageSize -> {Full, 100}, Alignment -> Center]
      },
     Dynamic@CurrentValue["MouseOver"]
     , ImageSize -> Automatic
     , ImageMargins -> 0, FrameMargins -> None
     , TransitionEffect -> "Fade", TransitionDirection -> Bottom, TransitionDuration -> 0.75
     ]]

DC2

Improve this answer
$\endgroup$
11
  • $\begingroup$ I implemented your code. It works great. See new gif in original post. I do get some strange behavior with the images fading in and out from right to left or sometimes jumping without fading. The TransitionDirection option doesn't seem to help. Thank you. $\endgroup$
    – B flat
    Oct 5, 2016 at 22:36
  • 1
    $\begingroup$ @MichaelMcCain The TransitionDirection has no effect, when the TransitionEffect is "Fade". The fading effect is "cleaner", when using False -> Invisible@Panel[...] with Panel[...] being the same one as for True. $\endgroup$
    – Karsten7
    Oct 5, 2016 at 22:59
  • $\begingroup$ That worked! Nice and clean transition now. +1000000. TY $\endgroup$
    – B flat
    Oct 5, 2016 at 23:04
  • 1
    $\begingroup$ The PaneSelector option setting ContentPadding -> False can be used to prevent a vertical movement during the transitions. $\endgroup$
    – Karsten7
    Oct 5, 2016 at 23:33
  • $\begingroup$ @Karsten7. I added what it looks like on my laptop, some weirdness going on... $\endgroup$
    – M.R.
    Oct 6, 2016 at 0:00
6
$\begingroup$

Here's my take (works smooth for macOS sierra). 

content = Row[Button /@ {"a", "b", "c"}, " "];

CurrentValue[EvaluationNotebook[], DockedCells] = 
 Cell[BoxData @ ToBoxes @ Mouseover[
     ExpressionCell[Pane[Invisible@Button@""], "Text"], 
     ExpressionCell[Pane[content, ImageSize -> Full, Alignment -> Center], "Text"], ImageSize -> Full, TransitionEffect -> "Fade"], 
  Background -> Transparent, CellFrame -> 0]

enter image description here

But the dock isn't transparent! Don't know if that's possible...

Improve this answer
$\endgroup$
1
  • $\begingroup$ You are good at this. :) $\endgroup$
    – yode
    Oct 6, 2016 at 17:01
5
$\begingroup$

Smooth fade effect probably won't be simple but here is a start:

CurrentValue[ EvaluationNotebook[],  DockedCells] = {
   Cell[ BoxData @ ToBoxes @ Mouseover[
      1,
      Grid@RandomReal[1, {3, 3} ],
      ImageSize -> {Full, Full}, 
      Alignment -> Center], 
    "DockedCell"]
}
Improve this answer
$\endgroup$
4
  • $\begingroup$ is the transparency for seeing the content scrolling under the docked bar possible? $\endgroup$
    – M.R.
    Oct 6, 2016 at 1:14
  • $\begingroup$ @M.R. so Karsten answered that already :) I forgot about that option :) $\endgroup$
    – Kuba ♦
    Oct 6, 2016 at 5:31
  • $\begingroup$ I'm not sure about that, I did try the suggestion about using Background -> Transparent, this doesn't work $\endgroup$
    – M.R.
    Oct 6, 2016 at 5:57
  • $\begingroup$ @M.R. ah, I see. Maybe there is a way but I'm not aware of it :/ $\endgroup$
    – Kuba ♦
    Oct 6, 2016 at 6:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.