Develop Reference

Magnific popup - How can I fit inline content vertically?

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.

Full background image initially fixed, then scrolls when DIV content ends

I'm trying to figure out how to have a full background image (background-size: cover) be fixed initially (the text over the image scrolls while the image stays put), but, at the moment when the user scrolls down to the end of the content (like a tall block of text), the background then scrolls up revealing a new section/div below.
For example:
<section id="top-section-with-fixed-bg">
<div class="tall-content-1500px">
<p>Text that's really tall</p>
</div>
</section>
<section id="next-section">
...
</section>
But, again, the background image is fixed until the user has scrolled down 1500px and the content for that section/div is done. At that point, the user continues to scroll and the background image scrolls up.
Not, as with parallax solutions, with the background image being covered by the next section. But the background image going up with the scroll.
I'm thinking this takes some javascript, jQuery fixing, but I'm still a bit novice with it. I'm a designer just wanting a site to look and act this certain way. I'm guessing I have to recognize the height of the content, where that ends, and then either tell the CSS to switch from fixed to scroll (without effecting the position of the image), or having the js move the image up with the scroll action.
Update: Here's a quickly tossed together jsfiddle
UPDATED UPDATE:
I think I've found the solution!
With the pointers provided in responses here, then some digging around, I have it kind of working.
I started with trying to figure out how to detect the window height. I plug that into the text/content DIV, using that value for the DIVs height. This is important, to set the container for the text to the height of the user's window, not to a specific height. Then, I set that DIV to overflow: auto (and hide the scrollbar, for aesthetics). That allowed me to set a trigger so when the end of the content in that DIV is reached, the background-attachment is changed from fixed to scroll.
And, voila! It's not perfect, and I'm sure some real javascript/jQuery experts will right my wrongs on it, but I like how far I've gotten with this so far.
I realize that the swtich from fixed to scroll is probably unnecessary. At the moment, when the switch happens, the image jumps a little to adjust to the window size and its own position, now being set to scroll. If I set the CSS originally to fixed, and make sure the content of the DIV (using padding wisely) to cover the window, as the user scrolls with the mouse the correct action will occur: text scrolls until there is no more text, then the image scrolls up.
Check it out and look forward to help and comments.
jsfiddle

have you set background-attachment:fixed;? This makes background images 'move' with the browser scroll. Be careful when it comes to devices though as this method can cause 'laggy looking sites' because there's too much render for the device (depending on image).
I personally target 'large' and 'modern' browsers with this:
#media query and (max-width:600px){
.top-section-with-fixed-bg{background-attachment:fixed;}
}
EDIT:
sorry I didn't fully understand the question. Here's some CSS to get you going
window.addEventListener('scroll',function(){
//document.body.scrollTop would be the windows scroll position.
if(document.body.scrollTop==1500px)
document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='static';
}else document.getElementById('top-section-with-fixed-bg').style.backgroundAttachment='fixed';
});
I'm very sorry but this is very basic. I'm about to finish work. The function could use a bit of sprucing up a bit like making it dynamic. This is also only native JS. So it's not all that fancy but you get the idea. When the document.body.scrollTop is at the bottom of your element. Which I'm guessing is 1500px tall? IF not use offsetHeight(). That'll give you the complete height of the element including padding and margins and I think borders as well?

I'd set your background images to background-position: fixed; then put the next background image at the bottom of the text so it overlays on top of the first div. Problem is you can't have the nice <section> structure you had going before.
<style type="text/css">
.section-with-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
#bg-1 {
background-image: url("./background-1.jpg");
}
#bg-2 {
background-image: url("./background-2.jpg");
}
#bg-2 {
background-image: url("./background-3.jpg");
}
</style>
...
<body>
<div id="bg-1" class="section-with-fixed-bg">
<p>Text that's really tall</p>
<div id="bg-2" class="section-with-fixed-bg">
<p>Next section of text that's really tall.</p>
<div id="bg-3" class="section-with-fixed-bg">
<p>Next section of text that's really tall.</p>
</div>
</div>
</div>
I haven't tested this but it should cause the new image to overlap the old one, at least in theory.

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.

