I have a vue application and I load async components.
The problem is the page render is jumping.
For example, in the picture I load header, intro, slide components (and more components after slide component)..
When I using import('./...') then I see that the slide component is first to render then header then the intro component. (this order is always change).
This is cause the page to be jump, the slide is going down and the intro is appear, which have bad ux.
I try to fix that by css grid - defined the template-column-rows (min size) but, the components are not there yet. so the wrap div doesn't affect on the child components.
Here by this picture the header and the slide is already rendered, and after a few seconds the intro is appear..
Any idea how to handle this problem?
If you know ahead of time that the components are going to be loaded in, you could create wrapper divs in the parent component that loads these components. And add a css grid system to these wrapper divs, defining height etc.
This would prevent the jumping of elements around the page as new components are loaded in.
As you haven't shared any code, it's hard to tailor this answer to your specific needs. I hope it gives you an idea of what to do.
Example
Parent
<template>
<div class="container">
<div id="header__wrapper">
<Header />
</div>
<div id="intro__wrapper">
<Intro />
</div>
<div id="slide_wrapper">
<Slide />
</div>
</template>
CSS
.container {
grid-template-rows: 1fr 1fr 1fr; /* or whatever you need */
}
Related
Each page of my site has a footer (one for all pages), it has the parameter position: 'fixed'. Accordingly, this means that the footer is always attached to the bottom of the browser, regardless of the screen size and information on the page.
There is also a table on several pages of the site.
The problem is that sometimes a white gap appears between the table and the footer (this happens when testing on screens of different sizes, or simply when changing the browser zoom).
Yes, the most common advice is to add a min-height. And it kind of works. But in this case, with standard screen sizes, the distance between the table and the footer is large (yes, this is not a problem, but it is better to avoid this).
Therefore, I ask for your help in solving the problem.
The code below is responsible for the formation of the page and styles
export default function Devices() {
return (
<div style={styles.Style}>
<Table />
</div>
);
}
and the following code forms the footer
export default function Footer() {
return <Grid container sx={styles.Footer}></Grid>;
}
When I have this issue, I just style the body tag to match my main container, and set the min-height to 100vh.
This way the body will be its natural size when you have content, but will always fill the view port regardless of client screen dimensions.
In your example, it’s just
body {
background: red;
min-height: 100vh;
}
Alright, I have no idea what I'm doing. I thought that there would be a library for this, but apparently there isn't.
Problem Explanation
I have a complicated React Application.
There exists
Main Page Element
A content container
A display container
The element I want to scroll to
I am trying to find a solution that will scroll to an element on a page and force all parent scrollbars to scroll to the appropriate location in order to view the element on screen.
Example
<html>
<head />
<body>
<div style="background:red; display: block; height: 1000px; overflow-y: auto">
Root Parent
<div>
<div style="background:green; display: block; height: 1000px;overflow-y: auto">
Another Parent
<div>
<div style="background:blue; display: block; height: 1000px; overflow-y: auto"></div>
<div style="background:purple; display: block; height: 1000px; overflow-y: auto">
<div id="targetElement">Scroll here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS Fiddle Here
https://jsfiddle.net/10f83ush/
Solutions I've tried
I found zen scroll
But in their How to Use Section - 1.4 they explicitly state it isn't supported
https://zengabor.github.io/zenscroll/#howtouse
I found this this thread here
Scroll all nested scrollbars to bring an HTML element into view
And I thought that would work but it doesn't.
If I do element.scrollIntoView that doesn't work either because it's got two sets of scrollable parent/grandparent that both need to scroll to.
Request
How the heck do I get all the parents of the target I want to scroll towards to all scroll towards the correct location to show the element on the page?
I feel like I'm going crazy. It's 2020 and I can't simply scroll to an element that's nested inside other scrollable elements?!
EDIT
To clarify, I'm not trying to do a million scroll bars at a time (Yes this is bad UI/UX), but the solution I'm searching for should support as many as possible. There are multiple solutions I've found where the answer has been solved, but only for one or two scroll bars and then ignored more than two. I would love for guidance or help on how to handle any amount of parent scroll bars when trying to scroll a nested element into view.
Without creating a more complicated solution I opted to use a library called scroll-into-view.
https://github.com/KoryNunn/scroll-into-view
https://www.npmjs.com/package/scroll-into-view
This library is AMAZING - and it does EXACTLY what I wanted which is scrolling elements into view.
Additionally it supports arbitrarily offsetting the scroll location, the ability to filter scrollable areas so that it doesn't change focus from the entire page, and a ton of other amazing features.
This was so good I decided to contribute to the patreon for it!
If you're looking for a solution I would suggest trying this library out!
I am pretty sure there are many articles on this. In fact, I have seen many that I have used before. The thing is, I am using Material Design by Google. So they have loading elements already in the framework. It looks something like this:
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
Previously I have had trouble with this kinda thing. If someone could help me out, that would be great.
Here is the link to what the loading animation looks like:
https://getmdl.io/components/index.html#loading-section (it is the spinner).
MDL spinner on page load solution
MDL just provides the spinner and it's up to the developer to integrate it into the page for what ever your need's may be. In this case you want to use it on page load.
Placing the spinner
To create a loading spinner you first need to place a <div class="mdl-spinner mdl-js-spinner is-active"> at the top of your document. I suggest right above the closing </head> tag.
Centering the spinner.
To center the spinner you can do it with flex box like so.
Place the spinner inside a container above the closing </head>
HTML
<div class="spinner">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</div>
CSS
Centering the spinner with flexbox. The spinner is set to display:none to hide it from view atm . Adding a class of spinner-on and giving it the display property of flex that we trigger on with jQuery when we want to show it.
$spinner-size:100px;
html, body, .spinner{
height:100%;
overflow: hidden;
}
.mdl-spinner{
height:$spinner-size;
width:$spinner-size;
}
.spinner{
position:relative;
display: none;
align-items: center;
justify-content: center;
}
.spinner-on {
display: flex;
}
Trigger with jQuery
With jQuery we trigger our spinner-on class which brings spinner into view. Then we use fading functions to fade in the spinner and fade it out after a set amount of time. Overflow is also set se we can now scroll the page.
$(function() {
var overflow = $('body,html, .spinner');
$(".spinner").addClass('spinner-on');
$(".spinner").fadeOut(2000, function() {
$("body").fadeIn(2000);
overflow.css('overflow','visible');
});
});
DEMO
I've just started working with the polymer-dialog and polymer-dialog-scrollable elements. Using the standard case, and following the examples on the Polymer website, the elements are displaying well.
However, I am running into an issue. The content that I wish to display in the polymer-dialog-scrollable does not look good in the standard size dialog:
I would like to increase the height of the entire dialog box, so I tried styling the elements with CSS:
paper-dialog {
height: 90%;
}
paper-dialog-scrollable {
height: calc(100% - 128px); /* 128 seemed to account for the header and footer */
}
In simple HTML, this should work. But in practice, there is actually a generated div inside of the paper-dialog-scrollable with id and class scrollable, which I assume Polymer is inserting. Inspecting this element, I see this CSS:
element.style {
box-styling: border-box;
max-height: 60px;
max-width: 1292.81px;
}
Which renders the screen this way:
I'm not sure where this max-height: 60px styling is coming from, or how to overwrite it. Since the div seems to be a Polymer-generated object, I assume that this is generated by Polymer at some point. But it's not growing with the rest of the dialog.
Is there some setting or method for this element that makes sure the inner "scrollable" div will grow with its container (paper-dialog-scrollable)?
(Ideally, I would like the dialog to only grow based on the size of the content, with a maximum height of 100%. But that's beyond the scope of this question.)
UPDATE:
The max-height is not necessarily sticking on 60px. Right now, it starts at 383px (far below the height of the paper-dialog-scrollable element). The height of the "scrollable" div does change when I expand and shrink the window, but it always seems like a certain percentage of what it should be.
Here is a code sample of how I'm using the elements inside the HTML body:
<body unresolved>
<template is="dom-bind">
<div class="centerPanel">
...
<paper-button class="jobButton" onclick="openTheDialog('#BADialog')" style="margin-top:50px;">Business Analyst</paper-button>
...
</div>
<paper-dialog id="BADialog" modal>
<h2>Business Analyst</h2>
<paper-dialog-scrollable>
<div class="content" id="BAContent">
...
</div>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm autofocus>Apply for a Business Analyst position</paper-button>
</div>
</paper-dialog>
</template>
<script>
function openTheDialog(selector) {
document.querySelector(selector).open();
}
...
</script>
</body>
Thank you to #tony19 for the help. I tried his working examples in my environment, and they did not work with the same behavior as on Codepen.
This led me to conclude, rightly, that it was my environment that was at fault. I upgraded my local Polymer components to the latest version, and everything now works fine.
I am trying to write my first single-page application. The idea is to have 1 HTML file that contains many <div> tags; where each <div> represents a single web "page". Then the application just shows 1 <div> at a time, and hides the others. In this way, as users navigate my app, I'm really just showing/hiding different "page" divs, and giving the illusion of a single page app.
Additional requirements are:
This is an HTML5 app
Each page div must map too its own bookmarkable URL (http://myapp.example.com/#fizz, http://myapp.example.com/#buzz, etc.)
Singe each page div is bookmarkable, the app must work with the HTML5 history api
I decided on using Crossroads for routing, and Hasher for History. The other lead contender was AngularJS, but in the end I decided against AngularJS because it was too heavyweight for what I'm trying to do here, and seemed to have a steeper learning curve associated with it.
So far, my project has the following directory structure:
myapp/
index.html
myapp.js
myapp.css
signals.min.js <-- Required by both Crossroads and Hasher
crossroads.min.js
hasher.min.js
The JSFiddle containing my index.html, myapp.css and myapp.js files is here:
http://jsfiddle.net/Sxfms/2/
The idea is that the user can click one of the links in the "navbar" ("Home", "About", "Contact") and be brought to the "page" (div) representing that particular page.
As you can see, the default "page" should be HOME, meaning this is the only div you should be able to see. But all the page divs are visible, and none are hidden. And until I can get the page divs showing/hiding correctly, I can't really test routing/history functionality. Have I configured Crossroads/Hasher wrong somehow?
I think there is a solution for your requirements. It is a really easy, lightweight approach without the need of any javascript just with the power of CSS. ;-)
The key of the whole approach is the CSS pseudo-class selector :target.
So let me first explain the concept of :target: The pseudo selector matches when the fragment identifier (or hash, #content for instance) in the URL and the id of an HTML element are the same. If we have a URL like http://www.example.com/hallo.html#content and an element with the id="content" the selector #content:target { ... } would match.
You can´t really see the URL in this fiddel, but you will in another example. Her is the code of the fiddle:
HTML:
content
<div id="content">
Markup is poetry!
</div>
CSS:
#content {
border: 1px solid black;
padding: 20px;
}
#content:target {
background: lightblue;
}
The :target approach leads to this stripped down example to explain the page-navigation-idea: http://jsfiddle.net/Cxr73/1/ Again you can´t really see the URLs with the fragment identifier.
HTML:
div1
div2
div3
<div id="div2">
<div id="div3">
<div class="div1Inner">content div1</div>
<div class="div2Inner">content div2</div>
<div class="div3Inner">content div3</div>
</div>
</div>
CSS:
.div2Inner, .div3Inner,
#div2:target .div1Inner, #div3:target .div1Inner {
display: none;
}
#div2:target .div2Inner, #div3:target .div3Inner {
display: block;
}
Hide all divs that should not be displayed at first: .div2Inner, .div3Inner { display: none;}. So just <div class="div1Inner">content div1</div> is visible. Show the corresponding div when the fragment identifier is part of the URL: #div2:target .div2Inner, #div3:target .div3Inner {display: block;}. In the end you have to hide div1 when div2 or div3 are visible: #div2:target .div1Inner, #div3:target .div1Inner { display: none; }. Combine the first and the last CSS selector and you get to the CSS shown above.
Some recommendations on your markup:
As recommended by the HTML5 spec (4.2.5.5 Specifying the document's character encoding), add your charset declaration early to avoid a potential encoding-related security issue in IE. It should come in the first 1024 bytes.
The <center> element was deprecated because it defines the presentation of its contents. For this purposes we have CSS.
You are writing an HTML5 app, so throw in some more semantic markup, elements like: nav, header, section, footer, etc.
Here you have the final approach of my ideas, with your CSS plus the :target selectors (starts at line 600) and what I consider a clean markup:
Fiddle: http://jsfiddle.net/Cxr73/2/
To finally see the fragment identifier plus the :target in action and for test purposes another URL: DEMO ... this demo will disappear in a few days, but the fiddle will stay.
I think that pretty much matches all your needs. Have fun!