On this site (Chrome is ok) I'm trying to implement Fluidbox ... a beautiful, minimal lightbox (jQuery) with a clever imageloading trick.
CSS:
.fluidbox {
outline: none;
}
#fluidbox-overlay {
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 500;
}
.fluidbox-wrap {
background-position: center center;
background-size: cover;
margin: 0 auto;
position: relative;
z-index: 400;
transition: all .25s ease-in-out;
}
.fluidbox-opened .fluidbox-wrap {
z-index: 600;
}
.fluidbox-ghost {
background-size: cover;
background-position: center center;
position: absolute;
transition: all .25s ease-in-out;
}
One way or another it seems that the z-index(es) doesn't put the lightbox (image) on top of everything. It looks as if the enlargement is 'captured' in it's own HTML ... !?
Some help is highly appreciated.
++++
Partly solved ... the CSS of the menu (ScrollIt.js) was interferring (z-index) with the CSS of Fluidbox. Now Fluidbox is working and is on top of every element except the fixed menu. That's a pity ... and I don't know how to solve that. I will ask the devs.
Fluidbox author here.
According to the docs, you can either (1) alter the stackIndex setting of Fluidbox so it is greater than that of the fixed navigation menu, or (2) reduce the z-index value of the said fixed navigation menu.
v1.4.1 was released yesterday so it probably contains some crucial bug fixed since the version you're using was released.
Related
I am using Bootstrap 4 on my project, and modified the modal style in order to make it fullscreen like you can see it on this css code:
.modal.show {
display:flex!important;
flex-direction:column;
justify-content:center;
align-content:center;
align-items: flex-start;
}
.modal-body {
padding: 0;
margin: 0;
}
.close {
color: #aaa;
position: absolute;
/* background: blue !important; */
border: 0;
top: 0;
z-index: 99999;
right: 3%;
float: none;
opacity: 1;
font-size: 40px;
font-weight: 400;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
.modal-fullscreen {
background: #fff;
min-width: 100%;
margin: 0;
}
#media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
#media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
#media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 100%;
}
}
.modal-dialog {
position:fixed;
padding: 0;
max-width: 100%;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
overflow:auto;
}
When I tried to scroll down the vertical scrollbar of the browser, it won't ! I can use mouse scroll wheel but not by clicking on it directly !
Are you able to detect the problem ? It's for sure the fixed position but it is needed to make it fullscreen.
Here a jsfiddle to see a live demo of the problem:
https://jsfiddle.net/odbjcpt2/1/
I don't want to use position FLEX instead of FIXED since it won't solve the problem on my project, even if in the example given it will works (modal keep ading padding-right to body ... it is fixed using FIXED).
Thank you
In your JSFiddle, the problem appears to be with the div that contains the Lorem Ipsum text. It has pointer-events: auto; inherited from .modal-content class and if you remove that it ends up with pointer-events: none; inherited from modal-dialog class. If you take both those away, the problem goes away.
EDIT
I believe the root of the issue is that you're setting your .modal-dialog class to have fixed position and overflow auto.
Below is from bootstrap doc
Modals use position: fixed, which can sometimes be a bit particular
about its rendering. Whenever possible, place your modal HTML in a
top-level position to avoid potential interference from other
elements. You’ll likely run into issues when nesting a .modal within
another fixed element.
After playing around, if I edit your CSS in your JSFiddle example and in the .modal-dialog class I just remove position:fixed; and overflow:auto;, the problem goes away.
EDIT AGAIN
I just noticed you actually have .modal-dialog defined in your CSS twice, the first time with flex position and second time with fixed. Sounds like that was maybe a copy/paste mistake. Anyhow, still the same root cause I think, because your .modal-dialog div is fixed and it's inside your .modal div, and bootstrap doc says don't put another fixed inside a .modal
Heres an image of the issue I'm trying to resolve. I am working on my portfolio site; and I have images of some of my personal projects, all of them are the same width but some have different heights. Due to getting full page screenshots of my work, some of the images have a much greater height than others. Instead of allowing displaying all the images the same size and allowing scrolling in the modal window, it scales the images down to fit within the same height as all the others. This gives it an odd look cause some of the images get scaled down a lot. I would like to get all the images to display in the same width, and those that need it to allow scrolling to see the rest of the image. I tried to use overflow: scroll; on the .lightbox but that didn't help. I've also tried overflow-y. I would also like to disable the page in the background from being able to scroll, to allow the scrolling to be focused on the images that it is necessary on.
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
min-width: 100%;
height: auto;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
min-height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
Lightbox2 by default appends calculated width & height to the image and .lb-outerContainer. But you can override this by doing the following -
.lb-outerContainer {
width: 100% !important;
height: auto !important;
}
.lightbox .lb-image {
width: 100% !important;
height: auto !important;
}
I don't recommend this because this breaks the intended use of this plugin. I'm sure you'll find an alternative to lightbox2 that achieves what you're looking for. So you can consider this as a temporary fix.
EDIT: Here's a jsfiddle to see it work. https://jsfiddle.net/hsugx6wm/43/
I want to recreate an effect I saw on airforce.com . It's right below the hero, I poked around a bit and can't seen to find out what they did.
It looks like it was developed using knockout but I would like to recreate it using jQuery and Css.
If you know what the effect is called or know of a library that can achieve this, PLEASE let me know thanks!
https://www.airforce.com/
I created a simple mockup of the effect using css only. View fiddle
https://jsfiddle.net/rob_primacy/p6ee9d71/2/
<div class="image-block">
<div class="image"></div>
</div>
.image-block {
position: relative;
width: 300px;
left: 200px;
}
.image {
display: block;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
transition: all ease .3s;
height: 600px;
background: url("http://www.difrusciaphotography.com/wp-content/uploads /2015/08/Place-to-unwind_Lake-Kananaskis-Alberta-Canada.jpg") #000 no-repeat center center;}
.image-block:hover .image {
left: -40px;
right: -40px;
transition: all ease .3s;
}
I have a div with position fixed (my dialog) which i give a higher z-index to takeover my page when a certain action is performed. Am trying to hide my scrollbar by doing overflow:hidden;without affecting the width of the page when the div takes over the page. Any suggestion how this would be performed??
html, body {
background: #FFFFFF;
font-family: "Avenir Medium";
height: 100%;
transition: overflow 0.37s easein-out
}
.div-dialog{
display: none;
opacity: 0;
position: fixed;
width: 0;
left: 0;
top: 0;
z-index: 0;
overflow: hidden;
background: white;
-webkit-transition: opacity 0.30s ease-in-out;
transition: opacity 0.30s easein-out;
}
Jfiddle trying to replicate my result.The implementation am trying to realize is that of myspace when you click the search icon at the top left
Was finally able to fix my problem, by doing the following
html,body{
height: 100%;
overflow: hidden;
}
body{
overflow: auto;
}
By doing this all my content stays within the body, so when an element has a position of fixed, it covers the scrollbar and its not affected by any change to its overflow,overflow:hidden or overflow:auto
I have a box I would like to move around the corners of the window.
For that I'm using a jQuery attr function on click which takes the box to said corner by altering the class.
The problem here is that I can't get the div to transition between locations on click. My first guess is that the added classes have the coordinates written with top, bottom, left, right tags whereas the original box's css does not contain such parameters. Thing is that if I add the params, the transition sure works, but the box doesn't go where I'd wish it to go. Play around with the pen and you'll see what I'm talking about.
Here's the css of elements:
#menu {
position: absolute;
background: #c5;
width: 160px;
height: 160px;
-webkit-transition: all 2s; // Chrome
-moz-transition: all 2s; // Mozilla
-o-transition: all 2s; // Opera
transition: all 2s;
overflow: hidden;
border-radius: 50%;
}
.topleft {
top: 0 ;
left: 0;
}
.topright {
top: 0;
right: 0;
}
.bottomleft {
bottom: 0 #I;
left: 0 #I;
}
.bottomright {
bottom: 0 #I;
right: 0 #I;
}
.link {
width: 80px;
height: 80px;
float: left;
}
The jQuery is a simple, on click add alter this or that class
$("#m1").click(function(){
menu.attr('class', 'bottomright');
}); //this times four
You for more details check
THE PEN
It's been 5 hours of trying different things out, and now I'm out of ideas. So if anyone has a better clue on how to get this to work, it would be gladly appreciated.
ps. Google didn't help
The trick is to transition on the same values- you can't transition left to right, but you can left to left. Then the only thing fighting you is LESS's compilation of Calc() calls.
Only included the interesting parts here, rest are on the codepen.
http://codepen.io/anon/pen/OMWeqY
#menu_w: 160px;
#menu_h: 160px;
#menu {
position: absolute;
top: 0;
left: 0;
width: #menu_w;
height: #menu_h;
transition: all 2s;
}
#menu.topleft {
top: 0;
left: 0;
}
#menu.topright {
top: 0;
left: ~"Calc(100% - " #menu_w ~")";
}
#menu.bottomleft {
top: ~"Calc(100% - " #menu_h ~")";
left: 0;
}
#menu.bottomright {
top: ~"Calc(100% - " #menu_h ~")";
left: ~"Calc(100% - " #menu_w ~")";
}
Don't mind the random /**/ on the codepen, that's vestigial from when I was freaking out over Calc() not working as expected (never really dealt with LESS before). Really not sure why LESS would interpret Calc(100% - 160px) as what it interprets it as, but then, I'm not the designer of LESS.
Not sure why the other two comments did it via margins and a ton of jQ mucking. Something something jQ shoehorning obsession. I'd suggest de-marrying this from jQ as well, but I don't know if anything else on the page uses it, and jQ's pretty lock-in once you start.