We Keep Coding

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');
});

Infinite Scrollable Div with Ajax loaded Content?

I want to implement a technique called scrollable div in GWT. What I am trying to do is the following.
If a user is on my page he can only see the viewport (green box in the image). All DOM elements that are in this viewport are visible to the user on page load. Alle DOM elements that are not on the viewport have not been loaded after a page has been loaded on page load (blue boxes in the image).
If the user drag and move the viewport, all dom elements become visible which come onto the viewport. If they are on the viewport they will be loaded via ajax.
The user can zoom in and out the viewport to make it bigger and smaller. Also, if elements that are invisible to the user and thus not loaded yet become visible, than they have to be loaded via ajax and displayed on the viewport.
How do I have to implement this with GWT?
If the user loads the page it looks like the following image:
The user can drag and move the viewport to 8 directions. These are top, top right, right, right bottom, bottom, bottom left, left and top left. The following image shows a movement to the left.
When the viewport moves new content should be loaded with ajax.
The viewport can also be zoomed in. In this case also new content should be loaded.
The viewport can also be zoomed out. Note that the viewport must be of fixed dimensions. Only the content should be zoomable.

UPD:
jsfiddle EXAMPLE: http://jsfiddle.net/hv57s/9/
UPD:
jsfiddle with zoom in/out buttons an functionality: http://jsfiddle.net/hv57s/11/
Answer based on this example: Indira.js Inifinite Scroll
<div id="scrollableDiv" data-scroll-callback="$('#load_button').trigger('click')">
<table>
...
<tbody id="scrollable_tbody">
<tr>
...
</tr>
</tbody>
<button id="load_button" onclick="load_more(page_number)">Show more</button>
</div>
<script>
var scroll_el_id = 'scrollableDiv';
var element = $('#scrollableDiv');
$(window).unbind('scroll.' + scroll_el_id).bind('scroll.' + scroll_el_id, function(event){
var scrollBottom = $(window).scrollTop() + $(window).height();
var elementBottom = element[0].scrollHeight + element.offset().top;
if(scrollBottom >= elementBottom){
eval($(element).attr('data-scroll-callback'));
$(window).unbind('scroll.' + scroll_el_id);
}
});
</script>
Next you just append to #scrollable_tbody AJAX-response, like:
function load_more(page){
$.ajax({type: "GET", url: 'some/url/load_more.php?page='+page,})
.done(function( html ) {
$('#scrollable_tbody').append(html);
});
}
UPD:
I think you should set big size for html,body like:
html, body{
min-width: 8192px;
width: 8192px;
min-height: 8192px;
height: 8192px;
}
And set viewport in size you want.
But maybe it will more easier if you will set some wrap div right after body tag with
div.wrap{
overflow: scroll;
-webkit-overflow-scrolling: touch;
/*Do not forget to change your_viewport_* to actual size, also you can do this via jQuery on the fly*/
max-height: your_viewport_height;
min-height:your_viewport_height;
height:your_viewport_height;
max-width: your_viewport_width;
min-height:your_viewport_width;
height:your_viewport_width;
}
and inside of this element Bigger div which will be scrollable.
div.huge{
min-width: 8192px;
width: 8192px;
min-height: 8192px;
height: 8192px;
}
HTML:
<html>
<head>
...
</head>
<body>
<div class="wrap">
<div class="huge">
...
</div>
</div>
</body>
</html>
Also do not forget to set scrolling control for all sides of elements, in example I have only Bottom line control, something like:
var scrollBottom = $(window).scrollTop() + $(window).height();
var elementBottom = element[0].scrollHeight + element.offset().top;
var scrollTop = $(window).scrollTop();
var elementTop = element.offset().top;
var scrollRight = $(window).scrollLeft() + $(window).width();
var elementRight = element[0].scrollWidth - element.offset().left;
var scrollLeft = $(window).scrollLeft();
var elementLeft = element.offset().left;
if(scrollBottom >= elementBottom && scrollTop <= elementTop && scrollRight >= elementRight && scrollLeft <= elementLeft){
eval($(element).attr('data-scroll-callback'));
$(window).unbind('scroll.' + scroll_el_id);
}
I didn't test this, and anyways you will have to play around with this. Hope I'm point you into right direction.

Change margin-top position of an fixed positioned element after reaching the bottom of the page?

I need to change top-margin of an fixed div element from margin-top: 200px to margin top 0px after reaching the bottom of the page (or 200px from bottom) using vertical scrollbar.
And toggle return back if scrolling back to the top.
I guess some javascript/jQuery code code do that.
my html/layout code:
<div id="header" style="position: fixed; margin-top: 0px;">
Header content
</div>
<div id="main">
<div id="left" style="position: fixed; margin-top: 200px;">Google Ads here</div>
<div id="right">Content posts here</div>
</div>
<div id="footer">
Footer content
</div>
EDIT: Here are some images to make my question more clear.
normal state when you load the page:
problem when you scroll down, and the google ads column is in conflict with footer:
how it needs to be solved:

Derfder...
Voila, my proposed solution:
http://jsfiddle.net/YL7Jc/2/
The animation's a tad jerky, but I think it does what you want
(It's my take on an earlier s/o post:
Can I keep a DIV always on the screen, but not always in a fixed position? )
Let me know what you think!

Try below code which binds an event to window.scroll to check if the page hits the bottom (bottom in 200px) and moves the #left to top (margin-top: 0)..
DEMO: http://jsfiddle.net/6Q6XY/4/ ( added some demo code to see when it hits the bottom.)
$(function() {
var $left = $('#left');
$(window).bind('scroll', function() {
if (($(document).height()
- (window.pageYOffset + window.innerHeight)) < 200) {
$left.css('marginTop', 0);
} else {
$left.css('marginTop', 200);
}
});
});
Reference: https://stackoverflow.com/a/6148937/297641

You need to implement the window scroll function, this is a jquery implementation so please ensure you include the latest jquery libaries
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
//if it hits bottom
$('#left').css("margin-top", "0px");
}
else {
$('#left').css("margin-top", "200px");
}
});

HTML
<div id="main" style="width: 960px; margin: 0px auto;">
<div id="left" style="position: fixed; top: 200px; left: 0px; background: #000; width: 100%; color: #fff;">Google Ads here</div>
<div id="right"></div>
</div>
JAVASCRIPT
<script type="text/javascript">
$(function() {
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var left = $('#left');
var leftTopPosition = $('#left').css('top');
leftTopPosition = parseInt(leftTopPosition.substring(0, leftTopPosition.length-2));
$(window).scroll(function(){
var pageOffsetY = window.pageYOffset;
if((documentHeight - pageOffsetY - windowHeight) <= 200 && leftTopPosition == 200) {
left.stop().animate({
'top': '0px'
});
leftTopPosition = 0;
}
else if((documentHeight - pageOffsetY - windowHeight) > 200 && leftTopPosition == 0) {
left.stop().animate({
'top': '200px'
});
leftTopPosition = 200;
}
});
});
</script>

Hi Firstly you should have been more clearer in the first place before marking people down, as everyone give similar answers then it shows the question was not clear.
See Js Fiddle for a potential fix, please tweak as you need it with the pixels etc

for this problem you should use z-index in css

Try somethins like this
if ($(window).scrollTop() == $(document).height() - $(window).height())
{
document.getElementById(yourid).setAttribute("style","margin-top:0px");
}

Try this:
$(window).bind('scroll', function(){
if(($(window).height()-$(window).scrollTop())<200)
{
$('#left').css('margin-top',$(window).scrollTop());
}
else
{
$('#left').css('margin-top',200);
}
});

jQuery to stick the footer to the bottom of the page

I've spent ages trying to use CSS to stick my footer to the bottom of my page, and have just about given up.
What I want is for the footer to have no extra CSS properties assigned if the height of the viewport is less than the height of the HTML document.
If the document height is less than the window height, I want the following CSS assigned to div#thefooter:
position: fixed;
bottom: 0px;
margin-left: -5px;
So here's my JS code. It does nothing, and the console log shows nothing.
$(document).ready(function(){
$(window).bind("load", function(){ putFooter(); });
$(window).resize(function(){ putFooter(); });
function putFooter(){
var wh = $(window).height();
var dh = $(document).height();
if(dh < wh) {
$("#thefooter").css({"position": "fixed", "bottom": "0px", "margin-left": "-5px"});
}
}
});
EDIT: and here's what my HTML looks like:
<div id="allexceptfooter">
<div id="themenu">...</div>
<div id="actualcontent">...</div>
</div>
<div id="thefooter">...</div>
If you want to see the whole thing my website is duncannz .com

Check this out, no javascript needed at all...
http://www.cssstickyfooter.com

