I am looking to use the same panel across multiple pages in a jQuery multipage HTML file. My goal is to have consistent code throughout all pages.
However, I am encountering an issue with the positioning of external panels. Currently, it seems that external panels always open at full page height. I would prefer them to behave like the panel on the jQuery Mobile demo page:
- always visible on larger screens (e.g. desktop browser), and
- when visible, remain "inside" the page (e.g. below the header).
In summary, I want to create an external panel that mimics the exact behavior of the internal panel on the demo page.
My initial idea was to include an external HTML file on each page so I could easily edit one file for all instances. However, this approach presented challenges as elements ended up sharing the same ID (particularly forms within the panel).
Is there a more efficient solution to address this problem?