I use a Bootstrap Modal, to show bigger version of thumbnails in a photo gallery.
The default behavior of Bootstrap is to place the bootstrap at the top of the viewport, which usually is quite alright. But in this case, people are using the gallery in an iframe. Because of this, I want the modal dialog appears in the same height as the top of the gallery div.
I've tried positioning the modal dialog with CSS (top: 123px) but since the content above the gallery is constantly changing, this won't work. I would love to position the modal relative to the gallery with all the images.
EDIT: The link to the code is: http://bit.ly/1JCpZ9a
Just do as you mentioned! Position it relative :-)
#myModal {
top:0;
position: relative;
}
Just make sure that the modal markup immediately follows the gallery. The content after the gallery is going to jump down when the dialog appears - but I'm hoping that you don't have content (you mentioned it was an iframe)
Otherwise you'll need to have a wrapper div wrapping this extra content and position the modal absolutely w.r.t that wrapper div.
Related
I am building a Google Chrome extension and one of the features it does is generate a full page length screenshot by snapping a screenshot image of the viewport then scrolling down the page and repeating the process until it has an image of the whole page length and stitches them together as 1 image using HTML5 Canvas.
Page elements that are position: fixed get changed to position: absolute so that it doesn't show the fixed element in each viewport image in the final image repeated over and over!
Now I have a page for example that gives a new challenge.
https://docs.hhvm.com/hhvm/installation/linux#ubuntu-15.10-wily-werewolf
Based on the image below...
1) the top header bar is fixed so it changes to position: absolute
2) the main page right scrollbar scrolls the main right content panel down the page.
3) the left sidebar has a separate scrollbar for it's DIV.
When my extension makes a screenshot on this page, it ends up repeating the left sidebar contents over and over all the way down the page since the right scrollbar goes much furthor down the page.
I think the solution is to somehow detect and make the left sidebar in these cases be positioned so that it does not have a scrollbar and instead will show all the left sidebar content as the right content DIV is scrolled down.
I am just not sure about how to do that left sidebar part at the moment, any suggestions? I would need to detect this situation on other pages automatically as well!
CSS overflow is what you are looking for, I guess.
Try setting overflow: visible to that sidebar. Now the "auto" value is likely to stand there.
What about detecting... You can check the scrollHeight of the element and get its height, for instance sidebar.scrollHeight > sidebar.offsetHeight. If it's true, it means it is scrollable.
I am using a fixed overlay div on my page to show additional content when the user clicks on a certain button.
The trouble with this is that on iOS, the content behind tends to scroll rather than the overlay div.
The only effective solution I have found to this is to use jQuery to alter the class of and toggle its position to fixed (and overflow: hidden) whenever the overlay div is selected to appear (and then back again on closing the overlay). E.g.
$(document).ready(function(){
$("#filter-btn, .close-filter").click(function(){
$("body").toggleClass("fix");
});
});
Whilst this works, it also causes the content within the body itself to move up to the top of the page when changing to 'fixed' to the top which is monentarily visible whilst the fixed overlay div fades in.
Is there anyway I can prevent this from happening?
This can generally be solved by setting body height to 100% and overflow:hidden within the css rule for class applied to the body
I am trying to prevent my page from moving when i open a modal which is caused from the scrollbar. Originally the page would keep moving several pixels to the left and not move back each time i opened a new modal. I had to apply this css to solve that problem:
padding-right:0px !important;
margin-right:0px !important;
But now even though the page shifts back, when either the login modal or register modal is open and you press 'Sign up here', or 'Sign in here' from the loginmodal or registermodal, the scrollbar hides and then reappears which shifts the page before moving back to its original position. I experimented briefly and added overflow:scroll to the element, i didn't like the idea of the two scroll bars when the page is below a certain resolution.
So my question is:
How do i stop the scrollbar from hiding and reappearing when opening a modal when another model is already open which causes the page to shift left then back to its original position.
Here is my JSFiddle:
https://jsfiddle.net/w07dx8jk/
EDIT:
Would it be possible to have a blank scrollbar visible when a modal is open to stop it from disappearing which causes the shifting or is there a better method?
Usually, you simply leave the scrollbar visible, so it won't flicker:
html {overflow-y: scroll;}
You need to apply overflow-y: scroll !important to body to prevent the page move, !important is required because Bootstrap applies some of its own CSS to body and you need to override them.
And then apply overflow: hidden to .modal to prevent the double scrollbars.
Demo: https://jsfiddle.net/alan0xd7/w07dx8jk/1/
I'm attempting to expand and transition a button into a modal that's 60% of the height and width of the window when it is clicked. Here's a CodePen of my work so far: http://codepen.io/anon/pen/WbNONa. The problem I'm having is that the position property can't be transitioned. Both the button and the modal (which is underneath the button) are absolutely positioned inside the button wrapper to make both elements look like one element. When the button is clicked, the modal should expand to a fixed position on top of the overlay.
The issue is that the positioning immediately changes from absolute to fixed, so the modal just looks like it's contracting from the full window size. If you delete the position: fixed property on the #btn-content.active class, you can see what I'm essentially trying to do. How can I emulate the transition of the position property? If that's not possible, how can I have the modal transition to a height and width that are relative to the size of the window? Thank you kindly for your time.
I am using a Jquery lightbox popup type to display data over a page onclick.
Pretty basic: when the popup is not used, its hidden, then visible when a link is clicked.
Problem is when the data is the popup is very long, it stretches the page even when hidden, leaving a bunch of blank space at the bottom of my page.
How do I get hidden popup to not stretch out my page?
you can solve it with css:
set hight and width and then set overflow:hidden or scroll or auto
or
set display:none
and with jquery you can hide your element: $(element).hide()