To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

Jamie Balfour'sPersonal blog

BalfBar version 1.5 is a massive update, making performance improvements, changing the way it works underneath, and adding features that make it much easier to set up and more stable than previous versions.

Version 1.5's headline feature is that it removes animations from JavaScript and moves them solely to CSS. The other feature that is now completely departing is the hover class that is added to items. This was added to help support older browsers but also was used in the older versions to decide whether to keep the menu open or not. BalfBar now also adds a new menu_open class to the main BalfBar item which is added when a menu is opened. 

I have already deployed the updated version to my website, so take a look to see what I mean.

Posted by jamiebalfour04 in BalfBar

Version 1.3 of BalfBar is here and it's is by far the cleanest, simplest, and most beautiful version of the amazing responsive menu bar that I have developed to date.

A major new feature has now finally made it into it. So not only can you have dropdowns in the desktop mode, but you can now have what I call mega menus (previously content menus). These menus are able to contain more than just a list of items - they can contain anything, for example, a login form, a dropdown box - whatever you like. Further to that, to retain compatibility with existing implementations, the mega menu no longer requires the whole menu to follow that pattern and can be nicely mixed with existing dropdowns!

Posted by jamiebalfour04 in BalfBar

I recently encountered an article that actually made me think about the way that BalfBar was designed. This article discussed how important it is for something such as BalfBar to be able to support a variety of different users such as those who don't use or permit JavaScript on their website.

Well, as of today, BalfBar supports those people. BalfBar also loads instantly now, so no longer do you need to wait whilst the JavaScript is loaded. If BalfBar hasn't fully loaded by the time the user starts using it because of the JavaScript not fully loading, the user will instead use a CSS version of the menu. 

This is not all I have brought to the menu that is now used on all of the websites I have developed. I have brought many new features to the SCSS file that include the ability to have the top items display differently to the internal items as was the case on my own website. There are other minor changes, mainly focused on the SCSS file to make it easier to tailor it to your website.

Also coming soon to BalfBar with BalfBar 1.3 is the megamenu. I have already got a few of these working how I'd like them to but need to add in an option for mobile before it is released.

Posted by jamiebalfour04 in BalfBar

Version 1.3 of BalfBar is now available to download and brings a general set of improvements and new features. I'm still working on the tidy up of BalfBar as a major project but that's for another update still to come which I'm looking forward to 🤪 . The joys of being a software developer all over again .

The new version of BalfBar brings in a new kind of menu which is known as the mobile pushmenu. You can see this below:

As you can see, this pushes the whole document across to the right. At present, much like the sidebar, it only comes from the left hand side.

Posted by jamiebalfour04 in BalfBar

Today I realised something big that I really wanted to fix. It comes from a really rubbish problem that both JavaScript and jQuery have that I've spent hours trying to fix.

  • $(window).width() >= 800px is not the same as @media screen and (min-width: 800px)
  • window.innerWidth is also not the same
  • window.outerWidth is also not the same

So my solution to fix this and it's a pretty decent fix albeit it's more of a hack, is to put an invisible element known by its class name as media_tester in the .balfbar element. The JavaScript for BalfBar is now programmed to check for this element and if found uses it for media queries. It has also been added to the SCSS file.

Posted by jamiebalfour04 in BalfBar

It's been a while since I last worked on BalfBar but the latest improvement is a huge one! The latest update is version 1.2.

The newest BalfBar release brings a bunch of changes. Most important changes are removals which now includes the floating logo (BalfBar shouldn't manage this) and the Dark Mode (later named Alternate Mode). 

Let's start with why the floating logo / logo base idea was removed. In fact, let's start with why it came to BalfBar in the first place. Many of you will remember that I used the floating logo on my own website. This was removed in about 2015 when I changed to simply have my name. No body who used BalfBar that I know of was using this feature and more importantly, BalfBar shouldn't need to deal with minor things like this. It's removal was obvious and it makes the SCSS file much easier to understand.

Next, Dark Mode. One of the oldest features of the menu was Dark Mode, originally inspired by Mac OS X when it offered us a dark menu bar etc. I became a fan and decided to upgrade my own menu (powered by jQuery Smart Menus) to have this feature. When I developed BalfBar to replace it on my website I had to include the feature. Now I realise that even I don't use this feature. The main reason for it's removal is that firstly it complicates the SCSS file, secondly it will increase the CSS output file considerably and thirdly it can easily be added if needed by just compiling two SCSS files with the different themes anyway.

The SCSS file is now completely cleaned up and ready to use again. I'm also working on adding some new menu types to it including a large menu like I used to have. This will be sometime before it is ready though since my other projects are now taking precedence again.

I have now updated the JS file to work much more fluidly. However, no longer does BalfBar add a fixed_menu class to the HTML but only to the menu. This came from the idea that it's possible that two menus maybe on the same document at the same time, causing both to go to 'fixed mode'. It also allow it to remain more clean and succinct.

One more thing about the new change is that there is now both a desktop and mobile fixed height option. This also means the removal of the permanent mobile created in the CSS. To make a BalfBar instance always mobile, use -1 as normal.

Posted by jamiebalfour04 in BalfBar

Another major update has come to BalfBlog in the form of being able to export your database from the dashboard. This is a very powerful feature and one that I personally really wanted for some time. I'm also configuring a backup system that will create an archive each and every time you post something to your blog. This is a very useful feature for ensuring you always have a backup of the database if you did something wrong or your server stopped working (since you could have a download of it first).

I would like to add that the new plugin system for the tools is now in place and it's easy enough to use. I will be opening up a new sample database on my own website soon as well.

I'm also working on a new information architecture to make BalfBlog more expandable. One of these possible expansions is built in polling, in other words, at the end of a post a poll would appear which readers can then answer.

Posted by jamiebalfour04 in BalfBar

Since many of us, including myself, like a bit of customisation with every little thing we use, BalfBar's next update will bring more optional items to the table. The core has been designed to make it easy to bring new features to it very quickly and by the end of tomorrow the new sidebar mode will be in place on the latest version. 

The sidebar option allows you to have a mobile sidebar menu as opposed to a dropdown menu. This fantastic option is already in place on my website, so resize the page to test it. I find that this option offers more accessibility options and it's much better for larger menus. I'm focusing on improving it in the next few days however, so please suggest any positive and negatives about this design using the usual contact page. 

Posted by jamiebalfour04 in BalfBar

BalfBar has had a significant improvement to make it even easier to get your website the way you want it. You can now forget about setting the height when BalfBar becomes a fixed menu - it figures it out itself. Now all you need to do is tell it you want it to check for this and it will make the decision as to when to float the menu.

On top of this, a significant chunk of JavaScript has been removed from the core, making it much more streamlined and lighter. Suggestions for future versions can still be made on my website.

Posted by jamiebalfour04 in BalfBar
Powered by DASH 2.0 (beta)
Code previewClose