I don't know if this exists in the AngularJS framework, but essentially I'm looking for the opposite of ng-cloak, which hides elements until the page is compiled. I was looking for a way to show a full screen loading message until the page is compiled. Is there something built into the language to handle this?
I have resolved this using a somewhat hacky method as follows. The following HTML is added at the end of the main page.
<div ng-show="::false" style="position: fixed; height: 100%; width: 100%; background-color: #353535; top: 0; left: 0; z-index: 10000;">
<div style="display: table; margin: 0 auto; font-size: 26px; color: #CCC;">
Loading
</div>
</div>
The message is shown across the entire browser until the page is compiled, at which point ng-show takes over and hides the loading message.
EDIT:
Angular 1.3+ lets you use the :: expression to prevent evaluating the expression in every digest cycle.
https://docs.angularjs.org/guide/expression#one-time-binding
<div ng-show>Loading Results...</div>
ng-show with no attribute specified compiles to false
You can use css to archive this behavior.
Create a class:
.splash {
display: none;
}
[ng-cloak].splash {
display: block !important;
}
And then add:
<div class="splash" ng-cloak> Loading... </div>
This will show before the Angular code loads, and will hide after the angular code completes. Don't forget to wrap your angular code with ng-cloak too.
<div ng-cloak> Your code... </div>
This helped me:
https://codepen.io/garethdweaver/pen/PqKLyB
It can be used without &:after, but the idea is well shown here, and my decision based on this was as follows:
.cloak-loader
display: none !important
[ng-cloak].cloak-loader
position: relative
display: block !important
.loader
height: 50px
display: flex
justify-content: center
align-items: center
Related
I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.
My question is;
How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.
I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.
Or is it possible with pure CSS? (Also I'm using TailwindCSS)
Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)
Also here is a gif;
click
You can use the following CSS code in the element which needs to stop
position: sticky;
bottom: 0
Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?
Hope this answers your question!
Edit: [Try this out]
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}
<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>
I'm working on a little CSS/HTML project and I'm running into a wall. Hoping I can get some help here. Here is a link to the UI I'm working on: http://imgur.com/a/yKXk9
What I'm trying to do is have that Projects header sticky to the top of that container div, and have all the items scroll beneath it without overlapping with the header.
This is the CSS I have for my container:
.projectContainer {
background-color: rgba(0, 0, 0, 0.15);
width: 30%;
height: 50%;
border-radius: 2em !important;
margin: 1em;
overflow-y: auto;
position: relative;
}
And this is the CSS I have for the header.
.projectHeader {
position: absolute;
padding-left: 35%;
top: 0;
height: 1.5em;
}
EDIT: I also added a bit of the HTML I'm using:
<div class = "projectContainer">
<div class="name projectHeader">Projects</div>
<div class="projectThumbnail">
<a href="http://lunchline.herokuapp.com" target="_blank">
<i class="fa fa-cutlery fa-3x"></i>
<p>LunchLine</p>
</a>
</div>
MORE PROJECT THUMBNAILS HERE
</div>
This obviously doesn't work as the header scrolls just like everything else. I tried using position: sticky on the header, and the problem with that was that all the content scrolled BENEATH the header text instead of neatly ending at the bottom of the header div. If anyone can guide me in the right direction I'd be very grateful.
Also, as a sidenote: is there a way to get rid of that gotdawful scrollbar and just have the thumb appear (and only appear when I'm actually scrolling)?
Thanks everyone.
EDIT:
Here is a JS Fiddle. https://jsfiddle.net/ksy6ahL0/
I tried stripping it down to just the container and stuff so it looks messy but I think it basically shows what I'm trying to do.
I think your biggest problem is that you put the overflow on the main div, not on the content div.
.container{
background:gray;
color:white;
width:400px;
height:400px;
display:flex;
flex-direction:column;
}
.content{
flex:1;
overflow:auto;
}
<div class="container">
<h1 class="header">header</h1>
<div class="content">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>
I would like to conserve the some height for two dynamic table.
I know that the solution is by using javascipt(
document.getElementById('bloc2').style.height = document.getElementById('bloc1').clientHeight ).
Can we find other solution with the using of HTML and CSS?
First of all, please make an effort with your language skills (if you're not good at English, verify it), and use the styling tools of StackOverflow.
All the information is here, check it out. And as an answer I'd first advise not to use <table> if not really needed !
<div id="container">
<div id="block_1" class="foo">
<!-- Your HTML/text content -->
</div>
<div id="block_2" class="foo">
<!-- Your HTML/text content -->
</div>
</div>
And for CSS (the values are examples, use yours) :
#container {
width: 100%;
/* The height will be minimum 350px, depending on the content */
min-height: 350px;
/* I often use flexbox properties, it does really well the job */
display: flex;
flex-flow: row nowrap;
justify-content: center; // Default value
}
.foo {
width: 50%;
/* this value will make your 2 blocks the same height according to their container */
height: inherit;
}
Check the Flexbox properties (there are many), it can ease your work.
Pretty common question, and typically revolves around a current situation, so after reading up on a bunch of different solutions and trying to slide them in I thought I'd just ask the age old question myself based on my situation.
Situation
I've built a little page slider using jQuery, and it appears to work as expected, then I noticed the CSS height was still set to a default value I had used for testing. After removing it I can't seem to get the height of the parent to open to the height of the different children. I know that setting the position of the different divs to relative instead of absolute will display them, but then the divs aren't positioned correctly anymore (situated underneath each other). Other solutions I've found revolve around not using markup that is even remotely common to my own.
Question
Is there a CSS fix for this that allows me to leverage Bootstrap the way I have it set up, and the jQuery animation I've already written? Or is their any suggestion(s) that will make this work without too much alteration to the markup? I've tried a couple different variations and this seems to be the most stable.
Code
I've added it to a jsFiddle. I couldn't get the animation to work in the fiddle for some reason (works on my laptop in all browsers), but the default layout should be enough to see how the parent doesn't respect the child elements.
<style>
.container {
margin-top: 50px;
}
.row {
margin-bottom: 20px;
}
.windowBox {
overflow: hidden;
}
.box {
background-color: #FFF;
position: absolute;
width: 100%;
}
.page1 {
top: 0;
left: 0;
opacity: 1;
z-index: 999; /* set to be over page2 onload */
}
.page2 {
top: 0;
left: 0;
opacity: 0;
z-index: 99; /* set to be under page1 onload */
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-12">Header text should be above either page.</div>
</div>
<div class="row">
<div class="text-center">
<button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button>
<button type="button" id="showPage2" class="btn btn-primary">Page 2</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 windowBox">
<div class="row">
<div class="box page1">
<div class="hidden-xs col-sm-6">...</div>
<div class="col-sm-6">...</div>
</div>
<div class="box page2">
<div class="col-sm-12">...</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Footer text should be under either page.</div>
</div>
</div>
DEMO
Added an .over class to your markup.
Thats the only change made there.
css
Over class is the container of the windowBox.
We want this to have a hidden overflow because it will contain all our pages side by side.
.over {
overflow: hidden;
}
This is a fixed value unfortunately. Basically its the width of your window X pages. If your going to add more then just one page, you can set this value in JavaScript.
.windowBox {
width: 220vw;
}
Then we simply set the container to be a "kind of" fixed width.
responsive width.. so 95 of view port width is reasonable.
.box {
background-color: #FFF;
width: 95vw;
display: inline-block;
float: left;
}
And in the JavaScript instead of setting the left property you set the margin-left.
You only need to do this for the first element so. If you want to scroll to page 4 you can set the first pages margin to -4 * 95vw
I am trying to use z-index on some elements in a page. Basically, I have a contact form with a waiter and a response box. The contact form is used on the page in a different place and is working fine ...
Send button is pressed, overlay-1 covers the form, ajax response triggers a thank-you box that covers overlay-1
Now this all works fine for the form that is positioned relatively on the page. However, I have the exact same form that pops up on-top of everything but my z-indexes aren't being honoured even though the form uses the same classes.
Can anyone give me any pointers ?
Alex
HTML:
<div id="popuporderform" class="orderform">
<!-- .resultBox injected here -->
<form method="post">
<input name="name" type="text" />
<input class="send" type="submit" value="Send" />
</form>
</div>
<!-- .orderspinner injected here -->
CSS:
/* -- ORDER FORM -- */
div.orderform {
width: 220px;
background-color: #fff;
height: 300px;
}
// This ID is for the pop up version of the form and is not used in the
// form that is within the layout of the page
#popuporderform {
position: absolute;
top: 100px;
left: 100px;
z-index: 200;
}
// this is the overlay with spinner in it -- this DOES overlay the form
.orderspinner {
position: absolute;
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
z-index: 250;
background: #fff;
}
// This is the thank-you box - it should appear over the .orderspinner (but isn't)
.resultBox {
display: block;
width: 150px;
height: 100px;
background-color: #fff;
position: absolute;
z-index: 300;
border: 1px red solid;
color: #000;
}
FIXED:
I injected the overlay into the div rather than outside it therefore putting it into the same z-index context.
HTML:
<div id="popuporderform" class="orderform">
<!-- .orderspinner injected here -->
<!-- .resultBox injected here -->
<form method="post">
<input name="name" type="text" />
<input class="send" type="submit" value="Send" />
</form>
</div>
I had trouble with this a while back. My problem turned out to be connected to stacking context, basically when you have an element with a z-index it starts a new stacking context in within it meaning that the z-index of elements within will not be compared with z-index of elements out side.
What adds to the complexity of things is that IE 6-7 (I don't know about 8) starts a new stacking context when elements are positioned (absolute, relative).
so i would check the elements of your popup down to the root and try and give them a high z index and see if that fixes it. with a bit of trial and error you can probably find the problem.
Does the code that's supposed to be in the background use z-index? Have you tried changing the z-index to ridiculously large values to see if it's competing with some other component?
Hard to think of much else blindly.