Release v5.0.4: Dynamic resize functionality, enhanced tablet support, improved error handling

✨ New Features:
- Dynamic resize functionality with autoResize(), resizeToFit(), and resizeModal() methods
- autoResizeOnContentChange option with MutationObserver integration
- Enhanced tablet button sizing for better touch interaction (451px-1024px)
- Global resize methods: $.autoResize(), $.resizeToFit(), $.resizeModal()

🔧 Technical Improvements:
- Robust defensive programming with proper guards in animateAlert() and closeAlert()
- Enhanced AJAX error handling with proper type checking
- Standardized API access patterns using .jAlert() method consistently
- Better async scenario handling and race condition prevention

🐛 Bug Fixes:
- Fixed blurBackground access errors in async scenarios
- Improved test stability in JSDOM environment
- Enhanced memory management with proper MutationObserver cleanup

📚 Documentation:
- Comprehensive resize API documentation with 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

All changes maintain 100% backward compatibility.

Author: HTMLGuyLLC

CHANGELOG.md

@@ -2,6 +2,71 @@
 
 All notable changes to jAlert will be documented in this file.
 
+## [5.0.4] - 2025-06-27
+
+### ✨ New Features
+
+- **🔄 Dynamic Resize Functionality**: Added comprehensive modal resizing capabilities
+  - `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 and interactive demos
+
+- **📱 Enhanced Mobile/Tablet Support**: Improved button sizing and layout
+  - 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**: Added defensive programming patterns
+  - 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**: Standardized method access patterns
+  - 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**: Added detailed API documentation
+  - Usage examples for all resize methods
+  - Configuration options and parameters
+  - Advanced usage patterns and best practices
+  - Interactive demos with real-time content changes
+
+- **Enhanced Examples**: Added interactive resize demonstrations
+  - Manual resize demo with dynamic content changes
+  - Auto-resize demo with MutationObserver integration
+  - Real-time content transformation examples
+
+### 🧪 Testing
+
+- **Improved Test Coverage**: Enhanced unit tests for resize functionality
+- **JSDOM Compatibility**: Fixed test compatibility issues with layout calculations
+- **Async Test Handling**: Better handling of async scenarios in test environment
+- **Defensive Test Patterns**: Added robust test patterns for edge cases
+
+### 🔄 Breaking Changes
+
+**None!** All changes maintain 100% backward compatibility.
+
+---
+
 ## [5.0.3] - 2025-06-26
 
 ### 🐛 Bug Fixes

dist/jAlert.min.css

@@ -132,7 +132,7 @@ <h4 class="align-center font-open-sans-normal-italic">jAlert is really easy, and
             <div class="row features">
               <div class="span4">
                 <h3><i class="fa fa-expand"></i> Plenty-o Sizes</h3>
-                <p>Completely responsive (just under full width on small screens), but for tablets and desktops, you have a lot of control over how large the alert is.</p>
+                <p>Completely responsive (just under full width on small screens), but for tablets and desktops, you have a lot of control over how large the alert is. Enhanced tablet support with optimized button sizing for better touch interaction.</p>
  	                <a href='#' class='btn btn-primary jsize'>xsm</a>
 	                <a href='#' class='btn btn-primary jsize'>sm</a>
 	                <a href='#' class='btn btn-primary jsize'>md</a>
@@ -275,6 +275,10 @@ <h4><i class="fa fa-images"></i> Slideshow</h4>
                   <a href='#' class='jslideshow-no-controls btn btn-primary'>No Controls</a>
                   <a href='#' class='jslideshow-keyboard btn btn-primary'>Keyboard Only</a>
                   <a href='#' class='jslideshow-dots-arrows btn btn-primary'>Dots + Arrows</a>
+                  <br><br>
+                  <h4><i class="fa fa-expand"></i> Dynamic Resize</h4>
+                  <a href='#' class='jresize btn btn-primary'>Manual Resize</a>
+                  <a href='#' class='jresize-auto btn btn-primary'>Auto-Resize on Change</a>
 
                 <script>
                     // Image alerts
@@ -459,6 +463,60 @@ <h4><i class="fa fa-images"></i> Slideshow</h4>
                         'size': 'lg'
                     });
                 </script>
+                
+                <!-- Resize Demo Scripts -->
+                <script>
+                    // Manual Resize Demo
+                    $('.jresize').on('click', function(e) {
+                        e.preventDefault();
+                        var modalContent = 'Short content.';
+                        $.jAlert({
+                            title: 'Manual Resize Demo',
+                            content: '<div id="manual-resize-content">' + modalContent + '</div>',
+                            size: 'sm',
+                            theme: 'blue',
+                            onOpen: function(alert) {
+                                window.currentManualResizeAlert = alert.data('jAlert');
+                                // Auto-change content after 3 seconds and trigger resize
+                                setTimeout(function() {
+                                    $('#manual-resize-content').text('This is a much longer content that should trigger a resize when we call autoResize() manually.');
+                                    window.currentManualResizeAlert.autoResize();
+                                }, 3000);
+                            }
+                        });
+                    });
+
+                    // Auto-Resize on Change Demo
+                    $('.jresize-auto').on('click', function(e) {
+                        e.preventDefault();
+                        var modalContent = 'Small content.';
+                        $.jAlert({
+                            title: 'Auto-Resize on Change Demo',
+                            content: '<div id="auto-resize-content">' + modalContent + '</div>',
+                            size: 'sm',
+                            theme: 'green',
+                            autoResizeOnContentChange: true,
+                            onOpen: function(alert) {
+                                // Change content multiple times with varying sizes
+                                setTimeout(function() {
+                                    $('#auto-resize-content').html('<h3>HUGE Content!</h3><p>This is a much larger content with multiple paragraphs and lots of text to demonstrate how the modal automatically resizes to fit the content. The autoResizeOnContentChange option is enabled, so the modal will automatically adjust its size whenever the content changes.</p><p>This should make the modal quite large to accommodate all this text.</p>');
+                                }, 2000);
+                                
+                                setTimeout(function() {
+                                    $('#auto-resize-content').text('Medium content with some additional text to make it a reasonable size.');
+                                }, 5000);
+                                
+                                setTimeout(function() {
+                                    $('#auto-resize-content').html('<h4>Large Content</h4><p>This is a large content block with a heading and some paragraphs. It should be bigger than medium but smaller than huge.</p><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul>');
+                                }, 8000);
+                                
+                                setTimeout(function() {
+                                    $('#auto-resize-content').text('Back to small content.');
+                                }, 11000);
+                            }
+                        });
+                    });
+                </script>
                   <h3 style="margin-top:20px"><i class="fa fa-adjust"></i>Blurred Background</h3>
                   Popup an alert and blur all the background elements:<br><br>
                   <a href='#' class='jblur btn btn-primary'>Image</a>
@@ -1306,6 +1364,142 @@ <h4>Utility Function</h4>
     autoAdvanceInterval: 2000,
     loop: true
 });</code></pre>
+
+                <h3 class="font-bree-serif">Dynamic Resize Functionality</h3>
+                <p>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.</p>
+                
+                <h4>Basic Usage</h4>
+                <pre><code>// Manual resize to fit content
+$.jAlert({
+    title: 'Dynamic Content',
+    content: '&lt;div id="dynamic-content"&gt;Short content&lt;/div&gt;'
+});
+
+// Later, after content changes
+$('#dynamic-content').text('Much longer content that needs more space');
+$('.jAlert').autoResize();
+
+// Or use the global function
+$.autoResize();</code></pre>
+
+                <h4>Auto-Resize on Content Changes</h4>
+                <pre><code>// Enable automatic resizing when content changes
+$.jAlert({
+    title: 'Auto-Resize Demo',
+    content: '&lt;div id="auto-content"&gt;Initial content&lt;/div&gt;',
+    autoResizeOnContentChange: true
+});
+
+// Content changes will automatically trigger resize
+$('#auto-content').html('&lt;h3&gt;New Content&lt;/h3&gt;&lt;p&gt;This will automatically resize the modal&lt;/p&gt;');</code></pre>
+
+                <h4>Resize Options</h4>
+                <table class="table table-bordered">
+                    <thead>
+                        <tr>
+                            <th><strong>Option</strong></th>
+                            <th><strong>Type</strong></th>
+                            <th><strong>Default</strong></th>
+                            <th><strong>Description</strong></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>autoResizeOnContentChange</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Automatically resize the modal when content changes (uses MutationObserver)</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <h4>Resize Methods</h4>
+                <table class="table table-bordered">
+                    <thead>
+                        <tr>
+                            <th><strong>Method</strong></th>
+                            <th><strong>Sample</strong></th>
+                            <th><strong>Params</strong></th>
+                            <th><strong>Description</strong></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>autoResize</td>
+                            <td>$('.jAlert').autoResize();<br>OR<br>$.autoResize();</td>
+                            <td>none</td>
+                            <td>Automatically resize the modal to fit its current content (height only)</td>
+                        </tr>
+                        <tr>
+                            <td>resizeToFit</td>
+                            <td>$('.jAlert').resizeToFit();<br>OR<br>$.resizeToFit();</td>
+                            <td>none</td>
+                            <td>Alias for autoResize() - resize modal to fit content</td>
+                        </tr>
+                        <tr>
+                            <td>resizeModal</td>
+                            <td>$('.jAlert').resizeModal(null, 300);<br>OR<br>$.resizeModal(300);</td>
+                            <td>height (optional)</td>
+                            <td>Resize modal to specific height (in pixels) or auto-fit if no height provided</td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <h4>Advanced Usage</h4>
+                <pre><code>// 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();
+});</code></pre>
+
+                <h4>Notes</h4>
+                <ul>
+                    <li>Resize functionality only adjusts <strong>height</strong> - width is controlled by the size option (sm, md, lg, etc.)</li>
+                    <li>Auto-resize uses MutationObserver to detect content changes</li>
+                    <li>Manual resize methods should be called after content changes are complete</li>
+                    <li>Resize works with all content types: text, HTML, AJAX-loaded content, etc.</li>
+                </ul>
+
+                <h3 class="font-bree-serif">Enhanced Reliability & Performance</h3>
+                <p>jAlert v5.0.4 includes significant improvements to error handling and API consistency for better reliability in production environments.</p>
+                
+                <h4>Enhanced Error Handling</h4>
+                <ul>
+                    <li><strong>Defensive Programming</strong>: Added robust guards to prevent undefined access errors in async scenarios</li>
+                    <li><strong>AJAX Error Handling</strong>: Improved error handling for AJAX content loading with proper type checking</li>
+                    <li><strong>Async Safety</strong>: Better handling of race conditions and DOM removal timing</li>
+                    <li><strong>Memory Management</strong>: Proper cleanup of MutationObserver instances and event handlers</li>
+                </ul>
+
+                <h4>API Consistency</h4>
+                <ul>
+                    <li><strong>Standardized Access</strong>: Consistent use of <code>.jAlert()</code> method for API access</li>
+                    <li><strong>Method Chaining</strong>: All methods return <code>this</code> for better chaining support</li>
+                    <li><strong>Better Encapsulation</strong>: Improved error prevention through proper method access patterns</li>
+                    <li><strong>Backward Compatibility</strong>: All changes maintain 100% compatibility with existing code</li>
+                </ul>
+
+                <h4>Mobile & Tablet Enhancements</h4>
+                <ul>
+                    <li><strong>Optimized Button Sizing</strong>: Better touch-friendly button dimensions for tablet devices (451px - 1024px)</li>
+                    <li><strong>Improved Layout</strong>: Enhanced responsive design for button containers and spacing</li>
+                    <li><strong>Touch Interaction</strong>: Better padding and font sizes for improved user experience on touch devices</li>
+                </ul>
            </section>
           </div><!--end documentation-content-->
 

dist/jAlert.min.js

@@ -3821,4 +3821,26 @@ body.ja_blur > *:not(.ja_wrap) {
         font-size: 12px;
         padding: 8px;
     }
+}
+
+/* Tablet button sizing */
+@media (min-width: 451px) and (max-width: 1024px) {
+    .ja_btn {
+        padding: 8px 16px !important;
+        font-size: 16px !important;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .ja_btn_wrap {
+        margin-top: 15px;
+        margin-bottom: -15px;
+    }
+    
+    .ja_btn_wrap.optBack {
+        margin-top: 30px;
+        margin: 30px -20px -20px -20px;
+        padding: 10px 0px;
+    }
 }