Edit: Turns out the performance problems only happen during development. Once Gatsby builds the project, everything runs well. I'd be curious to hear if anyone can explain that behaviour.
I am building a page that allows users to compare two large tables. The user is able to grab the bar in the middle to adjust the sizes of both tables.
Currently I am handling this with two containers, both with overflow: scroll and a height that is calculated when dragging the resize bar. However, this approach is really sluggish. It works well when the tables are empty but with many elements it becomes a problem. I am unsure if this has something to do with memory usage or repaints when changing the height. Are there any tips and tricks you can think of to make this work smoothly?
PS: Virtualisation is pretty much out of scope because of the complexity of the table and dynamic row height.
Related
This is a long shot, but here's what's bothering me: I have a page which can go infinitely (so to speak) in all directions. It's an overflow: hidden on the main div and I can move by dragging the screen or with arrow keys. The data displayed inside is just ascii text (loads of it, rendered in loads of tables, long story, not allowed to change it). I've optimised it to cleanup after itself and regarding network traffic and sheer rendering into the DOM, everything is fine. There are no lags/hiccups no matter how much I drag the screen and move around.
However, it doesn't look/feel as smooth as a page with less content on it. My guess is it either looks different form a pure optical perspective, due to the amount of noise on the page OR the DOM is taking a beating by so much content and doesn't perform the way it should be (i.e. it doesn't lag, but it doesn't perform ideally, as well).
Anyone experienced with these kind of issues? Any scrolling/optimisation tips for lots of content in the visible part of the page? Or could it be just an optical thing? I know this question might be a bit wide, but it is what it is.
I've been trying to analyse how this is done for the past few hours and just can't get it working.
Here's an example: http://vpthemes.com/preview/Modality/
If you go there, look at the 4 boxes under the text "CLEAN DESIGN & GREAT FUNCTIONALITY". If you resize your browser window, you'll notice that the boxes will go 2 side by side, and then if you go even smaller, they'll all go one under the other. The WHOLE website is like that; everything seems to resize perfectly depending on the size of the window.
How the HELL is that done? I've tried so many CSS styles it's boggling my mind.
Thanks!
As kumar said its done by media querys. You could take off the responsive css classes or overwrite it with '!important'
This is Bootstrap magic. You can configure each element in order to stay still, push right, left, etc. In the end, you have a layout that magically reorganize itself according to the size of the window and the configuration you've done. The mechanics of Bootstrap are partly in JS.
Amazing, isn't it?
But, wait. There will be a time at which you will be really pissed off of magic.
With #media rules and CSS3 possibilities, you can manage to reproduce Boostrap features in order to kill the magic with fire!
I am a web design student and I am working on my portfolio site. I have a resume page that has a non-traditional design or layout. The problem I am running into occurs when the page is resized. Certain elements are pushed down as the window gets smaller. I need to find a way to adjust their top margin as the resize occurs, but I have not been able to accomplish this with media queries alone. Please see the following codepen for an example of the issue I am running into.
http://codepen.io/anon/pen/Hkpny
As the browser goes below 1440px, the boxes hanging from the ropes start to push down. Is there a way to use javascript to recalculate the margin-top and apply it to the elements when the user reduces or increases the window resize? The ultimate goal is to have the ropes stay connected where the red dots have been placed because I am going to give the hanging boxes a subtle swing or sway animation.
Any help would be greatly appreciated.
Thanks
I don't get it, all I had to do is to is what you did but for margin-top. You may want to play a bit with the values because I've never used scss before in my life (I'd do it with a <canvas> and javascript to begin with), but it works. http://codepen.io/anon/pen/iJgqn
Btw if you plan to display it in landscape mode on mobile, you may want to cut the shields left and right or it may get scaled very small. Maybe put them under the big shield in that case and get as much zoom on the rest as possible.
For a portfolio site I would recommend reconsidering the whole design. Just from this snippet, it seems the design is not very accessible and has too many dependencies. The concept is pretty cool but while you want to showcase your skills and creativity, you also want to showcase your understanding for accessibility (responsiveness), usability and what is trending right now (clean, minimal and flat design). I'm not saying you should fall in line and design what everyone else is, but you need to attract clients which is the whole purpose of a portfolio.
I have made this webpage at http://www.caseums.com. I have used twitter bootstrap and fontaweome among other things , but I find that I am too much of a novice to determine the answer. I have searched the stack database but can't find a similar enough answer to answer my problem. If one was to re-size my page to be smaller, all of the items on page move in such a manner as to move out of the box they are in , namely the <p> elements.
I would love any information to help me answer this , I've been wrestling with it for awhile, thanks for your consideration.
I assume you are referring to the #Containment div? Try using percentages for your widths. You currently have the width set to 325px, which will overflow if your window size is less than 325px.
Also take a look at media queries, if you need certain portions of your site to size differently dependant on the viewport size.
If you change the width styles on #Containment and the <div> inside #Containment, to max-width instead, is that what you're after?
I have a large containing element with around ten DIVs inside - most are about 300px in width on average and are all set to float left. The end result is a widget/grid type layout. However, this style has been specifically built with responsive design in mind - we're using media queries to adjust the size and column count depending on device.
The issue is that we may have one or two boxes that are double-wide or double-tall. The double-wide doesn't really cause a problem with floating (that I can't solve anyway) but the issue is the double-tall. The double-tall would expand into the next row, but prevents other boxes from floating on the left of it. Float-right isn't an option because the tall box can't always be on the right.
I'm trying to find a way to dynamically figure out where each block can float to, like solving a puzzle. I've looked at a few javascripts like Masonry, jLayout, etc but they either don't work, or don't solve the problem of irregular boxes.
So:
I want to avoid absolutely positioning anything because we'd have to re-do that every time, for every element and they won't feel fluid.
I need to allow for double-wide and double-tall, but they may not always be present and eventually, users should be able to determine their location so we can't always just write javascript based on a known location.
I've tried moving around the elements via jQuery which does work, but has to be done on window resize, which is too much activity and results in elements flickering back and forth when you transition over the width that requires three columns to four.
Using css3 columns won't work because the DIVs are treated as text and are broken into two when they pass to the next column, and that doesn't allow for double-wide either.
Does anyone have any ideas or suggestions?
Use Jquery Masonry or Isotope, it'll arrange all the containers into the most space saving arrangement ( or if your using isotope, you can fiddle it around to prioritise other forms of arrangement)
Well, if you don't care too much about the order of your elements, a simple solution would be this:
Add your items to #main so that all .tall widgets are added first. Float .tall widgets to the right.
Likewise, make sure that all .wide widgets are added last and float these to the left.
It works in this case and I think will give you the most optimal use of space for any set of these elements.
I still have not found any real way to handle the situation. For now I've just written some custom javascript to swap around a few DIVs when the page resizes.