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

$\endgroup$
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

$\endgroup$
  • $\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$ – Michael McCain Oct 5 '16 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$ – Karsten 7. Oct 5 '16 at 22:59
  • $\begingroup$ That worked! Nice and clean transition now. +1000000. TY $\endgroup$ – Michael McCain Oct 5 '16 at 23:04
  • 1
    $\begingroup$ The PaneSelector option setting ContentPadding -> False can be used to prevent a vertical movement during the transitions. $\endgroup$ – Karsten 7. Oct 5 '16 at 23:33
  • $\begingroup$ @Karsten7. I added what it looks like on my laptop, some weirdness going on... $\endgroup$ – M.R. Oct 6 '16 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...

$\endgroup$
  • $\begingroup$ You are good at this. :) $\endgroup$ – yode Oct 6 '16 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"]
}
$\endgroup$
  • $\begingroup$ is the transparency for seeing the content scrolling under the docked bar possible? $\endgroup$ – M.R. Oct 6 '16 at 1:14
  • $\begingroup$ @M.R. so Karsten answered that already :) I forgot about that option :) $\endgroup$ – Kuba Oct 6 '16 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 '16 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 '16 at 6:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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