### Complete AJAX Example Source: https://context7.com/alexradulescu/freezeui/llms.txt Demonstrates a real-world usage pattern with the fetch API, showing the freeze overlay during an asynchronous operation with proper error handling. ```APIDOC ## Complete AJAX Example ### Description Demonstrates a real-world usage pattern with the fetch API, showing the freeze overlay during an asynchronous operation with proper error handling. ### Method `async function loadUserData(userId)` ### Parameters #### Path Parameters - **userId** (number) - Required - The ID of the user to load. ``` ```APIDOC ### Request Example ```javascript // Freeze UI during API call async function loadUserData(userId) { try { // Show loading state FreezeUI({ text: 'Loading user data' }); // Make API request const response = await fetch(`/api/users/${userId}`); if (!response.ok) { throw new Error('Failed to load user'); } const userData = await response.json(); // Update UI with data document.querySelector('#user-name').textContent = userData.name; document.querySelector('#user-email').textContent = userData.email; // Remove loading overlay UnFreezeUI(); return userData; } catch (error) { // Remove overlay on error too UnFreezeUI(); alert('Error: ' + error.message); } } // Usage document.querySelector('#load-user-btn').addEventListener('click', () => { loadUserData(123); }); ``` ### Response #### Success Response (200) - **userData** (object) - Contains the fetched user data. Structure depends on the API response. #### Response Example ```json { "id": 123, "name": "John Doe", "email": "john.doe@example.com" } ``` ``` -------------------------------- ### Install FreezeUI with HTML Source: https://github.com/alexradulescu/freezeui/blob/master/README.md Include the FreezeUI CSS and JavaScript files in your HTML to enable its functionality. This is the basic setup required before using the plugin's features. ```html ... ... ``` -------------------------------- ### HTML: Install FreezeUI via CDN Source: https://context7.com/alexradulescu/freezeui/llms.txt Provides a complete HTML structure for integrating FreezeUI into a web page. It shows how to include the necessary CSS and JavaScript files from a CDN and demonstrates a basic usage example where the UI is frozen during a simulated asynchronous data loading operation. ```html FreezeUI Example

My Application

