Magnific popup - How can I fit inline content vertically? - javascript

I'm using magnific popup to display hidden inline content on click. this content has images inside, which have different sizes. Some of those images wont fit vertically in the viewport. Magnific popup has an option to fit content vertically to the viewport verticalFit: true. But it seems that this option works for image galleries only and not for inline content.
Here is a
fiddle of that problem.
I need the entire popup to fit vertically in to the viewport, even if the image is bigger. there must be a max-width in pixels, but this is working so far.
There's a CSS in which max-height can be changed but I think magnific popup creates a lot container with heights which are depending on each other. Maybe I have overlooked something and its not a big thing. But now, after doing research and finding nothing, I am running out of ideas.

It appears that the container heights for the magnific popup are all just set in CSS, and they all appear to just be 100% as far as I can see – and more importantly, I don't see the JavaScript setting any inline heights or widths – so that makes your life easy.
We can just set the max-height on the image as you guessed, and have an automatic width. We can use vh (viewheight) units to set the maximum height of the image relative to the viewport height.
.image img {
display: block;
height: 100%;
width: auto;
max-height: calc(100vh - 66px);
}
The precise calc value of 66px in the calc expression comes from the height of the description div (.descr), plus 4 pixels top and bottom border on the description, plus 4 more pixels top and bottom border on the image's immediate parent div (.image). That's 50px for the description div + 16 total pixels of border width.
You can make that amount smaller if you want; I believe 100vh - 66px is as big as you can get without needing to scroll at all, at least with the styles given in your fiddle.
You may also want to add some styles to make sure the image is centered in the container in the case of real tall images like this example, but I'll leave that up to you.
Updated fiddle.

Related

Center div vertically or affix to top of window if height is too great

I have a popup that's centered on my page using the following syntax:
position:absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%,-38%); //well, slightly lower than center...
This works very well - unless the height of my popup is greater than the height of my current window. It doesn't happen often, but when it does, I can scroll DOWN to see the additional content, but I cannot scroll UP any further than the top of the window to see what's above, like in this example:
I want to say vertically center, but if the height of the div would cause the top of it to not be displayed, just affix the div to the top of the window instead
What code would I add into this to achieve that?
This is similar to another post on SO:
How to center an element vertically in css in a scrollable container
I'm not looking to center the item with a flex container however. I actually cannot use flex in this instance, because the div is a result of a javascript plugin and I can't add a separate parent div outside of this without a LOT of work. I am looking to center UNLESS the height of the div is too great - then i want it to affix itself to the top of the window.
If I could place some sort of div above this popup div that has a height of 1px and force the popup div never to go higher than it, that would be fine as well. I have a very specific reason for why I want the div at the TOP of the window when it's very long - I don't want it centered 100% of the time (which is what the other post does.)
I've also tried using a pseudo-element like so:
.popUpBody::before {
content: " ";
height:50px; //this needs to be dynamic based on the height of the parent
width:100%px;
display:block;
}
as it moves the rest of the div down - but I'd need to find some way to use a dynamic height - it might be 300px, or it might be 5000px. This also doesn't seem like a very good way to do this.
I could make it so the height of popup div is always centered by taking out the second transform variable: transform: translate(-50%); - and this would be a last resort, but I would really like for the div to affix to the top of the window when its height is larger than the window itself - if this is possible.
Javascript/Jquery is fine if I need to use that to add dynamics.

Fullwidth image slider

My page has a 1000px container for the header(above the red box in below image) and the content(below the red box in the image attached). Those containers are fixed width. But I need to setup a image slider that will be displaying the images in full width.
I mean, I will be including a much wider image. Say, 1800x200 px. So, if the user's screen resolution(width) is less than or equal to 1000px, then the middle portion of the image would be displayed and the image slider should be 1000x200 px in size(resized). But if say the user's screen resolution is 1300(width), then the image slider should be resized displaying the center portion of the image and the slider container would be of size 1300x200 px in size!
Since there are lots of jQuery plugins already available, I thought of not to reinvent the wheel. So tried many jquery sliders. But none of them seems to be meeting my above needs. Or am I missing some settings in those sliders that I tried?
Any suggestions?
Maybe add an extra outer container? Then center the 1000px container within the outer one.
Then when you resize the window the image slider will respond to the outer container and the inner container stays centered.
outerContainer {
width: 100%;
.....
}
innerContainer {
width: 1000px;
margin: auto; /*or left:50% right:50%*/
}
you have to wrap all div in .wraaper div and define width 100%.
.wrapper{width:100%;}
and in inner div you have to define section using an
.inner(width: 1000px;)
where you need 100% slider dont use this .inner class.
this is help for you.

Slideshow to fill Div

