What is the best way to hide everything in the main page under the jsPanel

[AviHafner]

Hi Stefan

When I run the contentAjax method. In the fetched page I add the attributes display: none And visibility:hidden on every element that I want to hide.

How I the done the same thing for a regular Panel that is not contentAjax ? I guess there is a way in callback to add a css file And remove the css onclosed. But my question is: what is the simple way to do this action? Yours Avi

[Flyer53]

Hi Avi,

That's something you have to do with javascript. jsPanel doesn't include anything to add/remove css stylesheets. You might want to look at the following two resources:

https://makitweb.com/dynamically-include-script-and-css-file-with-javascript/

https://quantumwarp.com/kb/articles/59-javascript/664-removing-or-replacing-a-css-stylesheet-with-javascript-jquery

Best Regards, Stefan

[AviHafner]

Thanks Stefan Your links are helpful to me. I'll explore the topic next week. And I will send you the best solution that I have chosen, to receive your comments.

Best Regards, Avi

[AviHafner]

Thanks Stefan

The sample solution you submitted is perfect.

At the Head of the html document I added : <link rel="stylesheet" href="Css/AppealDisabledElements.css" type="text/css" disabled="true" id="DisabledElements" />

In Jspanel I added :

callback: function () { let css = document.querySelector('#DisabledElements'); if (css) css.disabled = false; }, onclosed: function () { let css = document.querySelector('#DisabledElements'); if (css) css.disabled = true; }

And its work like charm.

Thanks Stefan Yours Avi

[AviHafner]

Hey Stefan I would like to update you, that the way I implemented your advice did not work in Firefox.

The second link that you sent to me that explains how to load css file that hiding objects, work like charm,in all the browsers.

Thank you very much for all the research that you invest in all of my questions, And for all the good advice and the quality results that you provide me. You're one of the best advisors that I have, Which turn me into a better profession man, and the products that I developing to the better products.

The code The code I'm running in callback:/ onclosed:

function addCSS(filename, id) { var head = document.getElementsByTagName('head')[0];

var style = document.createElement('link');
style.href = filename;
style.type = 'text/css';
style.rel = 'stylesheet';
style.id = id;
head.append(style);

}

function removeCSS( id) { var head = document.getElementsByTagName('head')[0];

let el = head.querySelector('#' + id);
if (el)        el.parentNode.removeChild(el);

}

Thank you your Avi Hefner

[Flyer53]

@AviHafner Hi Avi, What exactly is not working? Please specify 😏

And thank you very much for the praise. I just try to help as good as I can with my modest javascript knowledge. After all, helping others helps me as well ... more often than not ... 😄

Dynamic unload of CSS: The fact that you can remove the link tag from the DOM doesn't necessarily mean that the CSS rules are removed as well. It might work in a specific browser but not in another one. There is nothing you can do about it as far as I know. Dynamic unload of JS: Not possible as far as I know! You can also remove the script tag from the DOM but that will not remove the already parsed JS code.

Yours, Stefan

PS: If it's about loading/unloading of CSS/JS I would ask you to move this discussion to a private email (info@jspanel.de) since it's not a jsPanel issue.

[AviHafner]

Hello Stefan

The first method that I tried, and it does not work in Firefox but in the rest of the browsers it works. Is to put the CSS file name at the Head of HTML, And make by code the file Disable or Enable.

The second method that works in all the browsers is to load and remove the CSS file dynamically . Yours Avi Hafner