``` -------------------------------- ### FreezeUI: AJAX Example with Fetch API (JavaScript) Source: https://context7.com/alexradulescu/freezeui/llms.txt Demonstrates a complete AJAX usage pattern with the Fetch API, utilizing FreezeUI to show a loading overlay during an asynchronous operation. Includes error handling and ensures the overlay is removed upon completion or failure. Requires the FreezeUI library and a functional API endpoint. ```javascript async function loadUserData(userId) { try { FreezeUI({ text: 'Loading user data' }); const response = await fetch(`/api/users/${userId}`); if (!response.ok) { throw new Error('Failed to load user'); } const userData = await response.json(); document.querySelector('#user-name').textContent = userData.name; document.querySelector('#user-email').textContent = userData.email; UnFreezeUI(); return userData; } catch (error) { UnFreezeUI(); alert('Error: ' + error.message); } } document.querySelector('#load-user-btn').addEventListener('click', () => { loadUserData(123); }); ``` -------------------------------- ### JavaScript: Simulate Timed Loading with FreezeUI Source: https://context7.com/alexradulescu/freezeui/llms.txt Demonstrates how to use FreezeUI in conjunction with `setTimeout` to simulate operations of a predictable duration. It allows for freezing the UI with a specific message and automatically unfreezing it after the specified time. Includes examples of basic timed loading and progressive loading with text updates. ```javascript // Show loading for a specific duration function simulateLoading(duration = 3000) { FreezeUI({ text: 'Processing...' }); setTimeout(() => { UnFreezeUI(); console.log('Loading complete'); }, duration); } // Usage examples document.querySelector('.demo-btn').addEventListener('click', () => { simulateLoading(3000); // 3 seconds }); // Progressive loading with text updates function progressiveLoad() { FreezeUI({ text: 'Initializing' }); setTimeout(() => { UnFreezeUI(); FreezeUI({ text: 'Loading assets' }); }, 1000); setTimeout(() => { UnFreezeUI(); FreezeUI({ text: 'Almost done' }); }, 2000); setTimeout(() => { UnFreezeUI(); }, 3000); } ``` -------------------------------- ### FreezeUI with custom options Source: https://github.com/alexradulescu/freezeui/blob/master/index.html This example shows how to use the `FreezeUI` function with custom options. You can specify a target element to be frozen using the `selector` property and provide custom loading text using the `text` property. This allows for more targeted UI blocking and personalized user feedback. ```javascript FreezeUI({selector: '.class-name', text: 'Custom text'}); ``` -------------------------------- ### Basic FreezeUI Usage (JavaScript) Source: https://github.com/alexradulescu/freezeui/blob/master/README.md Demonstrates the fundamental methods to freeze and unfreeze the user interface using FreezeUI. FreezeUI() without arguments freezes the entire page, while UnFreezeUI() removes the overlay. ```javascript // Freeze the UI FreezeUI(); // Un Freeze the UI UnFreezeUI(); ``` -------------------------------- ### FreezeUI() - Activate Full-Page Overlay Source: https://context7.com/alexradulescu/freezeui/llms.txt Activates a full-page loading overlay with default 'Loading' text and a spinning animation. The overlay covers the entire viewport with a semi-transparent white background. ```APIDOC ## FreezeUI() - Activate Full-Page Overlay ### Description Activates a full-page loading overlay with default "Loading" text and a spinning animation. The overlay covers the entire viewport with a semi-transparent white background. ### Method `FreezeUI()` ### Parameters None ### Request Example ```javascript // Basic usage - freeze the whole page FreezeUI(); ``` ### Response #### Success Response (None) This function does not return a value, but modifies the UI by adding an overlay. #### Response Example ```json // No direct response, UI overlay is added. ``` ``` -------------------------------- ### FreezeUI({ selector: '...', text: '...' }) - Combined Options Source: https://context7.com/alexradulescu/freezeui/llms.txt Combines custom text with element targeting to show a specific loading message on a particular component. ```APIDOC ## FreezeUI({ selector: '...', text: '...' }) - Combined Options ### Description Combines custom text with element targeting to show a specific loading message on a particular component. ### Method `FreezeUI(options)` ### Parameters #### Request Body - **options** (object) - Required - An object containing configuration options. - **selector** (string) - Required - A CSS selector string targeting the element to freeze. - **text** (string) - Optional - Custom text to display on the overlay. ``` ```APIDOC ### Request Example ```javascript // Freeze specific element with custom text FreezeUI({ selector: '.shopping-cart', text: 'Updating cart...' }); // Form submission example document.querySelector('#submit-btn').addEventListener('click', () => { FreezeUI({ selector: '#user-form', text: 'Saving data' }); // Simulate API call setTimeout(() => { UnFreezeUI(); alert('Form submitted!'); }, 2000); }); ``` ### Response #### Success Response (None) This function does not return a value, but modifies the UI by adding an overlay. #### Response Example ```json // No direct response, UI overlay is added to the specified element with custom text. ``` ``` -------------------------------- ### JavaScript: Manage FreezeUI for Multiple Sequential Async Operations Source: https://context7.com/alexradulescu/freezeui/llms.txt Illustrates how to manage the FreezeUI state across a series of dependent asynchronous operations. Each step (validation, processing, saving) is individually frozen and unfrozen, with short pauses in between to ensure a smooth user experience. Error handling is included to always unfreeze the UI. ```javascript // Chain multiple operations with UI freezing async function performMultiStepOperation() { try { // Step 1: Validate FreezeUI({ text: 'Validating' }); await validateInput(); UnFreezeUI(); // Short pause between steps await new Promise(resolve => setTimeout(resolve, 500)); // Step 2: Process FreezeUI({ text: 'Processing' }); const processedData = await processData(); UnFreezeUI(); await new Promise(resolve => setTimeout(resolve, 500)); // Step 3: Save FreezeUI({ text: 'Saving' }); await saveToServer(processedData); UnFreezeUI(); alert('Operation completed successfully!'); } catch (error) { UnFreezeUI(); // Always cleanup on error alert('Operation failed: ' + error.message); } } // Helper functions async function validateInput() { return new Promise(resolve => setTimeout(resolve, 1000)); } async function processData() { return new Promise(resolve => { setTimeout(() => resolve({ status: 'processed' }), 1500); }); } async function saveToServer(data) { return fetch('/api/save', { method: 'POST', body: JSON.stringify(data) }); } ``` -------------------------------- ### FreezeUI with Custom Options (JavaScript) Source: https://github.com/alexradulescu/freezeui/blob/master/README.md Illustrates how to customize the FreezeUI overlay by providing options for text content and the target selector. The selector requires the target element to have 'position: absolute' or 'position: fixed'. ```javascript FreezeUI(); // To simply freeze the whole page FreezeUI({ text: 'Custom text' }); // Freeze with a custom text FreezeUI({ selector: '.class-name' }); // Freeze a certain component. FreezeUI({ selector: '#id-name' }); // The component must have position: fixed or absolute to work FreezeUI({ selector: '.component', text: 'Getting there...' }) // Using both options at the same time. UnFreezeUI(); // Will unfreeze any and all options from above ``` -------------------------------- ### Targeted Component Loading with FreezeUI (JavaScript) Source: https://context7.com/alexradulescu/freezeui/llms.txt Demonstrates how to freeze only specific UI components using FreezeUI, allowing other parts of the page to remain interactive. This is useful for dashboard-style applications where individual panels might be refreshing. It takes a selector for the target component and updates its content after an API call. ```javascript // Freeze only specific components function refreshDashboardPanel(panelId) { const selector = `#${panelId}`; // Freeze just this panel FreezeUI({ selector: selector, text: 'Refreshing' }); // Fetch new data fetch(`/api/dashboard/${panelId}`) .then(response => response.json()) .then(data => { // Update panel content document.querySelector(selector + ' .content').innerHTML = data.html; }) .catch(error => { console.error('Refresh failed:', error); }) .finally(() => { UnFreezeUI(); }); } // HTML structure example: //

