Responsive Sub-Frame Content Rearrangement
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current responsive web design techniques do not allow for the rearrangement of content within sub-regions of a browser window when they are resized, limiting the adaptability of web pages to different form factors and aspect ratios.
Innovation Solution
A framework is introduced that dynamically attaches CSS classes to targeted elements within sub-frames as they are resized, allowing predefined CSS styles to affect tagged elements and enabling the intelligent rearrangement of content within sub-regions based on available space, independent of the main browser window size.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If responsive web design techniques are applied to the entire browser window, then the page can adapt to different device sizes, but the contents of sub-regions cannot be independently rearranged
Solution Approach 1:
The patent divides the web page into multiple independent sub-regions (iframes), each capable of responsive design independently. This allows each sub-region to be optimized for its specific content and device requirements without affecting other parts of the page, resolving the contradiction between overall adaptability and sub-region rearrangement complexity.
Solution Approach 2:
The patent implements dynamic resizing and rearrangement of sub-regions based on device characteristics. Each sub-region can change its size and position dynamically according to the available screen space, enabling flexible adaptation to different device formats while maintaining independent control over each sub-region's content.
2Adaptability or versatility
If sub-regions are resized independently, then content rearrangement within sub-regions is enabled, but the overall page layout may become complex
Solution Approach 1:
By segmenting the page into independent iframes, each sub-region can be resized and rearranged independently without creating complex interdependencies. The segmentation isolates the complexity within each sub-region while maintaining simplicity in the overall page structure.
Solution Approach 2:
The patent creates a universal responsive design framework that can be applied to any sub-region regardless of its specific content. This multi-functional approach allows the same resizing and rearrangement mechanisms to work across different sub-regions, simplifying the overall implementation despite the independence requirements.
3Reliability
If traditional server-based applications are used, then data processing is centralized, but infrastructure costs and complexity increase
Solution Approach 1:
The patent replaces traditional mechanical server infrastructure with a cloud-based virtualized system. Instead of dedicated physical servers, the system uses virtual machines and cloud resources to provide data processing capabilities, reducing infrastructure complexity while maintaining processing reliability through virtualization and resource pooling.
Solution Approach 2:
The cloud-based infrastructure provides universal access to data processing services across multiple tenants and applications. This multi-functional platform allows different users and systems to share infrastructure resources while maintaining isolated and reliable data processing, eliminating the need for dedicated server hardware for each application.
Data Source
AI summary
Methods and systems are provided for rearranging content within resized sub-regions of a web page. First, resizing of a first sub-region of the webpage is detected by a user dragging a slidable border of the sub-region. A span value associated with dimensions of the first resized sub-region is determined and defining minimum dimensions of the first resized sub-region are defined. A subset of the dimensions of the first resized sub-region that fit within the span value is defined based on the minimum dimensions of the resized sub-region. The dimensions of the first resized sub-region include a fixed parameter and a dynamic parameter. The contents of a second sub-region of the webpage are rearranged in response to the resizing of the first resized sub-region and displaying displayed.