We Keep Coding

parallax.js + js fadein/out = no joy after first <li>

I am using parallax.js to animate a series of elements on a homepage. I searched for code that would allow me to add a simple "slider" effect to the elements as well.
Everything seems to be working properly, except that after the first li, the parallax effect only works horizontally. On li #1, the element hovers as expected, following the mouse in every direction.
Here's a link to jsfiddle: http://jsfiddle.net/sdeviva/t6uwq/1/
Here's a link to the revised jsfiddle: http://jsfiddle.net/sdeviva/t6uwq/5/
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
var scene = document.getElementById('scene2');
var parallax = new Parallax(scene2);
(function($) {
$.fn.ezslide = function ( options ) {
var defaults = {
fadeIn : 1000,
fadeOut : 1000,
delay : 500
},
settings = $.extend( defaults, options ),
$this = this,
cur = 0,
fadeIt = function( which ) {
var li = $this.find('li');
cur = which = (which >= li.length) ? 0 : which;
li.fadeOut( settings.fadeOut );
li.eq( which )
.delay( settings.fadeOut )
.fadeIn( settings.fadeIn, function(){
setTimeout(function() {
cur++;
fadeIt( cur );
}, settings.delay);
});
};
fadeIt( cur );
};
$('ul.scene').ezslide({
fadeIn : 600,
fadeOut : 600,
delay : 3000
});
})(jQuery);
EDIT: I sort of fixed this. I don't really know what I'm doing, so there's probably a cleaner way. But, I realized that the parallax effect was only being applied once to the first list item. The script that makes each item fade in wasn't getting the benefit of the parallax.js script.
SO - I put each fading element into its own ul, with a unique id, and a shared class. By some miracle, this actually works. But let me know if there's a better way.

This is an interesting one. The issue is that the parallax code sets the very first layer to position: relative and all others to position: absolute. This has the effect of making the parent ul have the dimensions of only the first layer. This is normally fine, except that when you display any element other than the first, the first is hidden. This causes the ul to have 0 height. The parallax depends on the height of the scene, as a result no height means no vertical movement.
You can fix the issue by applying a fixed height to your ul:
#scene{
height: 128px;
}
http://jsfiddle.net/t6uwq/7/
You can find greater detail on the motion calculation in the documentation on github.

Custom slide out div jQuery script

I am having a few more issues with a script. I am trying to achieve a responsive slide out div script for a "meet the team" page. The way I see it working is that when the persons image is clicked, it slides out their bio. I am running into a few issues though.
1) Script works fine until you click the 3rd or 4th image in the row:
When the 3rd image is clicked, it slides out the div fine, but creates a blank space on the next row (i'm assuming it is pushing the image onto a new line but also adding a margin...)
When the 4th image is clicked, it is creating the bio outside of the container. The only way I can see a fix for this would be to have it slide the opposite way for every 4th item in a row. I can add a counter class to the divs dynamically using my CMS, just not sure how to reference this in the javascript.
2) I'm unsure how to make it work responsively. I am dropping the container from 1/4 to 1/2 on tablet and mobile. So I need to basically double the margin and size of the bio container. How can I declare this in the script?
Many thanks in advance for any help. Credit to Trim Kadrui who helped me with the script so far.
JS Fiddle:
http://jsfiddle.net/QrfzA/21/
Script code:
$(document).ready(function() {
$('.team-photo').click(function() {
var teamBio = $(this).next();
var nextBlock = $(this).parent().next();
if(teamBio.width() > 0){
teamBio.animate({width: 0, opacity: 0});
nextBlock.animate({marginLeft: '0%'});
}
else {
teamBio.css("display", "inline-block");
teamBio.animate({width: '100%', opacity: 100});
nextBlock.animate({marginLeft: '25%'});
}
});
});

