Widget usage example #18: Overlay a browser widget with an "action bar" (new: v1.0.3) (The "action bar" is the only content of a second browser widget)
- Browser Widget
- Layering Native Layer Widgets - forums
There are, in regular intervals, discussions about overlaying a browser widget. We know that this is possible if you bundle your controls in a floating ("system"-layered) stack. But it is not possible with ordinary LC controls of a card because the browser widget uses a native layer. However, there is another way to get a "Bar" containing buttons etc.: We overlay the browser with another browser widget that contains only that bar, CSS styled and using javaScriptHandlers. This sounds more complicated as it is, simply look at the attached example that shows a demo with rounded buttons, a timer, an url input, grouped radio buttons, a check button, an option button and a slider. Most of them have example actions connected (see the card's script), especially can you grab the widget (and optionally also the browser widget underneath) scale the content (whatever it is) of the browser widget underneath using the slider. Clicking the label "Scale" resets to scale 1. Outside the action bar you reach the widget underneath as usual. If that widget is animated and loads slowly (more than 1 second) then the action bar may be hidden. Then activate it with the escape key, shift-escape retains the current location of the action bar.
native-layer-widgets