Overriding img height for responsive design

I have a slight problem in trying to make my website responsive as well as laying out images nicely with packery.
<div id="content"> // <- width of this determined through javascript
<div class="imagecontainer">
<img src="picture" width=500 height=700>
</div>
</div>
css:
.imagecontainer{
max-width:100%;
}
img{
width:100%;
}
I've set the max-width at 100% for my imagecontainers so that they're never larger than the main content div. With the above code, however, the images inside get squashed horizontally as the img's width, but not height is overruled by the imagecontainer's max-width. The simple solution to this problem is of course to remove the height value from the img, but I've just painstakingly ADDED it so that packery won't make a mockery of my layout when it's loading by placing posts on top of each other. Adding height:auto to the img css also ruins the layout (when it's loading, just to be clear).
The best solution I've come up with is to remove the height attribute from the image once it's loaded, but I was wondering if there's maybe an easier css-only solution, or a smarter way of doing it with js?

JavaScript/HTML: How do I display an IMG with a set dimension and if the image is wider or taller than that dimension, to crop/hide the overflow?

I have a bunch of images that are guaranteed to have:
minimum width = 200px
maximum width = 250px
minimum height = 150px
maximum height = 175px
What I want to do is display a consist 200px by 150px rectangle of the image while maintaining scale (no stretching or shrinking).
Which means, I might have some overflow.
How can I display the image so that it keeps porpotions to the original image size, yet displayed inside a 200x150 px window and hiding any overflow?

Wrap them in a container with the dimensions you want and overflow: hidden.

This trick is quite cool and doesnt matter the image size ok look... you can do something like this
<div style="width:Npx; height:Npx; overflow:hidden">
<img src="source.png" style="width:Npx;">
</div>
so how this work, the div will hold the imagen in a rectangle Xpx by Ypx you defined and will "crop" everything that its outside. Then you use the resize who have every browser you can assign a With a imagen and the browser will resize it for you. So if you put the same width that the div holder you will give the impresion that the image fit in that rectangle. This is the best option I can find without use server side code.
the next example is:
you can define again a rectangle and then assign a background, the big problem is the the imagen WILL not resize to fit the area.
<div style="width:Npx; height:Npx; background:url(yourimage.png) center"></div>
hope to help you... best

I made a quick demo (online here) of a way of solving it similar to nahum's second example. There are 3 images within the range of sizes you set. It doesn't resize or stretch the images and they will follow the alignment of the surrounding text.
Hope it helps,
Jedidiah
<span class="thumbnail" style="background-image:url(200_150.jpg);"></span>
<span class="thumbnail" style="background-image:url(220_160.jpg);"></span>
<span class="thumbnail" style="background-image:url(250_175.jpg);"></span>
span.thumbnail{
display:block; display:inline-block;
width:200px; height:150px;
background-position: center center;
background-repeat: no-repeat;
}
Use a span rather than a div because IE6+7 will only let you set display:inline-block on an element that is naturally inline.
The first display:block is a fallback for Firefox 2 which doesn't support inline-block.

If you're images are particularly large, or there are going to be lots of them (for example, a thumbnail browser). You may want to consider creating a pre-cropped copy of them image. This can be done using gd or imagemagick [0] - you can also find a number of wrapper libraries around these extensions that may make the task easier.
[0] http://php.net/manual/en/refs.utilspec.image.php

In theory, this is exactly what the clip property of CSS is for - but there's one, sometimes really painful, side effect to using it, though - the image needs to be absolutely positioned:
<html>
<head>
<style type="text/css">
.thumbnail {
width:200px;
height:150px;
}
.thumbnail img {
position:absolute;
clip:rect(0, 200px, 150px, 0);
}
</style>
</head>
<body>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
<div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
</body>
</html>
The fact that this takes the images out of document flow is pretty nasty - the best you can do is put them inside a frame of the right dimensions (which means you may as well just use the overflow mask methods other people have suggested). Clip is a useful property in the right places, and a lot of people don't seem to know about it.

Just set a min-height:whatever and max-height:whatever and overflow:hidden on the blocks, then just place the images in the block, and that's it.