A simple masthead template for Spotfire
Introduction
This template supports the following components:
- masthead-logo
- masthead-itle
- masthead-nav - page navigation
html
<DIV id="masthead" style="FONT-SIZE: 25px; BACKGROUND: #3498db; COLOR: white"></DIV> <div id="masthead-logo" > Logo </div> <h1 id="masthead-title" >JavaScript Masthead nav-dropdown for Spotfire</h1> <div id="masthead-nav" > <a>page 1</a> <a>page 2***</a> <a>page 3</a> </div> <div id="masthead-nav-icons" hidden>coffee,globe,grid,cpu</div> <div id="masthead-options" > <a>option 1</a> <a>option 2</a> <a>option 3</a> </div>
mashtead-simple.js
masthead = document.getElementById("masthead"); html = ` <table width="100%" height="100%" border=0 cellspacing=0 class="masthead"> <tr > <td style="text-align:left;padding:0 20px;width:10%" class="masthead-logo"></td> <td style="text-align:center;width:80%" class="masthead-title"> </td> <td style="text-align:right;padding:0 20px;width:10%"></td> <tr > <td style="text-align:center" colspan="3" class="masthead-nav"></td></tr> </tr> <style> #masthead, .masthead table { height:100%; } .masthead tr{ color:${masthead.style.color}; background:${masthead.style.background||"#3498db"}; color:${masthead.style.color||"white"} !important; } .masthead-title{ font-size: ${masthead.style.fontSize||"32px"} } .masthead-nav{ background:rgba(0,0,0,0.1); } .masthead-nav a, .masthead-nav button { padding: 0 20px; font-size: calc(${masthead.style.fontSize||"30px"}*0.70); text-decoration: none !important; color:${masthead.style.color||"white"} !important; } </style>`; //add html masthead.innerHTML=html; //move elements function function moveElement(from,to){ if(to!=undefined){ if (from.id=="masthead-nav")[...document.querySelectorAll("#masthead-nav a")].forEach(x=>{ if(x.innerText.endsWith("***")) { x.innerText = x.innerText.replace("***","") } }) to.append(...from.childNodes); } else { console.log("warning") } from.remove() } //finds #masthead-nav, #masthead-title and place its contents to .masthead-nav, .masthead-title and so on) var imports = "nav,title,logo,options,filters,nav-icons"; imports = imports.split(",").map(x=>{return "#masthead-"+x}).join(", "); [...document.querySelectorAll(imports)].forEach(e=>{t="."+e.id;moveElement(e,document.querySelector(t)) });
Checkout the JavaScript Fixed Masthead for Spotfire to make this masthead fixed to the top when scrolling the page
◄ Back to JavaScript Masthead for Spotfire
Recommended Comments
There are no comments to display.