Skip to content

Instantly share code, notes, and snippets.

@johnfmorton
Created August 2, 2023 15:29
Show Gist options
  • Save johnfmorton/90511048466c6278aa27568d9a19bf46 to your computer and use it in GitHub Desktop.
Save johnfmorton/90511048466c6278aa27568d9a19bf46 to your computer and use it in GitHub Desktop.
Doxter CP sticky header position tweak for Craft CMS
// This is a small fix for the sticky header position for Doxter, https://github.com/verbb/doxter
// I've included it in the Craft CMS control panel with another plugin, https://github.com/doublesecretagency/craft-cpjs
// but it could also be included in a custom module.
let resizeTimeout
let styleTag
let ruleIndex
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout)
resizeTimeout = setTimeout(resetDoxterHeaderTop, 350)
})
window.addEventListener('load', () => {
// Create a style tag once on page load
styleTag = document.createElement('style')
document.head.appendChild(styleTag)
resetDoxterHeaderTop()
})
function resetDoxterHeaderTop() {
// get rid of old styleTag
if (ruleIndex !== undefined) {
styleTag.sheet.deleteRule(ruleIndex)
}
// get #header element
const header = document.getElementById("header");
if (header){
ruleIndex = styleTag.sheet.insertRule(
`.doxter .editor-toolbar {
z-index:2;
top: ${header.clientHeight}px;
} `,
0
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment