We Keep Coding

Wrap content around Element on right, then Responsively above when exceeding min-width

I am trying to wrap text around an image that is positioned on the right and have the image shifted below the text when the screen becomes too small.
With these additional requirements:
The Text component has a minimum width for it's content next to the column (say 300px), which when exceeded pushes the image below the text.
The image component's size is unknown.
Images will be rendered at their native size, which may determine whether it is rendered to the right of the text or below it.
The same rules must apply when printing
Example
What have I tried?
https://codepen.io/CrocoDillon/pen/kmGCw (flawed as the image size is not pre-determined)
My current solution is a combination of various approaches. It's dirty/hacky as it uses JS to achieve part of it's goals which end up failing the print requirement.
It works as follows:
In html, render the IMAGE after the TEXT and floating the IMAGE to the right so that image is on right with text wrapped around it.
In JS, on window resize, if windowWidth - imageWidth > 300px (our min content width), update the style of the container to use flex-direction column-reverse so that the image appears below the text.
It fails the Print Requirement as the min-width check happens on window resize based on widths within window. Ideally it should now be based on the widths within the paper size/layout.
It is as follows:
HTML:
<div class="article-template-1">
<div class="article-content" ng-style="articleContentResponsiveStyle">
<div class="main-image-holder">
<div ng-repeat="imageLink in images">
<img ng-attr-src="{{imageLink.Location}}"
ng-attr-title="{{imageLink.Description}}" />
</div>
</div>
<span model="Article.Content" bind-html-compile>{{Article.Content}}</span>
</div>
</div>
CSS:
#newsArticle .article-content-holder .article-template-1 .article-content .main-image-holder {
float: right;
display: flex;
width: fit-content;
flex-direction: column;
}
#newsArticle .article-content-holder .article-template-1 .article-content .main-image-holder img {
max-width: 100%;
width: fit-content;
}
Controller:
var appWindow = angular.element(this.$window);
appWindow.bind("resize", this.updateArticleResponsiveStyle);
private exceedsMinContent:boolean = null;
private updateArticleResponsiveStyle = () => {
// The minimum size that inline content needs to be before images are repositioned
const minArticleWidth = 300;
let windowWidth = window.innerWidth;
let maxImageContainerWidth = windowWidth - minArticleWidth;
let imageContainerWidth = angular.element(document.getElementsByClassName('main-image-holder'))[0].getBoundingClientRect().width;
const previouslyExceedsMinContent = this.exceedsMinContent;
this.exceedsMinContent = imageContainerWidth > maxImageContainerWidth;
if (previouslyExceedsMinContent !== this.exceedsMinContent) {
this.$scope.articleContentResponsiveStyle =
this.exceedsMinContent ?
{
"display": "flex",
"flex-direction": "column-reverse"
} :
{
"display": "block"
}
this.$scope.$apply();
}
}
Yes, I find this incomplete solution hacky and would prefer a pure CSS approach if possible.

Having an image fill a container after transform(90deg)