OK I've got it. Not with CSS - I've already spent ages trying with that.
But I have the jQuery working. The problem was that $(document).height(); was returning the height of the viewport, since I use body{ height: 100%; } in my CSS. The answer was to use this HTML:
<body>
<div id="everything">
...
</div>
</body>
and use $("#everything").height(); instead of $(document).height();. Still requires JS unfortunately, but better than nothing. No CSS solution worked for me.
EDIT AGAIN: Here's the again-updated code:
$(document).ready(function(){
function putFooter(){
var wh = $(window).height();
var dh = $("#everything").height();
if(dh < wh - 104) { /*104: #thefooter height in px*/
$("#thefooter").addClass("footerissticky");
}
else {
$("#thefooter").removeClass("footerissticky");
}
}
putFooter();
$(window).bind("load", function(){ putFooter(); });
$(window).resize(function(){ putFooter(); });
});
and the CSS:
.footerissticky{
position: fixed;
bottom: 0px;
width: 870px;
}

You can avoid Javascript at all using this technique:
http://ryanfait.com/sticky-footer/

JQuery has added data-position="fixed" to solve this. Answered in - jQuery Mobile: Stick footer to bottom of page

Detecting div height on resize

I am trying to detect the height of a div that I am loading content into. This div does not have a specified height, as I am loading pages into it and they themselves fill up the div in different amounts. I think the code I am using is not working.
The #content div is getting the correct height on document load, however I cannot get the height when the load event is clicked.
html:
<div id="select">
<div id="menu">
<ul>
<li><a class="load" href="javascript:void(0)" id="p1">P1</a></li>
<li><a class="load" href="javascript:void(0)" id="p2">P2</a></li>
</ul>
</div>
<div id="spacer"></div>
<div id="content"></div>
css:
#content {
left: 227px;
top: 20px;
width: 703px;
padding: 0 0 100px 0;
position: absolute;
}
#spacer {
border-right: 2px solid #000000;
left: 10px;
position: absolute;
top: 710px;
width: 215px;
}
my jquery:
$(document).ready(function() {
//Load Initial Content
$("#content").html('<ul><li>Loading Content...</li></ul>')
.load("/content/" + "projects.php", null, function() {
contentHeight = $("#content").height();
selectHeight = $("#select").height();
$("#content").height(contentHeight);
$("#select").height(selectHeight);
$("#spacer").height((contentHeight - selectHeight - 40) + "px")
.css({"top": selectHeight + 40 + "px" });
});
//Load content on click function
$(".load").click(function(){
loadName = $(this).attr("id");
$("#content").html('<ul><li>Loading Content...</li></ul>')
.load("/content/" + loadName + ".php", null, function(){
contentHeight = $("#content").height();
selectHeight = $("#select").height();
$("#spacer").height(0);
if(selectHeight > contentHeight) {
$("#spacer").css({"display": "none"});
}else{
$("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" })
.height((contentHeight - selectHeight - 40) + "px");
return false;
}
});
});
});
I am getting this in firebug on load:
<div id="select" style="height: 689px;"/>
<div id="spacer" style="height: 5461px; top: 729px;"/>
<div id="content" style="height: 6190px;"/>
Now if I click on say P2, the div with content height stays the same, even though the actual content inside the div is only 625px tall; so it is not getting switched.

Unless JQuery is being super clever (and it is clever but I don't think its this clever) you aren't getting a resize event because firefox (and probably Safari) only support the resize event on the window object. IE does support the resize event on elements such as a DIV.
Hence you need a different approach:-
$(document).ready(function()
{
$("#content").html('<ul><li>Loading Content...</li></ul>')
.load("/content/" + "projects.php", null, function()
{
window.setTimeout(content_loaded, 0);
});
function content_loaded()
{
$("#content").css({"height": $("#content").height() + "px"});
}
$("#spacer").css({"height": $("#content").height() + "px"});
$(".load").click(function()
{
loadName = $(this).attr("id");
$("#content").html('<ul><li>Loading Content...</li></ul>')
.load("/content/" + loadName + ".php", null, function()
{
window.setTimeout(content_loaded, 0); });
});
$("#spacer").css({"height": $("#content").height + "px"});
});
});
Note I use the setTimeout method here because IE often lags when sorting out width and height parameters when content has changed. By using setTimeout it lets IE sort things out before the height and width properties are accessed. You could choose to remove it and pass content_loaded directly as the callback parameter to the load method.

//Get Content size after load
$("#content").bind("resize", function(){
$("#content").css({"height": $("#content").height()});
});
you're not adding the "px" to the end of the height value
//Get Content size after load
$("#content").bind("resize", function(){
$("#content").css({"height": $("#content").height() + "px"});
});
EDIT follows
got it working locally, you were missing parenthesis at the end of the height function in the click event:
$("#spacer").css({"height": $("#content").height() + "px"}); //added parenthesis enables the #spacer div to change height accordingly
hope this helps

I like to use offsetheight to detect height when one is not set.