[Added] Info Bar function (nuBuilder 4.9.x)

Unread post by **admin** » Mon Aug 11, 2025 4:50 pm

We've introduced a new function in nuBuilder: nuInfoBar – a sleek, customisable info bar / notification system that appears at the top or bottom of the screen.

nu info msg.png

Key Functionalities

Multiple styles: info, success, warning, error
Light or dark theme options
Custom icons and CSS classes
Auto-close with configurable delay
Slide or fade animations, with up or down direction
Top or bottom positioning (fixed or relative)
Optional close button and click-to-close
Shake animation to draw attention
Modal mode that blocks outside clicks
Callbacks for onShow, onClose, onClick, onShake
Hide automatically when form closes

Options Overview

html – HTML content of the notification (can include icons, text, etc.)
type – Notification type (info, success, warning, error)
theme – Appearance theme (light, dark)
icon – Override default icon by providing a Font Awesome class (e.g., fas fa-check)
customClass – Additional CSS class for custom styling
autoClose – Automatically close after delay (true or false)
autoCloseDelay – Delay before auto-close (in ms, default 5000)
showCloseButton – Show an “X” button to manually close the bar
allowMultiple – Allow more than one notification to be shown at once
hideOnFormClose – Automatically hide when a form is closed
shakeOnShow – Trigger shake animation immediately after showing
modal – If true, blocks interaction outside the notification and shakes on outside clicks
animationDuration – Duration of open/close animations in ms
animationType – Animation style (slide, fade)
slideDirection – Slide direction (down, up)
shakeDuration – Duration of shake animation in ms
shakeIntensity – Shake distance in pixels
position – Notification position (top, bottom)
fixed – Fix to viewport and push page content (true or false)
zIndex – Stacking order (default 10000, ensures visibility over elements)
opacity – Transparency level (0 to 1)
closeOnClick – Close when clicking anywhere on the notification (not just close button)
onShow – Callback function executed when the notification is shown
onClose – Callback function executed when the notification is closed
onClick – Callback function executed when the notification is clicked
onShake – Callback function executed when shake animation finishes

Usage Examples

Simple notification

Code: Select all

$.nuInfoBar.info('This is an info message');

Success notification with custom delay

Code: Select all

$.nuInfoBar.success('Data saved successfully!', {
    autoCloseDelay: 3000
});

Error notification with dark theme and no auto-close

Code: Select all

$.nuInfoBar.error('An error occurred', {
    theme: 'dark',
    autoClose: false
});

Custom HTML content with icon override

Code: Select all

$.nuInfoBar({
    html: '<i class="fas fa-bell"></i> Custom notification message',
    type: 'info',
    icon: 'fas fa-bell',
    theme: 'light'
});

With callbacks

Code: Select all

$.nuInfoBar.warning('This will disappear in 5s', {
    autoCloseDelay: 5000,
    onShow: function() {
        console.log('Info bar shown');
    },
    onClose: function() {
        console.log('Info bar closed');
    },
    onClick: function() {
        console.log('Info bar clicked');
    }
});

Info bar with Yes/No buttons

Code: Select all

$.nuInfoBar({
    html: '<i class="fas fa-question-circle"></i> Do you want to continue? ' +
          '<button id="btnYes" class="nuActionButton">Yes</button> ' +
          '<button id="btnNo" class="nuActionButton">No</button>',
    type: 'warning',
    autoClose: false,
    showCloseButton: false, 
    onShow: function() {
        $('#btnYes').on('click', function() {
            console.log('User clicked YES');
            $.nuInfoBar.closeAll();
        });
        $('#btnNo').on('click', function() {
            console.log('User clicked NO');
            $.nuInfoBar.closeAll();
        });
    }
});

nu_info_bar_buttons.png

Shake Animation

Info bar that shakes when shown

Code: Select all

$.nuInfoBar.error('Connection failed!', {
    shakeOnShow: true,
    shakeDuration: 600,
    shakeIntensity: 8
});

Shake existing info bars

Code: Select all

// Shake all info bars
$.nuInfoBar.shake();

// Shake with custom settings
$.nuInfoBar.shake({
    direction: 'vertical',
    duration: 800,
    intensity: 10
});

// Shake only the most recent bar
$.nuInfoBar.shakeLast();

Modal Mode

Modal info bars block outside clicks and automatically shake to draw attention when users try to click elsewhere. Perfect for critical messages that require user response.
Basic modal notification

Code: Select all

$.nuInfoBar.modal.error('Please fix the errors before continuing');

Modal with custom options

Code: Select all

$.nuInfoBar.modal({
    html: '<i class="fas fa-lock"></i> Complete security verification',
    type: 'warning',
    showCloseButton: true,
    onShake: function() {
        console.log('User tried to click outside!');
    }
});

All modal shortcuts available

Code: Select all

$.nuInfoBar.modal.info('Please wait...');
$.nuInfoBar.modal.success('Action completed!');
$.nuInfoBar.modal.warning('Save your work first');
$.nuInfoBar.modal.error('Critical error occurred!');

Close all notifications

Code: Select all

$.nuInfoBar.closeAll();

Why Use nuInfoBar Over Message Boxes?

Non-intrusive – Does not block user interaction (unless in modal mode)
Integrated into page layout without modal pop-ups
Smooth animations for better UX
Can auto-disappear after a short time
Supports multiple simultaneous notifications (optional)
Modal mode for critical messages requiring attention
Shake animations to draw user focus
Flexible positioning and styling options