jAlert v6.0.0 - Major Feature Expansion

🚀 Major Release - Complete Feature Overhaul

jAlert 6.0.0 represents a massive expansion with a complete slideshow system, enhanced video support, and comprehensive media handling capabilities. This release introduces significant new features while maintaining backward compatibility where possible.

✨ New Features

🎠 Complete Slideshow System

Revolutionary slideshow functionality with advanced features:

• Image Navigation: Next/previous arrows, dot navigation, and number counters
• Video Support: HTML5 videos and YouTube/Vimeo iframes within slideshows
• Thumbnail Navigation: Drag-scrollable thumbnails with top/bottom positioning
• Auto-advance: Configurable intervals with pause-on-hover functionality
• Keyboard Navigation: Arrow key support with proper event cleanup
• Responsive Sizing: Contain and cover modes for optimal image display
• Advanced Callbacks: onSlideChange, onBeforeSlideChange, onSlideshowEnd, onSlideshowLoop, onContentLoad
• Loop Control: Configurable looping with end-of-slideshow detection
• Preloading: Background image preloading for faster navigation
• Touch Support: Swipe gestures and touch-friendly controls for mobile devices

🎥 Enhanced Video Support

Comprehensive HTML5 video and iframe handling:

• HTML5 Video: Full support for all video attributes (controls, autoplay, loop, mute, etc.)
• Responsive Containers: Proper aspect ratio handling with fallback defaults
• Video Configuration: Direct video object properties for complete video configuration
• Error Handling: Robust loading and error states with graceful fallbacks
• YouTube/Vimeo: Enhanced iframe support with responsive containers

📚 Interactive Documentation

• Theme Modal: Interactive preview of all 14 themes with try-it buttons
• Animation Modal: Preview of 80+ animations organized by category
• Size Modal: Interactive size demonstrations with responsive behavior
• Button Theme Modal: Preview of all 5 button themes

🔄 Breaking Changes

• Default Size Behavior: Media modals (images, videos, slideshows) now default to size: 'auto'
• Theme Validation: Invalid themes now return 'default' instead of false
• Slideshow API: New slideshow system with different options structure
• Video API: Direct video object properties for HTML5 video configuration
• Default Padding Behavior: Media modals now default to noPadContent: true (no padding around content)

📋 Migration Guide

See UPGRADE_GUIDE_V5_to_V6.md for detailed migration instructions.

🧪 Testing

• 379 Total Tests: 220 unit tests + 159 E2E tests
• Visual Regression Tests: Automated screenshot comparisons
• Cross-browser Testing: Chrome, Firefox, Safari, Edge support

🎯 Browser Support

• Chrome: 30+
• Firefox: 28+
• Safari: 7+
• Edge: 12+
• Opera: 17+
• Internet Explorer: 11 (with jQuery polyfills, limited MutationObserver support)

📦 Installation

npm install jAlert

or via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jAlert@6.0.0/dist/jAlert.min.css">
<script src="https://cdn.jsdelivr.net/npm/jAlert@6.0.0/dist/jAlert.min.js"></script>

🚀 jAlert v5.0.5: Enhanced Stability & Bug Fixes

🛡️ Bug Fixes & Stability Improvements

• Fixed Critical Async Error: Resolved Cannot read properties of undefined (reading 'blurBackground') error in async scenarios with comprehensive defensive guards
• Enhanced Error Handling: Added robust validation in animateAlert() and closeAlert() methods to prevent undefined access errors
• Improved AJAX Handling: Enhanced error handling with better type checking and null safety for AJAX content loading
• Memory Management: Added proper MutationObserver cleanup to prevent memory leaks

🧪 Test Infrastructure Improvements

• Fixed Test Timing: Corrected auto-advance slideshow test from 3000ms to 2000ms interval with enhanced polling mechanism
• Enhanced Test Reliability: Improved test stability across different environments and browser automation
• Better Cleanup: Enhanced test cleanup procedures with proper alert instance closure and event listener management

