We Keep Coding

Javascript focusing a large div with fixed header

I'm using a tiny library called '$.scrollTo' to animate a scroll to a div element in my html. at the top of my page I have a fixed navgation bar.
at the end of the animation, I would like to have that div focused (for accessibility). if my div is to large, at the end of the animation, the fact that it gets focus - simply sends it a bit off the screen.
This does not happen with small divs.
here is my code (check jsfiddle below):
$('#buttonid').on("click", function() {
//fixed nav bar height (to compensate when scrolling)
var fixed_navbar_height = $("#navbar-id").height();
//the element to scroll to
var $go_to_selector = $("#topic2");
$.scrollTo($go_to_selector, {
duration: 1000,
offset: -fixed_navbar_height,
onAfter: function() {
//if you comment out this .focus it works as intended.
$go_to_selector.focus();
}
});
});
here is a JSFIDDLE example:
https://jsfiddle.net/dy35obpq/3/
obviously the onAfter messes it up, but i would like both the animation and the focus. Any ideas on how to implement a focus on a large div without letting it change the scroll bar ? suggestions are more than welcome.

Try this.
onAfter: function() {
$go_to_selector.focus();
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
}
I have simply added this line in your onAfter callback.
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
and it seems to have fixed the problem while still retaining focus. You might want to use css to disable the focus blue highlight.

Choosing Parent Height With white-space:nowrap

So I have these DIVs which I have arranged to slide left an right inside of the parent.
See the following JSFiddle to see the design:
http://jsfiddle.net/StevP/C9WL7/
You can see that by adjusting the margin-left of the first child DIV by multiples of -100%, it's rather simple to correctly horizontally position the DIVs inside the parent. Therefore, it's very easy to animate.
Now, this brings me to my issue. I'm using jQuery to move them left and right. It works great. However, I'd like to choose which child the parent gets its height from.
I know, I can just add...
$('#parent').height($('.child:eq()').outerHeight());
...Which is what I have it currently doing. However, the contents of the children are likely to change causing them to resize (by animate) and, therefore, be cut off. So, having a set height isn't a possibility.
I need to use height:auto; on the parent and somehow cause it to ignore the heights of specific children. I can't for the life of me think of a way.
I don't want to use a timer and onresize/.resize() don't seem to work with my Chrome.

You could use jQuery to monitor the DOM subtree and adjust the height of your parent div in the callback like this:
$('.content').bind('DOMSubtreeModified', function(e) {
if (e.target.innerHTML.length > 0) {
$(".parent").height($(".content").height());
}
});
Here's a working jsfiddle: http://jsfiddle.net/9386d/
And a question explaining the dom subtree: jQuery watch for domElement changes?
jQuery docs for bind(): http://api.jquery.com/bind/

Well... To be perfectly honest I'm not really a huge fan of jQuery anymore so I feel bad offering this answer. It just feels so frik'n inefficient, but here is a solution that does three things: 1) it resizes the hight of the container on step and uses a CSS transition attribute for eye candy (works just as well without). 2) it sets the child height of all but the current child to 0 and uses overflow:hidden so they don't affect the flow of the document anymore. 3) it resets these children to automatic height on animation start so they are visible during transition. All I can say is "yuck", but it does work.
CSS
.child{
...
overflow:hidden;
}
jQuery
var animation_prefs = {
duration: 3000,
start: function() {
$('.child').height('auto');
},
step: function(now) {
var current_index = (Math.floor((now + 50) / 100) * -1);
$('#parent').height($('.child:eq(' + current_index + ')').outerHeight());
$('#parent').data('current', current_index);
},
complete: function() {
$('#parent').height('auto');
$('.child:not(:eq('+$('#parent').data('current')+'))').height(0);
}
}
$('.child:eq(0)').animate(
{
marginLeft:'-200%' //~ Move it back 2 children
},
animation_prefs
).animate(
{
marginLeft:'-100%' //~ Move it back 1 child
},
animation_prefs
).animate(
{
marginLeft:'-200%' //~ Move it back 2 children again
},
animation_prefs
);
Demo
http://jsfiddle.net/Gq4xs/show
Source
http://jsfiddle.net/Gq4xs/

Is it possible to animate position of flex items when items are removed/added?

I'm using flexbox to display items in a container- the items snap to their new positions when items are removed/added. Is there anyway to smoothly transition between the states? Transitions between multiple lines is desired and items can be of variable width. I'm using angular JS to add/remove items.
I haven't been able to come up with a working solution. Any ideas?
Plunker here.

I don't know much about angularJS, but you could do this:
http://jsfiddle.net/H9mvd/5/
using transitions. To remove an element, first you'd change the width, margins etc. to 0, and then remove the item on the 'transitionEnd' event:
$(this).css({
'margin-left': '0',
'margin-right': '0',
width: '0'
}).on('transitionend', function(){
$(this).remove();
});
And for adding elements, insert the new element with the style attribute such that width, margins etc. are 0. Then remove these from style so that the element gets transitioned to it's proper size:
container.append('<div style="margin-left:0;margin-right:0;width:0;"></div>');
setTimeout(function(){
// needs placing in a timeout so that
// the CSS change will actually transition
// (CSS changes made right after inserting an
// element into the DOM won't get transitioned)
container.children().last().css({
'margin-left': '',
'margin-right': '',
width: ''
});
},0);
There are 'jumps' in position when adding/removing elements because the flexbox is set with justify-content: space-around;, so adding/removing an element (even one with zero width) will cause the 'space' between elements to be redistributed. I think it'd be fairly tricky to work around this.

