I am trying to do a website with a loading animation. This loading animation shows well above all other divs in Chrome, but not in Firefox.
I have a menu bar, a main div, and a footer.
In the main div, I have a "main box" (will rotate in 3D) and a loading div.
The loading div hosts the animation for loading.
Html is kind of the following:
<div id="site">
<div id="menuDiv" class="mainSection"> Menu bar</div>
<div id="mainDiv" class="mainSection">
<div id="mainBox">
<div class="mainBoxSide front">
</div>
<div class="mainBoxSide right">
</div>
<div class="mainBoxSide back">
</div>
<div class="mainBoxSide left">
</div>
</div>
<div id="loadingDiv">
<div id="loadingBox">
<div class="loadingBoxSide loading-front"></div>
<div class="loadingBoxSide loading-right"></div>
<div class="loadingBoxSide loading-back"></div>
<div class="loadingBoxSide loading-left"></div>
</div>
</div>
</div>
</div>
<div id="footer" class="mainSection">Footer</div>
I want mainDiv to be on top of the footer, and loadingDiv on top of mainBox.
So in term of z-index : footer < mainBox < loadingDiv.
I created a codepen which isolates the problem: https://codepen.io/3MO/pen/vmOMEG
When opened in Chrome, everything works fine.
When opened in Firefox, the animation is flickering: it goes on top and on background of the mainBox element all the time, and I don't know why.
There is worse: if I provide a background color to the loading div, everything works fine: I created another codepen, the exact fork and defined a background color for loadingDiv: https://codepen.io/3MO/pen/XRbQjQ
Can someone know why it behaves like this? I need to work with a transparent div, so without any background color.
Thanks!
Try adding transform: translate3d(0,0,1px); to the div #loadingDiv.
Related
I am using the new Foundation XY-grid on a new project. The site has a max-width of 1000px for the grid-container.
All is well.
But, i now need to make a new component for the site using the Accordion component from Foundation. No problem there either.
The problem, starts when, the background, of the open accordion element, needs to be, another bg-color, than that of the parent element (edge-to-edge).
This would not be a problem, if it was not for the fact, that i needs to fill the entire width of the page - the background color that is.
The content itself, still has a max-width of 1000px.
This is the standard markup:
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="large-12 cell">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
Accordion header
<div class="accordion-content" data-tab-content id="deeplink1">
Accordion content
</div>
</li>
</ul>
</div>
</div>
</div>
The above works as expected, and has the same bg color as the <body> - all is good.
But, there is a variation, of the above, where the background color, differs from the <body> bg-color.
To do this, i simply wrap the grid-container, in a callout, like so
<div class="secondary callout">
<div class="grid-container">
<div class="grid-x grid-margin-x">
<!-- accordion markup -->
</div>
</div>
</div>
This also works as expected.
The problems starts, when i open an accordion item.
The background-color, of the accordion item, needs to have the background-color from the <body> (or at least, not the same as the one from 'secondary callout').
But, how do I achieve this, in the best possible way?
Example: https://codepen.io/anon/pen/WXEMyp
Wanted output:
I need to make a inner div horizontally scrolleable, but using the browser scrollbar and not that particular div's scrollbar.
One option would be making every other div's position as static and overflowing the wrapper div, but since I'm modiyfing a premade template, I would prefer to be able to do this without changing the layout. In that sense, a JavaScript/jQuery plugin would be nice, but totally not a must.
Here is the code:
<title>This is a test</title>
<body>
<header>
This is the header.
</header>
<div id="wrapper">
<div id="left-sidebar">
This is the left sidebar.
</div>
<div id="test">
<div id="content">
This is the main content.
<div id="flex">
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
</div>
</div>
</div>
</div>
<footer>
This is the footer.
</footer>
</body>
Here is the jsFiddle: https://jsfiddle.net/k6e3sv6v/
Thanks bra
I think you cannot focus BROWSER scrollbar into some div it appears if the whole page is wider than 100% width.
But I think it can be done by putting all other elements around that div as fixed position which won't move over the screen even if the scroll was moved left-right...
I have a problem working with Bootstrap and Safari.
I want to place a fixed div relative to it´s parent and it works in all browsers except Safari.
The same problem is explained here:
https://github.com/lionheart/openradar-mirror/issues/147
Now i try to find a good workaround:
Original Code (does not work in Safari)
<div class="row">
<div class="col-md-8 col-md-push-4">
<div class="fixed-div">SOME FIXED CONTENT</div>
CONTENT A
</div>
<div class="col-md-4 col-md-pull-8">
CONTENT B
</div>
</div>
css:
.fixed-div{
position:fixed;
}
this does not work as expected in Safari. The "fixed-div" is not "pushed" like it`s parent. It should be displayed above "CONTENT A".
I found a solution but i think this is not a clean one:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="fixed-div">SOME FIXED CONTENT</div>
</div>
<div class="clearfix"></div>
<div class="col-md-8 col-md-push-4">
CONTENT A
</div>
<div class="col-md-4 col-md-pull-8">
CONTENT B
</div>
</div>
Do you have some better ideas how to fix this?
Try switching to the CSS property from fixed to absolute. If that does not fix your issue you could add custom check before within your HTML to see what browser a user is coming from and load that specific CSS page How to use different CSS for Different Browsers.
I'm having some issues with my CSS on a transform fold out on hover style element. At the moment it folds out too much and I'd like to reduce the height. I've tried several things to no avail. I was able to find the code itself from a demo located here: http://lab.aqro.be/fb_btn_concept.html
I've tried adjusting a lot of the #under div parameters but so far every time I get the hover state the way I want it the transition messes up and doesn't look right. I'm not very familiar with transitions so I'm hoping somebody on here can help? Here is my jsfiddle:
http://jsfiddle.net/HD2pm/
My goal is to have the fold out be around 100px in height instead of the obviously much larger version that it is at currently.
<div class="row">
<div class="span4">
<section id="btn">
<p>Some Text Will Go Here</p>
<div id="under">
<div class="logo"><div class="recto"><i class="fa fa-user"></i>Consumer</div></div>
<div class="top"></div>
<div class="logo verso"></div>
</div>
<div id="shadow"></div>
</section>
</div>
</div>
Looks a lot better with
-webkit-perspective: 550;
http://jsfiddle.net/DrQP2/
there is a strange white line in my screen.
It's possible to see the line in jsfiddle.
http://jsfiddle.net/fWq3c/3/
My real screen image is available here:
http://postimage.org/image/w4jcveyyv/f0779d0b/
The strange thing is that my body is no in all the screen.
In my code, the div #tudo is inside body. But in result, it appears that #tudo expand beyond body.
<body>
<div id="tudo">
<div id="topo_login"></div>
<div id="conteudo_login">
#RenderBody()
</div>
<div class="limpar"></div>
<div id="rodape2"></div>
<div id="rodape"></div>
</div>
</body>
That line appears because the background image http://s15.postimage.org/sjog2gpff/Fundo.png is having a border at the bottom of white color. Change/edit this image and try again.