$(document).ready(function() {
$('.team-photo').click(function() {
var teamBio = $(this).next();
var nextBlock = $(this).parent().next();
if(teamBio.width() > 0){
nextBlock.css("clear", "none");
teamBio.animate({width: 0, opacity: 0});
nextBlock.animate({marginLeft: '0%'});
}
else {
teamBio.css("display", "inline-block");
teamBio.animate({width: '100%', opacity: 100});
if(nextBlock.position().left>10) {
nextBlock.animate({marginLeft: '25%'});
if(!nextBlock.next().length || nextBlock.next().position().left<10) {
nextBlock.animate({marginLeft: '0'});
nextBlock.css("clear", "both");
}
}
}
});
});
if(nextBlock.position().left>10) does the trick,basically it checks if the there are more than 10 pixels to the left of the nextBlock and then applies the margin left property.
I've checked to see if nextBlock.position().left is greater than 10,you can set it to suite your needs.
EDIT: nextBlock.next().position().left<10 was also needed to be checked in case,the image is last but one in that line. CSS property clear:both was used to send the nextblock to the new line instead of using a margin.
Here is the updated JSFiddle.

JS Move a Div by Scroll Location

I want to move a bootstrap "navbar" header off the page when the navbar's position on the page reaches 400px.
If you look at this jsfiddle, I want the .navbar to leave the top of the page when the blue block begins (at 400px). The navbar would stay on the page through the red div, then leave the top of the page when the blue block begins.
I have tried to do this with scrollorama (jquery plugin), but have not had success yet:
$(document).ready(function() {
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
scrollorama.animate('#fly-in',{ delay: 400, duration: 300, property:'top', start:-1400, end:0 });
});
I am looking for either a pure javascript solution, or with the scrollorama plugin. Thanks for any ideas!