yes, it is,
test & try it using animation CSS : http://plnkr.co/edit/VnFTz5VKDJIjFIJ6YBwG?p=preview
div.ng-scope {max-width:15em;overflow:hidden;animation:deploy 2s;}
#keyframes deploy {
from {
max-width:0;
}
to {
max-width:15em;
}
}

jQuery animate on property change

I have I div or some other element which I load content into with:
$('#my_div').load('ajax.php',function(){
//Do random stuff.
}
However the height of the div will then change, causing the page to jump up and down, looking ugly.
Is there a way for it to animate the height when the new content is loaded or changed? I know one can do this with FluidMoveBehavior in C#.
How can I achieve the same effect with Javascript/jQuery?

Here's some Fiddle
When you want to create a height or width animation with jQuery you have to set a number indicating the desired size. I assume that you use height: auto in this case so you have to find a little workarround.
Get the height:
var autoHeight = $("#content").height("auto").height();
Animate to autoHeight:
$("#content").animate({height: autoHeight}, 1000);
And together:
var currentHeight = $("#content").height();
var autoHeight = $("#content").height("auto").height();
$("#content").height(currentHeight);
$("#content").animate({height: autoHeight}, 1000);
Stolen from here

What I do is the opposite. I animate the page to scroll to the top if not already BEFORE I call the load.
So that the top of any new dynamic content is always in view.
I know this isn't the answer you were looking for, but I've found it works best.

You could hide #my_div before the load(), and then slideDown() in the complete function:
$('#my_div').hide().load('ajax.php', function() {
$(this).slideDown();
});
Or, create a temporary element, hide it, append it, use its height to animate #my_div once the load is complete, and then remove it.
$('<span/>').hide().appendTo('body').load('ajax.php', function(text) {
$('#my_div').animate({ height: $(this).height() }, '800').html(text);
$(this).remove();
});

Div width expand/shrink on click

For a site I'm making for myself and a friend, I have a div container/wrapper with 2 other divs within it: one occupies the left half and has a black background and the other occupies the right with a white background. Essentially, this lets me get a split colored background. Each div holds half of a logo. Here's the page, temporarily hosted so you guys can see it.
http://djsbydesign.com/tempsite/index.htm
At any rate, I'd like to have links on the left and right hand sides of the page that, on click, cause their respective divs to expand from 50% to 100%. I have a few ideas, but am not sure entirely how to go about doing this (I'm rather new to javascript). The first would be to have the expanding div's z-index set to something higher than the non-expanding one, and then have it expand (somehow), and the other is to have the expanding div expand to 100% while the other shrinks to 0% at an equal rate.
The bottom line is, I have no idea how to go about doing this. I don't mind using mootools or jQuery, for the record.

The following seems to work:
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
});
Albeit I'm not sure how you'd plan to bring back the the 'other' div.
JS Fiddle demo.
Edited to add a button (via jQuery) that allows both divs to be reverted to original dimensions:
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
});
$('.show').live('click',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
Updated JS Fiddle.
Edited to address the question left by OP in the comments:
is there a way to have a page redirect after the animation completes?
Yep, just add the line window.location.href = "http://path.to.url.com/";
$('#left-bg, #right-bg').click(
function(){
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
window.location.href = "http://www.google.com/" // <-- this line redirects.
});
$('.show').live('click',
function(){
$('#left-bg').animate(
{
'width': '50%'
},600);
$('#right-bg').animate(
{
'width': '50%'
},600);
$(this).remove();
});
Updated JS Fiddle.
Edited in response to bug report (in comments):
The one other bug (easy fix) is that any time you click on either of the divs, it creates a new button. So say you clicked on the left half, and it expanded and filled the page, etc., and then you clicked on it again (it being anywhere on the page now). It would attempt to add a second button.
To prevent a second button being added to the div just add an if:
$('#left-bg, #right-bg').click(
function(){
if (!$('.show').length) {
$(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
$('<button class="show">Show all</button>')
.appendTo('#wrapper');
window.location.href = "http://www.google.com/" // <-- this line redirects.
}
});
Which, will only append a button, or indeed animate the divs, so long as the $('.show') selector returns no matches.
However if you're also redirecting to another page by clicking the button it shouldn't be an issue anyway, since none of the jQuery on the original page will exectute/be able to access the page to which the user is redirected (unless it's a page on your own domain, and you've explicitly chosen to add the same button).

If you give absolute positions to your div's such that - 1st is positioned at top left corner and other is positioned at top right corner. And then in click event you can change the position of the other top corner of the div to be expanded.
You can use jquery to do this easily. Check jquery documentation for setting css.

Looks like you've got jQuery included, so use that! It's totes the easiest library to do simple animations with.
Here's an example click function that will slide the right background to be 100% like you said:
$('a#link').click(function(e) {
e.preventDefault();
$('#left-bg').animate({ width : '0%' }, 'slow');
$('#right-bg').animate({ width : '100%' }, 'slow');
});
Obviously to go in the other direction you'd switch the width values in the object passed to the animate functions.
If you're not familiar with the animate function, check the docs, but basically you just pass CSS rules in a key : value object to it, and it'll change the CSS values over time - animating it!
Hope this helps!