Getting Started

1. Install

Via npm:

npm install jalert

Or download from GitHub and include manually.

2. Include Files

<link rel="stylesheet" href="dist/jAlert.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="dist/jAlert.min.js"></script>
              

3. Basic Usage

$.jAlert({
  title: 'Hello!',
  content: 'Welcome to jAlert!',
  theme: 'green'
});
              

4. Data Attributes (Optional)

You can use data-jAlert attributes for simple triggers:

<a href="#" data-jAlert data-title="Hi" data-content="I opened!">Click me</a>
              

$(function() {
  $.jAlert('attach');
});
              

jAlert Settings

$.jAlert({
  'title': 'Set It',
  'content': 'Set',
  'theme': 'green',
  'size': 'md',
  'showAnimation': 'fadeInUp',
  'hideAnimation': 'fadeOutDown'
});

<a href='#' data-jAlert data-title="Set It" data-content="Set" data-theme="green" data-size="md" data-showAnimation="fadeInUp" data-hideAnimation="fadeOutDown">
   Click Me
</a>

var currentAlert = $.jAlert('current');
//now that you've got it, you can get it's properties, or close it.
console.log(currentAlert);
currentAlert.closeAlert();

$.fn.jAlert.defaults.size = 'lg';
$.fn.jAlert.defaults.theme = 'blue';
$.fn.jAlert.defaults.showAnimation = 'fadeInUp';
$.fn.jAlert.defaults.hideAnimation = 'fadeOutDown';

Public methods

Slideshow Options

jAlert now supports lightbox slideshows with navigation controls, auto-advance, and keyboard navigation.

Basic Usage

// Array of image URLs
$.jAlert({
    'slideshow': [
        'image1.jpg',
        'image2.jpg', 
        'image3.jpg'
    ]
});

// DOM-based slideshow
$.jAlert({
    'slideshow': '#my-slideshow-container'
});

// Slideshow with dots navigation
$.jAlert({
    'slideshow': ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    'slideshowOptions': {
        'showCounter': 'dots'
    }
});

// Slideshow without controls
$.jAlert({
    'slideshow': ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    'slideshowOptions': {
        'showArrows': false,
        'showCounter': false
    }
});

Slideshow Options

DOM Structure for Slideshows

When using DOM-based slideshows, use this structure:

<div id="my-slideshow">
    <div class="ja_slide">
        <img src="image1.jpg" alt="Description">
        <div class="caption">Image Caption</div>
    </div>
    <div class="ja_slide">
        <img src="image2.jpg" alt="Description">
        <div class="caption">Another Caption</div>
    </div>
</div>

Utility Function

// Quick slideshow creation
slideshowAlert([
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'
], {
    autoAdvance: true,
    autoAdvanceInterval: 2000
});

// Looping slideshow
slideshowAlert([
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'
], {
    autoAdvance: true,
    autoAdvanceInterval: 2000,
    loop: true
});

Dynamic Resize Functionality

jAlert now supports dynamic resizing of modals to fit content changes. This is particularly useful for modals with dynamic content that changes after the modal is opened.

Basic Usage

// Manual resize to fit content
$.jAlert({
    title: 'Dynamic Content',
    content: '<div id="dynamic-content">Short content</div>'
});

// Later, after content changes
$('#dynamic-content').text('Much longer content that needs more space');
$('.jAlert').autoResize();

// Or use the global function
$.autoResize();

Auto-Resize on Content Changes

// Enable automatic resizing when content changes
$.jAlert({
    title: 'Auto-Resize Demo',
    content: '<div id="auto-content">Initial content</div>',
    autoResizeOnContentChange: true
});

// Content changes will automatically trigger resize
$('#auto-content').html('<h3>New Content</h3><p>This will automatically resize the modal</p>');

Resize Options

Resize Methods

Advanced Usage

// Get the alert instance and call methods
const alert = $.jAlert('current');
if (alert) {
    alert.autoResize();
    alert.resizeModal(null, 400); // Set specific height
}

// Resize after AJAX content loads
$.jAlert({
    ajax: 'dynamic-content.html',
    onOpen: function(alert) {
        // Content is loaded, now resize to fit
        alert.autoResize();
    }
});

// Resize after dynamic content changes
$('#dynamic-content').load('new-content.html', function() {
    $('.jAlert').autoResize();
});

Notes

• Resize functionality only adjusts height - width is controlled by the size option (sm, md, lg, etc.)
• Auto-resize uses MutationObserver to detect content changes
• Manual resize methods should be called after content changes are complete
• Resize works with all content types: text, HTML, AJAX-loaded content, etc.

Enhanced Reliability & Performance

jAlert v5.0.4 includes significant improvements to error handling and API consistency for better reliability in production environments.

Enhanced Error Handling

• Defensive Programming: Added robust guards to prevent undefined access errors in async scenarios
• AJAX Error Handling: Improved error handling for AJAX content loading with proper type checking
• Async Safety: Better handling of race conditions and DOM removal timing
• Memory Management: Proper cleanup of MutationObserver instances and event handlers

API Consistency

• Standardized Access: Consistent use of .jAlert() method for API access
• Method Chaining: All methods return this for better chaining support
• Better Encapsulation: Improved error prevention through proper method access patterns
• Backward Compatibility: All changes maintain 100% compatibility with existing code

Mobile & Tablet Enhancements

• Optimized Button Sizing: Better touch-friendly button dimensions for tablet devices (451px - 1024px)
• Improved Layout: Enhanced responsive design for button containers and spacing
• Touch Interaction: Better padding and font sizes for improved user experience on touch devices