🎨 CSS & UI Refinements

• Button Styling: Removed unwanted button borders by adding border: none to .ja_btn selector
• Visual Consistency: Improved consistency across different button styles and themes

📚 Documentation Updates

• Comprehensive Testing Guide: Added detailed documentation for all test commands
  • npm test - Unit tests only (fastest)
  • npm run test:unit - Unit tests alias
  • npm run test:e2e - End-to-end tests with Puppeteer
  • npm run test:all - Full test suite
• Test Requirements: Documented browser dependencies and CI/CD environment guidance

🔄 API Consistency

• Standardized Method Access: Improved consistency in internal API usage with unified .jAlert() method calls
• Enhanced Encapsulation: Better encapsulation of internal plugin data and improved method chaining reliability

---

Full Changelog: https://github.com/HTMLGuyLLC/jAlert/blob/master/CHANGELOG.md

NPM Package: https://www.npmjs.com/package/jalert

⚡ Quick Install: npm install jalert

Release v5.0.4: Dynamic Resize Functionality & Enhanced Tablet Support

🚀 jAlert v5.0.4 - Dynamic Resize & Enhanced Mobile Support

This release introduces powerful new resize functionality and significantly improves the mobile/tablet experience while maintaining 100% backward compatibility.

✨ New Features

🔄 Dynamic Resize Functionality

• autoResize() method to automatically resize modal to fit content
• resizeToFit() alias method for content-based resizing
• resizeModal(width, height) method for manual sizing
• autoResizeOnContentChange option for automatic resizing when content changes
• Global resize methods: $.autoResize(), $.resizeToFit(), $.resizeModal(height)
• MutationObserver integration for detecting content changes
• Comprehensive API documentation with interactive demos

📱 Enhanced Mobile/Tablet Support

• Optimized button sizing for tablet devices (451px - 1024px viewport)
• Better touch-friendly button padding and font sizes
• Improved responsive layout for button containers
• Enhanced user experience on touch devices

🔧 Technical Improvements

🛡️ Enhanced Error Handling

• Robust guards in animateAlert() method to prevent undefined access errors
• Improved error handling in closeAlert() method
• Enhanced AJAX error handling with proper type checking
• Better async scenario handling to prevent race conditions

🔗 API Consistency

• Consistent use of .jAlert() method instead of .data('jAlert') for API access
• Better encapsulation and error prevention
• Improved method chaining support

🐛 Bug Fixes

• Async Safety: Fixed blurBackground access errors in async scenarios
• Test Reliability: Improved test stability in JSDOM environment
• AJAX Handling: Enhanced error handling for AJAX content loading
• Memory Management: Better cleanup of MutationObserver instances

📚 Documentation

• Comprehensive resize documentation with usage examples and interactive demos
• Enhanced technical documentation covering error handling improvements
• Updated responsive design documentation with tablet enhancements

🧪 Testing

• Improved test coverage for resize functionality
• Enhanced test reliability with proper JSDOM compatibility
• Added defensive test patterns for edge cases

🔄 Breaking Changes

*Noneauth login All changes maintain 100% backward compatibility.

📦 Installation

npm install jAlert@5.0.4

Or download directly from the releases page.

🚀 Quick Start with New Resize Features

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

// Later, after content changes
.text('Much longer content that needs more space');
.autoResize();

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

🌐 Browser Compatibility

• IE11+ (ES5 compatible)
• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

---

Full Changelog: v5.0.3...v5.0.4

v5.0.3 – Test Suite Compatibility & Maintenance Patch

🛠️ What’s New in 5.0.3

This maintenance release ensures the test suite is fully compatible with the latest markup changes for close button alignment.

🐛 Bug Fixes