I posted a this question last night, but have completely rewritten it because I think it was confusing people, and I also have provided an example to illustrate my problem....
I have a slideshow that I would like to fill a div completely. Right now, if someone visits my site from a narrow browser viewport, the slideshow will only fill the width but not the entire height, therefore leaving space at the bottom of the div.
I would like the slideshow to proportionally scale to fit and cover the entire div, even if cropping from the sides is necessary. Does this make sense what I am asking?
Here's the example: If you visit it right now from a wide or full screen browser window, the images probably fill the entire div. But if you narrow your window and refresh, you will see the bg color at the bottom of the div. Example: http://mudchallenger.com/a-responsivef.html
How can I get this slideshow to fill the div?
Thank you!!
**I should also add, I'm NOT trying to make this fill the screen as a background. I just want it to fill the div.
You need to set the height of the image to 100% and let the width be automatic. This is because the images are of landscape orientation. Then, make sure you have the overflow (maybe just overflow-x) attribute of div.slideshow set to hidden. This will allow the image to scale to the div (the frame) rather than to itself. Here is an example: http://jsfiddle.net/krh121791/rXep9/.
HTML
<div class="slideshow" style="position: relative;">
<img src="http://mudchallenger.com/a-images/backgrounds/bg-1.png" />
</div>
CSS
.slideshow{
height:100%;
width:600px;
overflow:hidden;
}
.slideshow img{
height:100%;
}
A note, you would set the width to 100% and overflow-y to hidden if you have a portrait picture.

How can I enable scroll-bar only when window is resized smaller?

One page website.
Header at the top with anchor links
To different divs (sections) on the page.
Say my screen resolution is 1280*800 and each div section is max 800 and the content on each div section is visible when my browser is maximum size. I forgot to mention that scrolling is disabled so the other divs are only visible (scrolled automatically) using the anchor links at the top. So heres the problem, when I resize my browser, say for example theres only 450px worth of height on my browser, I can only see that amount of content on the screen and cannot scroll until the bottom of the div, so it hits the bottom of my browser.
Another point to understand is that all the elements in the div itself are not overflowing the height of the div so a simple overflow does not work because the issue is to do with the size of the browsers' height.
In essence when the browser window is anything less than 800px, the div is then covered up at the bottom by the amount reduced by the browser. I want the whole div (NOT THE CONTENT INSIDE IT) to be pushed up (top position) as far as it needs to so that the bottom of the div i.e. 800th pixel touches the bottom of the browser.
Any solution?
You can listen to changes in the window size and adjust the size of your divs to it. This way the div will always have the size of the window, so if it gets too small its overflow will show.
$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
$("div").css("height", $(window).height());
});​​​​
Working example at jsFiddle. Remember to set the div's overflow to auto, so they will show when the screen gets too small.
Update: from what I could understand in your update, your requirements can be satisfied with simple CSS. Let the html, body overflow at will, but set the "container" div's overflow to hidden (so it will only scroll one page at a time) and its height to 800px. When the browser window is resized to less than 800 px, the body's scroll bars will appear, letting you scroll the container div up and down. Both the container and the contentes will remain the same size: 800px.
html,body {
overflow: auto;
}
.container, .contents {
height: 800px;
overflow: hidden;
}
Working example at jsFiddle. Is that what you need? If you literally want to push the container div up until its bottom is aligned to the window, try setting padding-top or margin-top instead of top (though in this case I don't know how the scrolling will work).
Use media queries:
#media screen and (max-height: 450px) {
body { overflow: auto; } /* Or change the height or whatever */
}
I think the best solution to set min-height of main wrap 800px, else you have to add overflow hidden for your main content. Scrolling can be triggered by setting main content top position, but it must be absolute or similar. You cat write a function witch helps you to move main content changing it's top position.

Responsive Galleria

I'm trying to use this plugin Galleria in its responsive mode, which basically means it will re draw itself based on its container size as the window re-sizes. The demo on the link I've provided shows a really good example. You can see that, as you resize your window, the whole gallery adjusts accordingly. Now my issue is, the plugin won't let me initialize the gallery unless a height has been specified for the DOM element that is used as its container. This means, I've had to write a whole lot of javascript code to respond window resizes - it destroys the point of it having a responsive mode quite a bit - but in the website above, nowhere can I find an explicit height specified. Can someone explain to me where I'm going wrong?
I figured it out by myself. Posting my answer -
When initializing the gallery - specify your height in percentages - as below. I'm guessing it takes 50% of window height as its value in this case. This way, you don't need to explicitly specify heights anywhere and it works as advertised
Galleria.run('#gallery', {responsive:true, height:0.5, debug:false});
Galleria needs a height to initialise correctly. You can do this either via CSS or JS.
If you would like it to fill the width and height of the screen, I would recommend setting a width and height of 100% via CSS. And its parent container needs to be 100%. See below.
**JS:**
Galleria.run('#galleria', {
responsive:true,
showCounter:true,
thumbnails:false,
trueFullscreen:true,
});
**CSS:**
#galleria{
width:100%;
height: 100%;
position: fixed;
z-index: 9999;
top:0px;
bottom: 0px;
}
body,html{
height:100%;
width:100%;
}
The height option ( if it's < 2.0) is relative to the width of the container. So height:0.5 would have a height that is half the width of the container (w=2, h=1).
height:1.5 would result in (w=2, h=3)
To keep it responsive you can use max-width rather than width when styling the container.
If the height option is set to 2.0 or more, it is interpreted as pixels. So height:2.0 will only be 2px tall.

Categories

Resources