Member Avatar for LegateLucius

hi i would like to know how people make the litle blue bar at the top of the mojomarketplace site that someone can exit if they dont want it
?

  • 4 Contributors
  • 5 Replies
  • 138 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by Member #46692

Dani AI

Generated

Common names: "announcement bar", "promo bar", "notification banner" or "top banner". The UI is just HTML + CSS + a little script to make it dismissible and remember that choice. That implementation detail can use jQuery, vanilla JS, cookies or localStorage. As recommended, inspect the live markup with browser DevTools to see how a particular site structures and styles the bar. and were on the right track — the visual element is markup that scripts show/hide.

Example structure and styling (minimal):

<div id="site-notice" role="region" aria-label="Site announcement">
  <div class="notice-inner">
    <span class="notice-text">Short announcement or promo.</span>
    <button class="notice-close" aria-label="Dismiss notice">Close</button>
  </div>
</div>
#site-notice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #0074d9;
  color: #fff;
  z-index: 9999;
  padding: 12px 16px;
  box-sizing: border-box;
}
.notice-inner { max-width: 980px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.notice-close { background: transparent; border: none; color: #fff; cursor: pointer; }
.hidden { display: none; }

Dismissal and persistence (vanilla JS + localStorage):

(function() {
  var KEY = 'site_notice_closed_v1';
  if (localStorage.getItem(KEY)) return;
  var notice = document.getElementById('site-notice');
  var close = notice.querySelector('.notice-close');

  close.addEventListener('click', function() {
    notice.classList.add('hidden');
    localStorage.setItem(KEY, '1');
  });

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && !notice.classList.contains('hidden')) {
      notice.classList.add('hidden');
      localStorage.setItem(KEY, '1');
    }
  });
})();

Troubleshooting notes: fixed bars sit above content (add body padding if the bar should push content down), check z-index collisions, and beware parent elements with CSS transforms which can break position: fixed. For persistence across subdomains or for expiry control use cookies or a server-side flag instead of localStorage. For details on storage APIs and CSS positioning see Using the Web Storage API and position on MDN.

Recommended Answers

All 5 Replies

Member Avatar for Octet

With the majority of browsers, you can right click on a webpage and "View Source". What this allows you to do is look at the various bits of JavaScript, HTML and CSS which makes up the site and from this hopefully you can find what you are looking for.

It might take a bit of debugging though, or you can use a tool such as Firebug to do it for you!

Member Avatar for BMXDad

Its a jQuery Div.

Empty it like this ...

$('#Somediv').empty();

You can add code to create a cookie so if they come back to the site it won't show again.

Member Avatar for LegateLucius

i dont want to remove it i want to know how people add it

Member Avatar for LegateLucius

and what it is called

Member Avatar for Member #46692

It's not called anything in particular. It's just another div controlled via jquery.

Edited by Member #46692
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.