• Test Compatibility: Fixed unit test to account for the close button now being positioned inside the title div.
• Test Selector Update: Updated test selector from .ja_title to .ja_title > div to target the title text specifically.
• Test Suite: All 39 tests now pass with the new close button positioning structure.

🔄 Upgrade Notes

• No breaking changes.
• No changes to the public API or UI—this release is for internal test and maintenance improvements only.

---

Full Changelog: CHANGELOG.md

v5.0.2 - Close Button Alignment & Visual Improvements

�� What's New in 5.0.2

This patch release focuses on visual polish and user experience improvements, particularly around close button alignment and slideshow navigation.

✨ Visual Improvements

• Perfect Close Button Centering: Fixed the "x" alignment in round close buttons using flexbox and precise vertical transforms
• Smart Title Bar Positioning: Close buttons now properly align within title bars for consistent visual hierarchy
• Button Type Optimization: Different close button styles (round, alt) now have specific positioning for optimal appearance
• Clean Slideshow Dots: Removed borders from slideshow navigation dots to prevent squashing and ensure perfect circular appearance

🔧 Technical Enhancements

• Enhanced Markup: Close button "x" is now wrapped in a styled span for better control
• Improved CSS Organization: Better specificity and organization for button positioning
• Build Output Cleanup: CSS now outputs as jAlert.min.css instead of jAlert.css.min.css

�� Bug Fixes

• Fixed close button appearing slightly low in circular containers
• Fixed slideshow dots appearing compressed after image loading
• Fixed inconsistent close button positioning across different alert types

📦 Installation

npm install jalert@5.0.2

🔄 Upgrade Notes

No breaking changes! This release maintains 100% backward compatibility. Simply update your files and enjoy the improved visual consistency.

🎨 Demo

Check out the improved close button alignment and slideshow navigation in our live demo.

---

Full Changelog: CHANGELOG.md

v5.0.1 - Accessibility Improvements & Touch Support

�� What's New in v5.0.1

♿ Accessibility Improvements

• Added ARIA attributes for better screen reader support
• Implemented semantic HTML with proper roles and labels
• Enhanced keyboard navigation with focus management
• Added descriptive labels for all interactive elements

📱 Touch Support

• Added swipe gestures for slideshow navigation
• Improved touch-friendly controls for mobile devices
• Enhanced responsive design for better mobile experience

📝 Documentation Updates

• Fixed misleading claims about accessibility and file size
• Updated file size to accurate 40.8KB total (15.8KB JS + 25KB CSS)
• Changed "mobile-first" to "responsive design" for accuracy
• Improved README with honest feature descriptions

🔧 Technical Improvements

• Maintained backward compatibility with existing API
• All tests passing (39/39)
• Preserved original beautiful design and animations

---

Breaking Changes: None - this is a backward-compatible patch release.

Migration: No changes needed for existing implementations.

jAlert 5.0.0 - Complete Modernization

🚀 jAlert 5.0.0 - Complete Modernization

🎉 Major Release - 100% Backward Compatible

jAlert has been completely rewritten with modern development practices while maintaining full API compatibility. This release brings significant improvements in performance, browser support, and features.

✨ What's New

🎠 Lightbox Slideshow Feature

• Next/Previous Navigation: Arrow controls for easy browsing
• Dot Navigation: Visual indicators for slide position
• Number Counter: Alternative to dots showing "1 / 5"
• Auto-Advance: Automatic slide progression with configurable timing
• Keyboard Controls: Arrow key navigation
• Pause on Hover: Stop auto-advance when hovering
• Loop Option: Restart slideshow at the end
• Smart Sizing: Fit current image or fit largest across all slides
• Caption Support: Display text overlays on slides
• Responsive Design: Adapts to viewport size

🔧 Modern Build System

• Webpack 5: Efficient bundling and optimization
• Babel Transpilation: ES5 output for maximum browser compatibility
• PostCSS: Modern CSS processing with Autoprefixer
• Source Maps: Better debugging experience
• Optimized Production Builds: Smaller, faster files

