THIS DOCUMENT IS IN PROGRESS
What are Hello bars?
Hello bars are a simple bar across the top of your website, which deliver a message to users.
Common messages include announcements, sale/offer messaging, countdown timers, and guidance for users to a key page.
They have recently also been known as COVID banners, utilised for this same guidance/announcement purpose
Code: Vanilla JS
// Create a Hello Bar
(function(){
var settings = {
text: 'Want a simple way to message your users? Introducing Hello bars..!', // text in hello bar
bgcol: '#242424', // background colour
color: '#FFFFFF', // text colour
fontSize: '14px', // font size
existingNavToMoveDown: '#nav', // If you have a fixed-position nav, use this to move it down
existingNav_method: 'marginTop' // How you want it moved down
};
var elid = 'wto-widget--hellobar--'+(Date.now());
// Remove if exists - ensures no duplicates
document.querySelectorAll('.wto-widget--hellobar').forEach(function(node){
node.parentNode.removeChild(node);
});
// Create hello bar
var body = document.getElementsByTagName('body')[0];
var el = document.createElement('div');
body.insertAdjacentElement('afterBegin', el);
var elhtml = '<div id="'+ elid +'" class="wto-widget--hellobar" style="padding: 5px; width: 100%; background: '+ settings.bgcol +'; color: '+ settings.color +'; z-index: 99999999; text-align: center; line-height: 40px; font-size: '+ settings.fontSize +'; top: 0; left: 0; position: fixed;">' + settings.text + '</div>';
el.outerHTML = elhtml;
var h = document.getElementById(elid).offsetHeight;
body.style.marginTop = h + 'px';
if(settings.existingNavToMoveDown && settings.existingNav_method){
var el = document.querySelector(settings.existingNavToMoveDown);
el.style[settings.existingNav_method] = h + 'px';
}
})();
Code: jQuery
// Create hello bar
(function(){
var settings = {
text: 'Want a simple way to message your users? Introducing Hello bars..!', // text in hello bar
bgcol: '#242424', // background colour
color: '#FFFFFF', // text colour
fontSize: '14px', // font size
existingNavToMoveDown: '#nav', // If you have a fixed-position nav, use this to move it down
existingNav_method: 'marginTop' // How you want it moved down
};
var elid = 'wto-widget--hellobar--'+(Date.now());
// Remove if exists - ensures no duplicates
jQuery('.wto-widget--hellobar').remove();
// Create hello bar
var elhtml = '<div id="'+ elid +'" class="wto-widget--hellobar" style="padding: 5px; width: 100%; background: '+ settings.bgcol +'; color: '+ settings.color +'; z-index: 99999999; text-align: center; line-height: 40px; font-size: '+ settings.fontSize +'; top: 0; left: 0; position: fixed;">' + settings.text + '</div>';
jQuery('body').prepend(elhtml);
var h = document.getElementById(elid).offsetHeight;
jQuery('body').css('margin-top', h + 'px');
if(settings.existingNavToMoveDown && settings.existingNav_method){
jQuery(settings.existingNavToMoveDown).css(settings.existingNav_method, h + 'px');
}
})();
Code: Widget
{
fields: [
{ type: 'text', id: 'text', name: 'text', label: 'text', value: 'Black Friday sale is now on! Upto 50% off across the store.' },
{ type: 'color', id: 'bgcol', name: 'bgcol', label: 'Background Colour', value: '#242424' },
{ type: 'color', id: 'color', name: 'color', label: 'Text Colour', value: '#FFFFFF' },
{ type: 'text', id: 'fontsize', name: 'fontsize', label: 'Font Size', value: '14px' },
// { type: 'checkbox', id: 'makesticky', name: 'makesticky', label: 'Make sticky and push page down?', value: false },
// { type: 'checkbox', id: 'haveclosebtn', name: 'haveclosebtn', label: 'Include close button?', value: true },
{ type: 'text', id: 'existingNavSelector', name: 'existingNavSelector', label: 'Existing Nav? Selector:', value: '' }
{ type: 'text', id: 'existingNavMethod', name: 'existingNavMethod', label: 'Existing Nav? Method:', value: '' }
],
js_build: function(widget){
var uniqueID = Date.now();
var str = `
//!-##${widget.widgetType}--START##
// ${JSON.stringify(widget)}
// Create a Hello Bar
(function(){
var settings = {
text: '${widget.text}', // text in hello bar
bgcol: '${widget.bgcol}', // background colour
color: '${widget.color}', // text colour
fontSize: '${widget.fontsize}', // font size
existingNavToMoveDown: '${widget.existingNavSelector}', // If you have a fixed-position nav, use this to move it down
existingNav_method: '${widget.existingNavMethod}' // How you want it moved down
};
var elid = 'wto-widget--hellobar--${uniqueID}';
// Remove if exists - ensures no duplicates
document.querySelectorAll('.wto-widget--hellobar').forEach(function(node){
node.parentNode.removeChild(node);
});
// Create hello bar
var body = document.getElementsByTagName('body')[0];
var el = document.createElement('div');
body.insertAdjacentElement('afterBegin', el);
var elhtml = '<div id="'+ elid +'" class="wto-widget--hellobar" style="padding: 5px; width: 100%; background: '+ settings.bgcol +'; color: '+ settings.color +'; z-index: 99999999; text-align: center; line-height: 40px; font-size: '+ settings.fontSize +'; top: 0; left: 0; position: fixed;">' + settings.text + '< /div>';
el.outerHTML = elhtml;
var h = document.getElementById(elid).offsetHeight;
body.style.marginTop = h + 'px';
if(settings.existingNavToMoveDown && settings.existingNav_method){
var el = document.querySelector(settings.existingNavToMoveDown);
el.style[settings.existingNav_method] = h + 'px';
}
})();
//!-##${widget.widgetType}--END##`;
return str;
}
}