We Keep Coding

How to change html in a animation that is animate by scroll?

<div class="avator">
<div class="content"></div>
</div>
with my scroll to the bottom it will change the div to:
<div class="avator">
<img src="/image/avator.png" />
</div>
with the scroll the alpha changes. and if I stop scroll the change will stop.
how to to it?

let's say we have a div like this in your example
<div class="avator">
<img src="/image/avator.png" />
</div>
then let's add to .avator img a property opacity: 0;
css
.avator img { opacity: 0; }
now let's calculate opacity value based on % of page scrolled and asign it to .avator img (I prefer using jQuery so here is an example in jQuery)
$(window).on('scroll', function(){
let windowScroll = $(window).scrollTop();
let docHeight = $(document).height();
let windowHeight = $(window).height();
let scrollFromTop = (windowScroll / (docHeight - windowHeight))
$('.avator img').css({
'opacity': scrollFromTop
})
})
this will updated opacity of .avator img every time user will use scroll
Ofc you can replace img with div and make div appear like that

Change z-index of div 2 once div 1 becomes sticky

On this page http://www.younity.co.nz/testScrolling.html I need to change the z-index of the second navigation menu that appears from behind the video container so that it has a higher z-index and blocks out the grey 'Y' graphic once the initial menu has scrolled off the page. Hope that makes sense. So I need to test that the initial nav menu has started to leave the top of browser or it has left.
This is housing menu 1
<div class="nav-wrap-height">
<div class="nav-wrap-box">
menu
</div>
</div>
When it scrolls to the top '.nav-wrap-height' becomes sticky
.nav-wrap-height{
float:left;
width:100%;
position:relative;
z-index: 100;
position: sticky;
top: 0;
}
What I want to do is change the z-index of the second menu (.nav-wrap-box#showNow) once .nav-wrap-height has become sticky
<div class="cntrl-nav-2" id="showNow">
<div class="nav-wrap-box">
menu
</div>
</div>
.cntrl-nav-2{z-index:10;}
I'm trying the below but not getting any result.
<script>
var distance = $('.nav-wrap-height').offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$('.cntrl-nav-2').css({
z-index:'300'
});
}
});
</script>
Any assistance with this problem would be really most helpful.
Cheers
Grant

You are using the wrong selector
$('.nav-wrap-box.showNow')
when it should be
$('.nav-wrap-box#showNow')

This is what I was after. I was writing the z-index part wrong.
var distance = $('.nav-wrap-height').offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$('.cntrl-nav-2').css('z-index', 200);
}
else{
$('.cntrl-nav-2').css('z-index', 10);
}
});

How to select element after 400px height of parent div using jquery?

I have main div(parent) with class .box and in which more than one (no limit)child div with class .abc,
so how can we only select those child div which are occur after 400px height of parent div.
Means,no all child div are select but only select those are after 400px height of parent div.
though,parent div height is not fix.
<div class="box">
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
.......Unlimited div occure
</div>

One suggestion is to add a class name to them by taking their .position().top:
$('.box').find('.abc').addClass(function(){
return $(this).position().top >== 400 ? "pick" : "";
});
var picks = $('.box').find('.abc.pick'); // gives you all the divs whose
// position top is >= 400px

You can use position() to detect top position of an element depending on its parent.
$(".box .abc").each(function(){
var topPos = $(this).position().top;
if(topPos>400){
$(this).addClass("masked")
}
});
Please see this Fiddle

Checking if innerHTML exceeds width or height of parent

I have a parent div with a fixed width and a fixed height.
The contents how ever might exceed this, so I am wondering is there a way in Javascript to calculate if the content exceeds the fixed dimensions?
An example would be like this:
<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">
A sentence that exceeds the width!
</div>
In the above case it does exceed the width. How would this be achieved in Javascript?

make a parent for your content:
<div style="width:20px;height:20px;overflow-x:hidden;overflow-y:hidden;">
<div id="parent">
A sentence that exceeds the width!
</div>
</div>
now you can get width and height of the parent and compare it with your main div:
var h = document.getElementById("parent").offsetHeight;
var w = document.getElementById("parent").offsetWidth;

You can use DOM properties of the div and text nodes. If you can wrap the text in a <span> element, it seems like it will be easier to work with the dimension properties.
html
<div id="container">
<span>A sentence that exceeds the width!</span>
</div>
css
div {
width:50px;
overflow:hidden;
white-space: nowrap;
}
js
var cont = document.getElementById('container');
var spn = cont.getElementsByTagName('span')[0];
//alert(cont.clientWidth);
//alert(spn.offsetWidth);
if(spn.offsetWidth > cont.clientWidth) {
alert("content exceeds width of parent div");
}
http://jsfiddle.net/Bn2Uc/2/

Resize based on page/screen height

My page is divided into left and right divs, the right div has a border left partitioning the two. if the height of the right box is bigger then left, it works fine. However if the left box height is more, then the border is only halfway.
How can i resize the height of the right box based on the height of entire screen so that the border runs all the way to the end.

You can provide height to your right div like, place a id ( like rightDiv ) there if not (in jQuery).
$('#rightDiv').height($(window).height());
if you want to height of your entire document use:
$('#rightDiv').height($(document).height());
$(window).height() will retrun available browser window height.
$(document).height() will retrun document height.
or you can make a comparison:
var doc = $(document);
var win = $(window);
var maxHeight = doc.height() > win.height() ? doc.height() : win.height() ;
$('#rightDiv').height(maxHeight);
You have min-height, for animate height you can try:
$('#rightDiv').animate( { height : maxHeight}, <duration>);
<duration> is optional, you can provide here 'slow', 'fast', miliseconds

Another solution would be this pure CSS one: http://jsfiddle.net/zgMv5/
You put around the left and the right div another <div> and use it as CSS table row. Then the 2 containing <div> will be the same height.
<div id="outer">
<div id="left">This is some text.</div>
<div id="right">This is some text.</div>
</div>
The corresponding CSS would look like this:
div#outer {
display:table-row; }
div#outer > div {
display:table-cell; }
div#left {
border-right:1px solid red; }
I am not sure about the compatibility with old browsers...