🧪 Comprehensive Testing

• Unit Tests: Jest-based test suite
• End-to-End Tests: Puppeteer for browser testing
• Visual Regression: Automated visual testing
• Quality Assurance: Automated testing pipeline

🔧 Technical Improvements

• Performance: Optimized bundle size and loading speed
• Accessibility: Enhanced keyboard navigation and screen reader support
• Mobile Support: Improved responsive design and touch interactions
• Error Handling: Better validation and user-friendly error messages
• Code Organization: Modular architecture for improved maintainability

🐛 Bug Fixes

• Fixed slideshow options not being properly merged with defaults
• Fixed loader persistence issues in slideshows
• Fixed fitLargest sizing to respect viewport dimensions
• Fixed legacy file references and cleanup
• Fixed demo and asset organization

📦 Dependency Updates

• jQuery: Updated to 3.7.0+ (now a peer dependency)
• Build Tools: Modernized to latest stable versions
• Browser Support: ES5 compatible for maximum compatibility

🔄 Breaking Changes

None! This release maintains 100% backward compatibility with all existing APIs.

📋 Quick Upgrade Guide

For Existing Users

No code changes required! Your existing code will work immediately.

1. Update files:

   npm install jalert@5.0.0
   # Or download manually from this release

2. Update HTML references (if needed):

   <!-- Old -->
   <script src="src/jAlert.min.js"></script>
   
   <!-- New -->
   <script src="dist/jAlert.min.js"></script>

3. Ensure jQuery 3.7.0+:

   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

For New Users

npm install jalert

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

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

🎯 New Slideshow Examples

Basic Slideshow

$.jAlert({
    slideshow: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    slideshowOptions: {
        showArrows: true,
        showCounter: 'dots'
    }
});

Advanced Slideshow

$.jAlert({
    slideshow: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
    slideshowOptions: {
        autoAdvance: true,
        autoAdvanceInterval: 3000,
        showArrows: true,
        showCounter: 'numbers',
        keyboardNav: true,
        loop: true,
        pauseOnHover: true,
        resizeMode: 'fitLargest'
    }
});

🌐 Browser Compatibility

• IE11+ (ES5 compatible)
• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

📚 Documentation

• Complete API documentation in README
• Interactive demos at https://htmlguyllc.github.io/jAlert/
• Comprehensive examples for all features
• Development guidelines for contributors

🛠️ Development

• Modern development workflow with npm scripts
• Automated testing and quality assurance
• Source maps for debugging
• Optimized build process

📁 File Structure

jAlert/
├── src/          # Source files (development)
├── dist/         # Distribution files (production)
│   ├── jAlert.min.js
│   ├── jAlert.min.css
│   └── jAlert-functions.min.js
├── tests/        # Test suite
└── docs/         # Documentation

🎉 What's Next?

After upgrading, explore:

• The new slideshow feature for image galleries
• Enhanced documentation and examples
• Modern development workflow
• Contribution opportunities

📞 Support

• Documentation: https://htmlguyllc.github.io/jAlert/
• Issues: https://github.com/HTMLGuyLLC/jAlert/issues
• Upgrade Guide: See UPGRADE_GUIDE.md in this repository

---

Happy coding! 🚀

---

Previous Versions

For older versions, see the releases page.

Improved iframe full-height

4.9.1

Cleanup some CSS stuff, improve iframe full height, improve image ful…

Added confirm question as the third param of the confirm() method

4.8.0

Added confirm question as the third param to the confirm() function

Dom el for content, onClick now receives alert as param, and image popup shrinks to fit image if necessary

1. Accepts dom element for content (it'll grab the html automatically)
2. Button onClick method now receives 3 params e, btn, alert (so you can quickly alert.closeAlert())
3. When you open an image alert using the image param, it will now shrink the popup to fit the image size if it's smaller and disables alert padding