Making the content adapt when changing the screen size
Question
I'm creating a website which needs to be responsive, no problem here as I know how that's being done, but I also need to change the display based on the size of the screen, and this must be done dynamiccly and thus I cannot use media queries (I think).
I'm open to all options: pure css, html, javascript, jQuery, ...
I have a website which looks like the the following:
This is looking already good, now, when I resize the window to make it smaller, the background will dissapear, and this is achieved based on a CSS3 media query:
#OfficeUI { min-height: 52px; background: url('../Images/Application/Backgrounds/Circuit.png') no-repeat scroll right top rgba(0, 0, 0, 0); color: #444; font-family: 'Segoe UI'; font-size: 0.75em; overflow: hidden; }
@media screen and (max-width: 497px) {
#OfficeUI { background-image: none; }
}
So far, so good, but now the real problem does show up. When I resize the window to a very small portion of what it is right now, the website does behave like this:
In this particular case, the text 'Inbox - user...' is moving over the icons. What I would like to have here is that the area of the icons is made smaller, meaning that the most right icon will not be showed anymore. If I further resize the window, the area can shrink again so again an icon is removed.
But the problem here is that I don't have any control over the content which is displayed, there might be 6 icons and there might a very long title, or vice versa.
The only idea I can up with, not implemented in a solution is the following (jQuery):
- Calculate the width of the Window.
- Calculate the width of the title area.
- Calculate the width of the icons area.
On resizing the window, I would implement them something like this:
- If the size of the icons area and the size of the title area is larger than the window size, then shrink the icons area with a specified amount of pixels (predefined) so that 1 image is removed and repeat that on every resize.
The only problem that I do have with this solution is that the website will grow a lot and performing all those kind of calulcations on every window resize might not be best-practice.
I'm a bit affraid that the website will become very laggy.
[EDIT]: I've added a snippet with the current code.
/* General styling that can be applied to all the elements. */ .no-margin { margin: 0px; } .no-padding { padding: 0px; } /* General styling for the root of the website. */ #OfficeUI { min-height: 52px; background: url('../Images/Application/Backgrounds/Circuit.png') no-repeat scroll right top rgba(0, 0, 0, 0); color: #444; font-family: 'Segoe UI'; font-size: 0.75em; overflow: hidden; } /* General styling that can be applied to all kind of elements inside the OfficeUI container. */ #OfficeUI .center { text-align: center; } #OfficeUI .absolute { position: absolute; } /* Container elements. */ #OfficeUI .container { display: inline-block; } #OfficeUI .container-full-width { width: 100%; } /* Styling for the OfficeUI elements itself. */ #OfficeUI .application-title { margin: 6px 3px 0px 0px; } #OfficeUI .application-icons img { margin: 3px 1px 0px 4px; } #OfficeUI .application-icons img:first-child { margin: 3px 0px 0px 7px; } #OfficeUI .application-icons img:hover:not(:first-child) { background-color: #cde6f7; } /* Provide some responsive styling. The following styling is applied to the screen when the width of the window is less than 497px. */ @media screen and (max-width: 497px) { /* Hide the background image when the size of the screen is smaller than the size of the background-image. */ #OfficeUI { background-image: none; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Defines the main content area for the website. --> <body class="no-margin no-padding"> <!-- Provides the main OfficeUI area. --> <div id="OfficeUI"> <!-- Defines the header itself. --> <header> <!-- Provides the area in which the application icons are being showed. --> <div class="absolute"> <div class="container application-icons"> <img src="Resources/Images/Application/Application.png"/> <img src="Resources/Images/Application/Send-Receive.png"/> <img src="Resources/Images/Application/Undo.png"/> </div> </div> <!-- Provides the area in which the application title is being rendered. --> <div class="container container-full-width center"> <div class="application-title">Inbox - user@github.com - Outlook</div> </div> </header> </div> </body>
When the window is resized, I would like to see something like:
Any toughts on this?
Kind regards,
1 answers
solution1
0 2015-01-07 13:36:19
#OfficeUI .application-icons { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
@media screen and (max-width: 350px) {
#OfficeUI .application-icons { width: 25px;}
}
@media screen and (max-width: 250px) {
#OfficeUI .application-icons { display: none}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.