I have put a mootools Spinner (from the More library) on my website. The spinner sits in the body of my webpage, and appears when the user does a search (which uses ajax). The spinner graphic appears at the center of the body element - so, halfway down the page. This doesn't look good if the page is longer than one screen.
I initialize the spinner like this:
loadingSpinner = new Spinner(document.body,{message:"Fetching results..."});
For now, I'm just using the default css, like this:
.spinner {
position: absolute;
opacity: 0.9;
filter: alpha(opacity=90);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
z-index: 999;
background: #fff;
}
.spinner-msg {
text-align: center;
font-weight: bold;
}
.spinner-img {
background: url(img/spinner.gif) no-repeat;
width: 24px;
height: 24px;
margin: 0 auto;
}
.spinner-msg and spinner-img (which I want to center) both sit inside .spinner-content, so I tried doing this in this css:
.spinner-content {
position:fixed;
top:50%;
left:50%;
}
But it didn't do anything. I confirmed the the .spinner-content element was correctly receiving that css, so I assume the spinner internally uses some javascript to position the spinner instead.
How do I get the spinner to appear in the center of the screen?
Try this:
loadingSpinner = new Spinner(
document.body,
{message:"Fetching results...",
containerPosition: {relativeTo: document.body, position: 'center'}
}
);
Related
I am trying to do a very simple quiz like this one:
https://www.sitepoint.com/simple-javascript-quiz/
I tried to make it more responsive and added this line:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
It worked fine but when I add a long text on the alternatives of each question, the button "Next Question" stay behind the text, only on mobile (iphone 6, safari).
I tried to add a z-index: 1000; and nothing changed:
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
z-index:1000;
}
So, there's a few things wrong here. As said above you need to remove the height from .quiz-container and remove the absolute positioning from .slide.
What I would suggest is that you add display: none; to slide then your active style to display:block - this will correctly display the button where it should be. With that said, you will lose the fade effect. You'd need to add this CSS to get it back. Hope this helps!
.quiz-container {
position: relative;
margin-top: 40px;
}
.slide {
width: 100%;
opacity: 0;
display: none;
}
.active-slide {
opacity: 1;
display: block;
}
You set position: absolute to your quizz questions, so they will ignore the space of every element you set in HTML.
A large z-index will only put an element above another, that's the why you see the quizz questions above the button.
The problem will be solved if you increment the height of quiz-container on mobile screen (try use #media screen).
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I recomend you to find another way to put your questions at the top of page instead using position: absolute
The problem really is that your quiz-container div has a fixed height of 200px, and you can't make it fluid because your slides have position:absolute, which removes them from the flow and prevents the parent growing in height accordingly.
So you need to re-think how to go about this.
An interesting approach would be to use flexbox, controlling which slide to show with the order property.
.quiz-container {
margin-top: 40px;
overflow: hidden;
}
#quiz{
display: flex;
}
.slide {
opacity: 0;
transition: opacity 0.5s;
/*gives each slide 100% width and prevents it from growing or shrinking*/
flex: 0 0 100%;
}
.active-slide {
opacity: 1;
/*sets the order to -1, so it's positioned before all other flex-items*/
order: -1;
}
Hi there, I've downloaded LeanModal, but whenever I show the modal, it seems the overlay is applying to even the modal itself.
I assumed it was a z-index fix, but it seems that (when looking in chrome dev tools) that the z-index is being applied after the fact by leanmodal, and the CSS is ignored.
#lean_overlay {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
height:100%;
width: 100%;
background: #000;
display: none;
}
// can't get it to sit above the overlay
#popup {
z-index: 150; // it looks like it's being overwritten in dev tools
width: 600px;
padding: 30px;
display: none;
background: #FFF;
}
$("#i").leanModal();
Anyone else run into this?
Thanks
EDIT: Here's a Youtube video that illustrates my problem:
http://youtu.be/OguwjZR_GdU
On my website Black Star Opal I've been trying to implement a sticky menu, much like this one Dansk Kids. I looked at the Dansk Kids website javascript and CSS: there seems to be no javascript involved in their menu (other than the removal of the logo underneath their sticky menu when they scroll). I want my sticky menu to be as smooth as theirs if possible (ie staying flush with the url bar as it pops in and out).
Here's my css for #carttrans, the menu div:
position: fixed;
-webkit-backface-visibility: hidden;
height: 49px;
top: 0px;
left: 0px;
background-color: rgb(255, 255, 255);
width: 100% !important;
z-index: 10000;
text-align: center;
margin-left: 0px;
padding-left: 7px;
border: 1px solid rgb(221, 221, 221);
border-left: none;
border-right: none;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: rgb(221,221,221) !important;
-webkit-transform: translateZ(0);
I also use this js code (only because the menu wouldn't display on iOS Safari without it, although I'm unsure why):
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#carttrans').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if ($(window).width() < 500)
{
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#carttrans').css({ 'position': 'fixed' });
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
I even removed all the elements in the menu and just left the blank white bar there to see if it would do the same thing. It popped in and out awkardly just like before.
Any help with this would be amazing.
EDIT: As I said below, it's the URL bar popping in and out that seems to be disturbing my sticky menus. It could possibly be a repaint issue or slow down, because on other sites the disappearance of the url bar and the subsequent movement of the menu (for example, on sticky menu demos) is quite smooth and I'm doing/have tested them with the same url bar popping.
Cheers,
Rob
HTML
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery (remember to include the jquery library)
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
CSS:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
transition: all 0.4s ease;
}
REFERENCES:
http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
PREVIOUS SAME QUESTION ON STACK OVERFLOW:
CSS Sticky header
I used firebug for firefox and just added the following to your #carttrans ID i am assuming you only want this to stick? If so check the css below replace your #carttrans with the below and lemme know if that is what you want?
#carttrans {
background: none repeat scroll 0 0 white;
position: fixed;
text-align: right;
top: 40px;
z-index: 999;
}
Hi i looked at your youtube clip and i see that it could be that the jquery you are using is affecting your main div for the top section #carttrans make sure on this div that your css is marked as important for the top 0px !important so that the jquery won't be able to change it have a try and see if this works?
I want my page to be displayed in full without the need (or ability) to scroll down. I want to have a footer that will display at the bottom of the screen. I've found so many answers on here and Google that will probably work, but I am a noob and can't make too much sense of them or how to apply the information to my code.
here is my STYLE code:
<style>
#font-face {
font-family: 'gooddogregular';
src: url(GoodDog.otf)
}
html {
text-align: center;
font-family: sans-serif;
}
body {
width: 100%;
height: 50%;
margin: 0 auto 0 auto;
text-align: left;
background-image: url("border.png");
background-repeat: no-repeat;
background-size:cover;
}
header {
width: 100%;
display: table;
}
nav {
width: 950px;
border: 2px;
}
article {
width: 700px;
display: table;
font-family: gooddogregular;
}
h1 {
font-family: gooddogregular;
font-size: 50px;
}
</style>
My body tag is just a body tag, nothing added to it or anything. Essentially I want the page to not scroll, and all content just rest in the middle (or middle left and middle right).
Maybe a better question would be how do I position elements such as footer, images, articles etc with precision? Anyway to use coordinates that are not based on pixel, such as percent?
I tried adding height: to my body style, but no matter what I set the height, it has zero effect.
If you want nothing to happen when you scroll, position the elements with fixed positions like this:
position: fixed;
bottom: 0px;
left: 10%;
When you scroll, fixed position elements do not move.
To disable scrolling altogether, use this CSS:
body, html {
height:100%;
}
body {
overflow:hidden;
}
I have lots of ASP.NET Pages and server database connection.They takes some time to load fully when requested from server to client. Now I want to show a angular-loading-bar until page loads.. It is working fine. But i want to disable the page at the time loading page. Please see this link which i used for
anulgar-loading-bar example link
Please help me.
Thanks in advance.
I am a huge fan of angular-loading-bar.
No overlay by default, but you can easily tweak the loading-bar with this bit of CSS;
#loading-bar {
pointer-events: all;
z-index: 99999;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: wait;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
}
Here is a demo.
I actually wrote a block ui module for angular a few days back that does this trick. It should work hand in hand with that nice looking loading bar.
I am not sure if I understand your question 100%. Can't you just overlay a div (may be gray - to show it's disable), and display the loading bar/gif?
Overlaying a div would be quite simple and you can find many resources like,
How to overlay one div over another div
overlay a div over another one with css
Here is my solution based on solution by #andrew above and using ngProgress Bar component.
CSS:
#ngProgress-container.block-editing {
pointer-events: all;
z-index: 99999;
border: none;
/* margin: 0px; */
padding: 0px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: wait;
position: fixed;
background-color: rgba(0, 0, 0, 0.33);
margin-top:10px;
#ngProgress {
margin-top:-9px;
width:5px; /* Force display progress as early as possible */
opacity:1; /* Force display progress as early as possible */
}
}
JS - in the beginning:
$scope.progressbar = ngProgressFactory.createInstance();
//To force display of progress bar as early as possible
$scope.progressbar.setParent(document.getElementsByTagName("BODY")[0]);
$scope.progressbar.set(1);
$scope.progressbar.getDomElement().addClass('block-editing');
$scope.stopProgressbar = $timeout(function(){
$scope.progressbar.setParent(document.getElementsByTagName("BODY")[0]);
},10);
$timeout(function(){
$scope.progressbar.start();
},100);
JS - in the end:
//Stop progress bar
$interval.cancel($scope.stopProgressbar);
$timeout(function(){
//JIRA: NE-2984 - un-block editing when page loading is done
$($scope.progressbar.getDomElement()).fadeOut(2000, function() {
$($scope.progressbar.getDomElement()).removeClass('block-editing');
});
$scope.progressbar.complete();
}, 3000);