I would like to have an image rotate and fill the container after it's been loaded. The issue I'm having is the height is automatically set when loaded and then not resetting after rotation. Here is a JSFiddle of the issue:
$('.load').on("click", function () {
var image = $('.image');
image.attr("src", "https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg");
image.addClass('rotate-image');
});
.image {
max-width: 100%;
max-height: 100%;
}
.rotate-image {
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-container" style="background:black; height:100px; width: 200px; text-align:center">
<img class="image" src="" />
</div>
<br />
<button class="load">Load</button>

This requires the max-width and max-height styles to be removed, though.
To fit the image, it has to be made larger so that it width (height, when rotated) becomes as big as the container's height. However, it's rotated only visually and the browser doesn't care about that because transform doesn't change the flow of the website. For it, there is an "unrotated" picture whose height is now bigger than its container. Visually rotating the image doesn't change anything. For that purpose, the image needs to be pulled up with a number of pixels equal to how much its bigger than the parent. Those pixels are divided by two because the image overflows at the bottom only.
Play with the fiddle to see what I mean.
$('.load').on("click", function() {
var image = $('.image');
image.attr("src", "https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg");
image.addClass('rotate-image');
var parentHeight = image.parent().height();
image.css("width", parentHeight + "px");
image.css("position", "relative");
image.css("bottom", ((image.height() - parentHeight) / 2) + "px");
});
.rotate-image {
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-container" style="background:black; height:100px; width: 200px; text-align:center">
<img class="image" src="" />
</div>
<br />
<button class="load">Load</button>
Edit: Beware, if you load the image from an external source by setting its src and immediately rotate it, image.height() might return 0 and the image might be displaced. Then, if you click again, its height is now correct and it gets placed right.
I'm not absolutely sure, but I think that's because when you load the image, the browser needs to download it first, meaning that you don't yet know what its dimensions are.
To see that in action, paste some image URLs from Google in the fiddle I provided.

You need to do this by javascript or jquery. Your goal is:
.Rotated_Img ...
width = 100 % of parent height
height = 100 % of parent width
And i do not think css has any think for this, until the parent width and height have related to view port vw and vh.
jquery:
$('.Rotated_Img').each(function(){
$(this).css('width', $(this).parent().height() + 'px');
$(this).css('height', $(this).parent().width() + 'px');
});

Change adjust the height in bxSlider

I'm trying to change the bxslider height adjustment for percentage rather than pixel, but I'm a bit lost about it.
I found in the code line that makes this adjustment:
slider.viewport.css('height', getViewportHeight());
and here, set the viewport height
slider.viewport.height(getViewportHeight());
accurate results in css percentage because used responsive layout
thanks.

When I was encountering problems with bxSlider's height being cutoff at loading, I wrote a quick patch that basically removes the height property and attribute of .bx-viewport which allowed my CSS rule to override the height to whatever I wanted. That script is the last block. I commented it out because you may not need it.
I didn't know if you wanted a carousel of multiple slides or whether you wanted it to slide horizontally or vertically since the demo wasn't functioning. So I made it a 1 slide vertical carousel.
I enabled adaptiveHeight to show you it's dynamic capabilities with height, by default bxSlider just stays at the size of the tallest slide.
All of these features are options and as they are options that makes them optional...optionally.
There's 2 styles included but disabled. The first one is used if you want to use that height fix script. The second rule id to move the control arrows to the top. If you like the slider in vertical mode then you'll most likely want have your arrow controls at the top. If set at the default position in the middle, it'll jump every time there's a change in height.
Fiddle
Snippet
$(document).ready(function() {
var bx = $('.bxslider').bxSlider({
mode: 'vertical',
adaptiveHeight: true,
adaptiveHeightSpeed: 750,
slideWidth: 400,
minSlides: 1,
maxSlides: 1,
moveSlides: 1
});
});
/*
document.documentElement.addEventListener('DOMContentLoaded', function(event) {
event.stopPropagation();
var tgt = document.querySelector('.bx-viewport');
//tgt.removeProperty('height');
//tgt.removeAttribute('height');
//tgt.setAttribute('height', '100%');
}, false);
*/
img {
display: block;
margin: 0 auto
}
/*
.bx-viewport {
height:90vh !important;
}
*/
/*
.bx-controls a {
top:.05% !important;
}
*/
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div>
<iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video1"></iframe>
</div>
<div>
<img src="http://placehold.it/350x666?text=350x666.png" id="image2">
</div>
<div>
<iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video3"></iframe>
</div>
<div>
<img src="http://placehold.it/350x350?text=350x350.png" id="image4">
</div>
</div>

Fit image into a container, even when src is changed

I'm sure there are other post that address this in various ways.
I've been struggling with this a bit, trying to do CSS only approach with no luck. Playing around with css width and height, doing a mix of 100% and auto on the image got me nowhere.
Given html:
<div class="container">
<img src="http://image" />
</div>
And css:
.container { width: 500px; height: 400px; }
How to fit images of various sizes into the container while preserving aspect ratio and obeying constraints of the container?

I believe you are far over-thinking this.
Try adding the following CSS, and removing the javascript:
.container img {
max-width: 100%;
max-height: 100%;
}
Here's a demo (click the images to dynamically load a different size)

I ended up with javascript solution - I know, not ideal but it's the best I could come up with that does what I need it to. The page where I'm using this relies on javascript to perform other bits of functionality so that's not a problem in my scenario. I'm also loading images into a Bootstrap grid layout column, like so:
<div class="row">
<div class="col-md-6">
<div class="main-image">
<img src="http://initialimage" />
</div>
</div>
<div class="col-md-6">
Some content here ...
</div>
</div>
The width of the container in this case is controlled by bootstrap layout css so I only need to set the height of the container:
.main-image { height: 400px; }
I tried with using just
.main-image { max-height: 400px; }
So that the container would adjust to horizontally stretched images but then jQuery gets the container height wrong.
Anyway, here's the javascript I'm using:
var imageLoaded = function () {
var container = $(this).parent();
var maxWidth = container.width();
var maxHeight = container.height();
var width = $(this).width();
var height = $(this).height();
var containerRatio = maxWidth / maxHeight;
var ratio = width / height;
if (ratio > containerRatio) {
$(this).attr('width', '100%;');
$(this).attr('height', 'auto');
}
else {
$(this).attr('height', '100%;');
$(this).attr('width', 'auto');
}
};
$(document).ready(function () {
$('.main-image img').bind('load', imageLoaded);
imageLoaded.call($('.main-image img'));
});
You may wonder why the manual invocation of imageLoaded function - it's because in IE, the event doesn't fire for the initially loaded image. Invoking it manually corrects that.
You can then change the image source:
$('.main-image img').attr('src', 'http://otherimage');
And the image will adjust to fit the container by either using up full height for vertical images or full width for horizontal images.
Any better way to do this or comments welcome.

Change or animate height to css default in jquery

I have a responsive website with different height setting for a header bar.
In my javascript at some point, I change this value to a fixed size :
$('#header').animate({marginTop: 0, height:80});
But at another point in my code, I would like this to revert to the original state.
How can I animate it back to the default behavior?
In other words, animating the remove inline css...
I tried
$('#header').animate({marginTop: 20, height:'inherit'});
but this doesn't work.
The original css is this :
#header { margin-top:20px; width:100%; height: 80px; background-color: #000; }
#media only screen and (min-width: 768px) and (max-width: 960px)
{
#header{height:100px;}
}
#media only screen and (max-width: 767px)
{
#header{height:auto; padding-bottom: 1px;}
}
Failed solution 1:
storing the height value:
This cannot be done because a lot of users are resizing their window between the moment where the value would be stored and the moment of restoring the stored value..
Failed solution 2:
animating to 'nothing', juste an empty string, fails, Jquery interprets this as 0 and animates the height to zero pixels.

You could use like this:
var original = $('#header').css('height');//gets original height
$('#header').animate({marginTop: 0, height:80});
Then revert use this:
$('#header').animate({marginTop: 0, height:original});

Considering you have HTML like below
<div class="item">
<div class="block"></div>
<div class="info">
My info
</div>
</div>
You can do something like this:
jQuery(document).ready(function($) {
$(".item").mouseleave(function(){
$(this).find('.info').stop().css('marginTop', '0');
}).mouseenter(function(){
$(this).find('.info').animate({ marginTop: '-50px', opacity: 0.5 }, 1000);
});
});
Demo

Try without height value or leave there just empty value height: ' '

You'll have to store the original value somewhere. I recommend this -
$('#header').data('height', $(this).height()).animate({marginTop: 0, height:80});
Then when you are ready to revert -
var oldHeight = $('#header').data('height');
$('#header').animate({marginTop: 20, height: oldHeight });
EDIT --
Do you have any other inline styles for the div?
If not, you can simply use removeAttr and remove the style property.