I'm not very familiar with the scrollorama plugin but you can get this done simply with jQuery via the scroll() event:
$(window).scroll(function () {
var winTop = $(this).scrollTop();
var redHeight = $('#red').height();
if (winTop >= redHeight) {
/*if the scroll reaches the bottom of the red <div> make set '#move' element
position to absolute so it will move up with the red <div> */
$('#move').css({
'position': 'absolute',
'bottom': '0px',
'top': 'auto'
});
} else {
//else revert '#move' position back to fixed
$('#move').css({
'position': 'fixed',
'bottom': 'auto',
'top': '0px'
});
}
});
See this updated jsfiddle: jsfiddle.net/52VtD/1945/
Edit: make it so that the navbar disappears at the same point that the red div ends
I noticed that earlier as well but I'm having trouble locating the problem so I removed your imported style sheet and created a basic style for the navbar. To get the navbar disappears at the same point that the red div ends you need to subtract the navbar's height to the condition:
if (winTop >= redHeight - $('#move').height()) {
I've also restructured the markup to get this working properly. I've nested the navbar inside the red div and set the red div's position to relative.
See this jsfiddle: jsfiddle.net/52VtD/1981/

listen to the scroll event using jquery to find if the navbar overlaps with the red or blue div
Assign a class to the red div
<div class="redDiv" style="height:400px; background-color: red;">
Then listen to the scroll event and use the getBoundingClientRect() to find the co-ord of the navbar and the div in the view port to check for overlap
$(document).scroll(function(event)
{
var rect1 = $('.navbar').get(0).getBoundingClientRect();
var rect2 = $('.redDiv').get(0).getBoundingClientRect();
var overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
if(!overlap)
{
if ( $(".navbar").is(":visible") ) {
$('.navbar').hide();
}
}
else
{
if ( !$(".navbar").is(":visible") ) {
$('.navbar').show();
}
}
});
Here is a working fiddle
http://jsfiddle.net/SXzf7/

Jquery animate negative top and back to 0 - starts messing up after 3rd click

The site in question is this one:
http://www.pickmixmagazine.com/wordpress/
When you click on one of the posts (any of the boxes) an iframe will slide down from the top with the content in it. Once the "Home" button in the top left hand corner of the iframe is clicked, the iframe slides back up. This works perfectly the first 2 times, on the 3rd click on of a post, the content will slide down, but when the home button is clicked, the content slides back up normally but once it has slid all the way up to the position it should be in, the iframe drops straight back down to where it was before the home button was clicked, I click it again and then it works.
Here is the code I've used for both sliding up and sliding down functions:
/* slide down function */
var $div = $('iframe.primary');
var height = $div.height();
var width = parseInt($div.width());
$div.css({ height : height });
$div.css('top', -($div.width()));
$('.post').click(function () {
$('iframe.primary').load(function(){
$div.animate({ top: 0 }, { duration: 1000 });
})
return false;
});
/* slide Up function */
var elm = parent.document.getElementsByTagName('iframe')[0];
var jelm = $(elm);//convert to jQuery Element
var htmlElm = jelm[0];//convert to HTML Element
$('.homebtn').click(function(){
$(elm).animate({ top: -height }, { duration: 1000 });
return false;
})

Have you considered using Ajax, like load(), ready() in jquery to control them better?
I am also not sure what you are trying to do with this.
var height = $div.height();
$div.css({ height : height });
may be you want to get the height of the current window? Where you can get it this way
var $dDiv = $('iframe.primary');
var innerH = window.innerHeight;
$dDiv.height(innerH);
Also try avoiding naming your custom var with default names like height, width, div, etc... You will confuse yourself and make debugging a pain.

Shade entire page, unshade selected elements on hover

I'm trying to make a page inspection tool, where:
The whole page is shaded
Hovered elements are unshaded.
Unlike a lightbox type app (which is similar), the hovered items should remain in place and (ideally) not be duplicated.
Originally, looking at the image lightbox implementations, I thought of appending an overlay to the document, then raising the z-index of elements upon hover. However this technique does not work in this case, as the overlay blocks additional mouse hovers:
$(function() {
window.alert('started');
$('<div id="overlay" />').hide().appendTo('body').fadeIn('slow');
$("p").hover(
function () {
$(this).css( {"z-index":5} );
},
function () {
$(this).css( {"z-index":0} );
}
);
Alternatively, JQueryTools has an 'expose' and 'mask' tool, which I have tried with the code below:
$(function() {
$("a").click(function() {
alert("Hello world!");
});
// Mask whole page
$(document).mask("#222");
// Mask and expose on however / unhover
$("p").hover(
function () {
$(this).expose();
},
function () {
$(this).mask();
}
);
});
Hovering does not work unless I disable the initial page masking. Any thoughts of how best to achieve this, with plain JQuery, JQuery tools expose, or some other technique? Thankyou!

What you can do is make a copy of the element and insert it back into the DOM outside of your overlay (with a higher z-index). You'll need to calculate its position to do so, but that's not too difficult.
Here is a working example.
In writing this I re-learned the fact that something with zero opacity cannot trigger an event. Therefore you can't use .fade(), you have to specifically set the opacity to a non-zero but very small number.
$(document).ready(function() { init() })
function init() {
$('.overlay').show()
$('.available').each(function() {
var newDiv = $('<div>').appendTo('body');
var myPos = $(this).position()
newDiv.addClass('available')
newDiv.addClass('peek')
newDiv.addClass('demoBorder')
newDiv.css('top',myPos.top+'px')
newDiv.css('left',myPos.left+'px')
newDiv.css('height',$(this).height()+'px')
newDiv.css('width',$(this).width()+'px')
newDiv.hover(function()
{newDiv.addClass('full');newDiv.stop();newDiv.fadeTo('fast',.9)},function()
{newDiv.removeClass('full');newDiv.fadeTo('fast',.1)})
})
}

Sorry for the prototype syntax, but this might give you a good idea.
function overlay() {
var div = document.createElement('div');
div.setStyle({
position: "absolute",
left: "0px",
right: "0px",
top: "0px",
bottom: "0px",
backgroundColor: "#000000",
opacity: "0.2",
zIndex: "20"
})
div.setAttribute('id','over');
$('body').insert(div);
}
$(document).observe('mousemove', function(e) {
var left = e.clientX,
top = e.clientY,
ele = document.elementFromPoint(left,top);
//from here you can create that empty div and insert this element in there
})
overlay();