Panel content here

// Usage document.querySelector('#refresh-sales').addEventListener('click', () => { refreshDashboardPanel('sales-panel'); }); document.querySelector('#refresh-analytics').addEventListener('click', () => { refreshDashboardPanel('analytics-panel'); }); ``` -------------------------------- ### Initialize FreezeUI and UnFreezeUI with delay Source: https://github.com/alexradulescu/freezeui/blob/master/index.html This JavaScript snippet demonstrates how to use FreezeUI to block the UI and then unblock it after a delay. It attaches an event listener to a button to trigger the freezing and unfreezing process. The `FreezeUI()` function can optionally accept an object with a selector and custom text, while `UnFreezeUI()` takes no arguments. The UI is blocked for 3000 milliseconds (3 seconds). ```javascript window.addEventListener('load', () => { document.querySelector('.action-demo').addEventListener('click', () => { FreezeUI(); setTimeout(() => { UnFreezeUI(); }, 3000); }); }); ``` -------------------------------- ### FreezeUI({ text: '...' }) - Custom Text Overlay Source: https://context7.com/alexradulescu/freezeui/llms.txt Displays the loading overlay with custom text instead of the default 'Loading' message. The text appears centered below the spinning animation. ```APIDOC ## FreezeUI({ text: '...' }) - Custom Text Overlay ### Description Displays the loading overlay with custom text instead of the default "Loading" message. The text appears centered below the spinning animation. Text is displayed in uppercase automatically via CSS. ### Method `FreezeUI(options)` ### Parameters #### Request Body - **options** (object) - Required - An object containing configuration options. - **text** (string) - Optional - Custom text to display on the overlay. Keep text short to maintain design integrity. ``` ```APIDOC ### Request Example ```javascript // Freeze page with custom loading message FreezeUI({ text: 'Processing payment...' }); // Another example FreezeUI({ text: 'Uploading files' }); ``` ### Response #### Success Response (None) This function does not return a value, but modifies the UI by adding an overlay. #### Response Example ```json // No direct response, UI overlay is added. ``` ``` -------------------------------- ### FreezeUI: Activate Full-Page Loading Overlay (JavaScript) Source: https://context7.com/alexradulescu/freezeui/llms.txt Activates a full-page loading overlay using FreezeUI. This basic usage freezes the entire viewport with a default 'Loading' text and a spinning animation. Call UnFreezeUI() to remove it. No external dependencies are required. ```javascript FreezeUI(); ``` -------------------------------- ### FreezeUI({ selector: '...' }) - Element-Specific Overlay Source: https://context7.com/alexradulescu/freezeui/llms.txt Applies the loading overlay to a specific DOM element instead of the entire page. The target element must have `position: relative`, `position: absolute`, or `position: fixed` for proper overlay positioning. ```APIDOC ## FreezeUI({ selector: '...' }) - Element-Specific Overlay ### Description Applies the loading overlay to a specific DOM element instead of the entire page. The target element must have `position: relative`, `position: absolute`, or `position: fixed` for proper overlay positioning. ### Method `FreezeUI(options)` ### Parameters #### Request Body - **options** (object) - Required - An object containing configuration options. - **selector** (string) - Required - A CSS selector string targeting the element to freeze. The selected element will have the overlay, and the rest of the page remains interactive. ``` ```APIDOC ### Request Example ```javascript // Freeze only a specific component FreezeUI({ selector: '.dashboard-panel' }); // Freeze by ID FreezeUI({ selector: '#checkout-form' }); ``` ### Response #### Success Response (None) This function does not return a value, but modifies the UI by adding an overlay. #### Response Example ```json // No direct response, UI overlay is added to the specified element. ``` ``` -------------------------------- ### FreezeUI: Custom Text on Specific Element (JavaScript) Source: https://context7.com/alexradulescu/freezeui/llms.txt Combines custom text and element targeting to display a specific loading message on a particular component using FreezeUI. The overlay is applied to the specified selector with the provided text. Dependencies include the FreezeUI library and targetable DOM elements. ```javascript FreezeUI({ selector: '.shopping-cart', text: 'Updating cart...' }); document.querySelector('#submit-btn').addEventListener('click', () => { FreezeUI({ selector: '#user-form', text: 'Saving data' }); setTimeout(() => { UnFreezeUI(); alert('Form submitted!'); }, 2000); }); ``` -------------------------------- ### FreezeUI: Custom Loading Text (JavaScript) Source: https://context7.com/alexradulescu/freezeui/llms.txt Activates the FreezeUI loading overlay with custom text. The provided text appears centered below the spinning animation. Ensure text is kept short for optimal design. This function relies on the core FreezeUI library. ```javascript FreezeUI({ text: 'Processing payment...' }); FreezeUI({ text: 'Uploading files' }); ``` -------------------------------- ### UnFreezeUI() - Remove Overlay Source: https://context7.com/alexradulescu/freezeui/llms.txt Removes any active FreezeUI overlay from the page, regardless of which options were used to create it. Includes a smooth fade-out transition. ```APIDOC ## UnFreezeUI() - Remove Overlay ### Description Removes any active FreezeUI overlay from the page, regardless of which options were used to create it. Includes a smooth fade-out transition. This function is safe to call even if no overlay is currently active. ### Method `UnFreezeUI()` ### Parameters None ### Request Example ```javascript // Remove the freeze overlay UnFreezeUI(); ``` ### Response #### Success Response (None) This function does not return a value, but modifies the UI by removing an overlay. #### Response Example ```json // No direct response, UI overlay is removed. ``` ``` -------------------------------- ### FreezeUI: Target Specific Element Overlay (JavaScript) Source: https://context7.com/alexradulescu/freezeui/llms.txt Applies the FreezeUI loading overlay to a specific DOM element identified by a CSS selector. The target element must have `position: relative`, `absolute`, or `fixed`. This allows for localized loading indicators. UnFreezeUI() will remove the overlay. ```javascript FreezeUI({ selector: '.dashboard-panel' }); FreezeUI({ selector: '#checkout-form' }); ``` -------------------------------- ### UnFreezeUI: Remove Loading Overlay (JavaScript) Source: https://context7.com/alexradulescu/freezeui/llms.txt Removes any active FreezeUI loading overlay from the page. This function handles the cleanup regardless of how the overlay was initiated (full-page, custom text, or element-specific). It ensures a smooth fade-out transition and can be safely called even if no overlay is present. ```javascript UnFreezeUI(); ``` -------------------------------- ### JavaScript: Freeze UI during Form Submission with Validation Source: https://context7.com/alexradulescu/freezeui/llms.txt Handles form submission by preventing default behavior, performing client-side validation, and then freezing the UI with a custom message before sending data to the server. It ensures the UI is unfrozen regardless of the operation's success or failure. ```javascript document.querySelector('#contact-form').addEventListener('submit', async (e) => { e.preventDefault(); // Get form data const formData = new FormData(e.target); const email = formData.get('email'); const message = formData.get('message'); // Validate if (!email || !message) { alert('Please fill all fields'); return; } // Freeze with custom message FreezeUI({ text: 'Sending message' }); try { // Submit to server const response = await fetch('/api/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, message }) }); if (response.ok) { alert('Message sent successfully!'); e.target.reset(); } else { throw new Error('Server error'); } } catch (error) { alert('Failed to send message'); } finally { // Always unfreeze UnFreezeUI(); } }); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.