Sliding Panel

WEB TMS WEB Core
1

Is there a TMS//Delphi way to do a sliding panel in TMS WEB Core, something like:

I want to avoid writing javascript if possible. I can of course set the width of a panel to 0 or nonzero but the appearance and disappearance is abrupt. I could attach it to a timer to animate the change but I wanted to check first there is something I can use out of the box?

2

I see this is all HTML & CSS based except for 2 JavaScript calls which are easily replaced by Object Pascal code in TMS WEB Core

function openNav() {
  document.getElementById("mySidepanel").style.width = "250px";
}

procedure OpenNav;
var
  el: TJSHTMLElement;
begin
  el := TJSHTMLElement(document.getElementById('mysidepanel');
  el.style.setProperty('width','250px');
end;

/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
  document.getElementById("mySidepanel").style.width = "0";
}

procedure OpenNav;
var
  el: TJSHTMLElement;
begin
  el := TJSHTMLElement(document.getElementById('mysidepanel');
  el.style.setProperty('width','0px');
end;
1 Like