We Keep Coding

parallax scroll with position sticky not working together

There are 3 divs,
1. Top bar
2. slider
3. navigation
I implemented parallax scroll on navigation with the code below.
<script>
$.fn.moveIt = function(){
var $window = $(window);
var instances = [];
$(this).each(function(){
instances.push(new moveItItem($(this)));
});
window.onscroll = function(){
var scrollTop = $window.scrollTop();
instances.forEach(function(inst){
inst.update(scrollTop);
});
}
}
var moveItItem = function(el){
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop){
var pos = scrollTop / this.speed;
this.el.css('transform', 'translateY(' + -pos + 'px)');
};
$(function(){
$('[data-scroll-speed]').moveIt();
});
</script>
The script is working perfectly, but i want the bottom navigation when scrolled to the top sticks at 30pixels from top, so i implemented the css below.
nav{
position: -webkit-sticky;
position: sticky;
top: 30px;
}
both code dosent work together, it may be a position issue, I want to get both this working together, any suggestion please.

jQuery Set Height of Element to Highest in the group

I'm trying to work with jQuery to find the highest element from the first 3 elements within a div then set all 3 the same height then check the next 3 and set them.. etc.. if my window width == X, also if the window width is < X then find the highest 2 elements then set them, then the next 2 then the next 2 etc.
This is my current code which works for all the elements, I would just like to to go through the elements in groups (2's and 3's) and set the height for that group based on the result and window size.
// Find highest element and set all the elements to this height.
$(document).ready(function () {
// Set options
var height = 0;
var element_search = "#cat_product_list #cat_list";
var element_set = "#cat_product_list #cat_list";
// Search through the elements set and see which is the highest.
$(element_search).each(function () {
if (height < $(this).height()) height = $(this).height();
//debug_(height,1);
});
// Set the height for the element(s if more than one).
$(element_set).each(function () {
$(element_set).css("height", (height+40) + "px");
});
});
Any help is much appreciated :)

Try this for setting all of them to the max height:
$(document).ready(function() {
var maxHeight = 0;
$("#cat_product_list #cat_list").each(function() {
if ($(this).outerHeight() > maxHeight) {
maxHeight = $(this).outerHeight();
}
}).height(maxHeight);
});
Update 22/09/16: You can also achieve the same thing without any Javascript, using CSS Flexbox. Setting the container element to have display: flex will automatically set the heights of the elements to be the same (following the highest one).

I've sorted this now,
Check out my Fiddle:
http://jsfiddle.net/rhope/zCdnV/
// Find highest element and set all the elements to this height.
$(document).ready(function () {
// If you windows width is less than this then do the following
var windowWidth = $(window).width();
if (windowWidth < 2000) {
var i = 0,
quotes = $("div#cat_product_list").children(),
group;
while ((group = quotes.slice(i, i += 2)).length) {
group.wrapAll('<div class="productWrap"></div>');
}
}
// Find the width of the window
var windowwidth = $(window).width();
//debug_(windowwidth);
// Set options
var height = 0;
var element_wrap = ".productWrap";
var element_search = ".cat_list";
// Search through the elements set and see which is the highest.
$(element_wrap).each(function () {
$(this).find(element_search).each(function () {
if (height < $(this).height()) height = $(this).height();
});
//alert("Block Height: " +height);
// Set the height for the element wrap.
$(this).css("height", (height) + "px");
// Unset height
height = 0;
});
});

Just to add another suggestion. Here is a jQuery plugin I wrote that accepts one parameter. You can call it like this:
$('.elementsToMatch').matchDimensions("height");
You can match the height, width or if no parameter is entered, both dimensions.
$(function() {
$(".matchMyHeight").matchDimensions("height");
});
(function($) {
$.fn.matchDimensions = function(dimension) {
var itemsToMatch = $(this),
maxHeight = 0,
maxWidth = 0;
if (itemsToMatch.length > 0) {
switch (dimension) {
case "height":
itemsToMatch.css("height", "auto").each(function() {
maxHeight = Math.max(maxHeight, $(this).height());
}).height(maxHeight);
break;
case "width":
itemsToMatch.css("width", "auto").each(function() {
maxWidth = Math.max(maxWidth, $(this).width());
}).width(maxWidth);
break;
default:
itemsToMatch.each(function() {
var thisItem = $(this);
maxHeight = Math.max(maxHeight, thisItem.height());
maxWidth = Math.max(maxWidth, thisItem.width());
});
itemsToMatch
.css({
"width": "auto",
"height": "auto"
})
.height(maxHeight)
.width(maxWidth);
break;
}
}
return itemsToMatch;
};
})(jQuery);
.matchMyHeight {background: #eee; float: left; width: 30%; margin-left: 1%; padding: 1%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="matchMyHeight">
Div 1
</div>
<div class="matchMyHeight">
Div 2
</div>
<div class="matchMyHeight">
Div 6<br> Div 6<br> Div 6<br> Div 6
</div>

var highHeight = "0";
$(".item").each(function(){
var thHeight = $(this).height();
if(highHeight < thHeight ){
highHeight = thHeight;
}
});
console.log(highHeight)

jQuery Image Viewport Calculation Algorithm to Avoid Scrollbars

I am creating an image hover effect but I am having problem with it. When I hover over certain images, the scrollbars appear which I want to avoid but don't know how to do so. I believe it has to do with viewport and calculations but am not sure how that is done.
Example Here
JSBin Code
Here is the code:
$('.simplehover').each(function(){
var $this = $(this);
var isrc = $this[0].src, dv = null;
$this.mouseenter(function(e){
dv = $('<div />')
.attr('class', '__shidivbox__')
.css({
display: 'none',
zIndex : 9999,
position: 'absolute',
top: e.pageY + 20,
left: e.pageX + 20
})
.html('<img alt="" src="' + isrc + '" />')
.appendTo(document.body);
dv.fadeIn('fast');
})
.mouseleave(function(){
dv.fadeOut('fast');
});
});
Can anyone please help me how do I make it so that hovered image appears at such place that scrollbars dont appear? (Of course we can't avoid scrollbar if image size is very very big)
I just want to show original image on zoom while avoiding scrollbars as much as possible.
Please note that I am planning to convert it into jQuery plugin and therefore I can't force users of plugin to have overflow set to hidden. The solution has do with viewport, left, top, scroll width and height, window width/height properties that I can incorporate into plugin later on.
Update:
I have come up with this:
http://jsbin.com/upuref/14
However, it is very very hacky and not 100% perfect. I am looking for a better algorithim/solution. I have seen many hover plugins that do this very nicely but since I am not that good at this, I can't do it perfectly well. For example Hover Zoom Chrome Plugin does great job of showing hovered images at appropriate place based on their size.

Like this:
html{overflow-x:hidden;}
html{overflow-y:hidden;}
All you need to do is add these definitions to your CSS and you're done.
Update with Resize: this is the mouseenter code for resizing and repositioning the pictures BOTH horizontally and vertically. Now, no matter where the HOVER image shows up, it's resized and positioned to always show in full AND uncut. As far as the scrollbars are concerned, if you show more thumbnails than can fit on the page, you will have scrollbars even before the HOVER images show up.
FINAL AND WORKING UPDATE: Because you had focused on the scrollbars being hidden, I think you overlooked the fact that if you put more thumbnails than the viewport can contain, the scrollbars would show up anyway and that therefore, since the user can scroll down the document, when you calculate the position of the hover image, not only do you need to account for the resize but you also to account for the scrollTop position too! FINAL JSBIN HERE, all pictures are showing RESIZED and in FULL no matter where the scrollTop is and no matter what the viewport size is.
$this.mouseenter(function () {
dv = $('<div />')
.attr('class', '__shidivbox__')
.css({
'display': 'none',
'z-index': 9999,
'position': 'absolute',
'box-shadow': '0 0 1em #000',
'border-radius': '5px'
})
.html('<img alt="" src="' + isrc + '" />')
.appendTo(document.body);
var DocuWidth = window.innerWidth;
var DocuHeight = window.innerHeight;
var DvImg = dv.find('img');
var TheImage = new Image();
TheImage.src = DvImg.attr("src");
var DivWidth = TheImage.width;
var DivHeight = TheImage.height;
if (DivWidth > DocuWidth) {
var WidthFactor = (DivWidth / DocuWidth) + 0.05;
DivHeight = parseInt((DivHeight / WidthFactor), 10);
DivWidth = parseInt((DivWidth / WidthFactor), 10);
}
var ThumbHeight = $this.height();
var ThumbWidth = $this.width();
var ThumbTop = $this.position().top;
var ThumbLeft = $this.position().left;
var SpaceAboveThumb = ThumbTop - $(document).scrollTop();
var SpaceBelowThumb = DocuHeight - ThumbTop - ThumbHeight + $(document).scrollTop();
var MaxHeight = Math.max(SpaceAboveThumb, SpaceBelowThumb);
if (DivHeight > MaxHeight) {
var HeightFactor = (DivHeight / MaxHeight) + 0.05;
DivHeight = parseInt((DivHeight / HeightFactor), 10);
DivWidth = parseInt((DivWidth / HeightFactor), 10);
}
var HoverImgLeft = 0;
var HoverImgTop = 0;
if (SpaceBelowThumb > SpaceAboveThumb) {
HoverImgTop = ThumbTop + ThumbHeight;
} else {
HoverImgTop = ThumbTop - DivHeight;
}
HoverImgTop = (HoverImgTop < 0) ? 0 : HoverImgTop;
HoverImgLeft = (DocuWidth - DivWidth) / 2;
dv.find('img').css({
'width': DivWidth,
'height': DivHeight,
'border-radius': '5px'
});
dv.css({
'left': HoverImgLeft,
'top': HoverImgTop
});
dv.fadeIn('fast');
});

Well, this looks fun. Anyway, here's my answer. I've been watching this for a few days and though I'd chip in too. The following will make sure that the hovering images do not go out of the viewport and in the event that the width of the image is bigger than the available space for display, the display of the image will be resized (You can comment out the code that does this if you don't want it. Just look for the word "resize" in the code).
var $document = $(document);
$('.simplehover').each(function(){
var $this = $(this);
// make sure that element is really an image
if (! $this.is('img')) return false;
var isrc = $this[0].src, ibox = null;
if (! isrc) return false;
ibox = $('<img />')
.attr('class', 'simpleimagehover__shidivbox__')
.css({
display: 'none',
zIndex : 99,
MozBoxShadow: '0 0 1em #000',
WebkitBoxShadow: '0 0 1em #000',
boxShadow: '0 0 1em #000',
position: 'absolute',
MozBorderRadius : '10px',
WebkitBorderRadius : '10px',
borderRadius : '10px'
})
.attr('src', isrc)
.appendTo(document.body);
$this.bind('mouseenter mousemove', function(e) {
$('.simpleimagehover__shidivbox__').hide();
var left = e.pageX + 5,
top = e.pageY + 5,
ww = window.innerWidth,
wh = window.innerHeight,
w = ibox.width(),
h = ibox.height(),
overflowedW = 0,
overflowedH = 0;
// calucation to show element avoiding scrollbars as much as possible - not a great method though
if ((left + w + $document.scrollLeft()) > ww)
{
overflowedW = ww - (left + w + $document.scrollLeft());
if (overflowedW < 0)
{
left -= Math.abs(overflowedW);
}
}
// 25 is just a constant I picked arbitrarily to compensate pre-existing scrollbar if the page itself is too long
left -= 25;
left = left < $document.scrollLeft() ? $document.scrollLeft() : left;
// if it's still overflowing because of the size, resize it
if (left + w > ww)
{
overflowedW = left + w - ww;
ibox.width(w - overflowedW - 25);
}
if (top + h > wh + $document.scrollTop())
{
overflowedH = top + h - wh - $document.scrollTop();
if (overflowedH > 0)
{
top -= overflowedH;
}
}
top = top < $document.scrollTop() ? $document.scrollTop() : top;
ibox.css({
top: top,
left: left
});
ibox.show();
});
$('.simpleimagehover__shidivbox__').mouseleave(function(){
$('.simpleimagehover__shidivbox__').hide();
});
$document.click(function(e){
$('.simpleimagehover__shidivbox__').hide();
});
$document.mousemove(function(e){
if (e.target.nodeName.toLowerCase() === 'img') {
return false;
}
$('.simpleimagehover__shidivbox__').hide();
});
});
While my solution itself is not perfect, you might find something useful in there that can help you determine the viewport. Also, you might want to think about the performance of the code. Since this is a plugin that you're building, you'll want to make some optimizations before releasing it to public. Basically, just make sure it's not slow.

You can position the image based on the available width: http://jsbin.com/upuref/19/
This demo takes in account the available space for positioning the image (i.e. the window width minus the image width). Also I've improved the event order, with the popup div only starting its fade-in after the image has been loaded.

My answer too (JSBin DEMO)
$('.simplehover').each(function(){
var $this = $(this);
// make sure that element is really an image
if (! $this.is('img')) return false;
var isrc = $this[0].src, dv = null;
if (! isrc) return false;
$this.mouseenter(function(e){
// mouse x position
var initXPos = e.pageX;
var initYPos = e.pageY+20-$(window).scrollTop();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
// load original image
var $img = $('<img/>');
$img.on('load',function(eload) {
var widthImage = this.width;
var heightImage = this.height;
// set inline style for get sizes after (see problems webkit and cache)
$(this).css('width',widthImage);
$(this).css('height',heightImage);
var ratio = widthImage/heightImage;
var finalXPos = initXPos+widthImage>windowWidth? windowWidth-widthImage-5 : initXPos;
var finalYPos = initYPos;
var img = this;
// resize image if is bigger than window
if(finalXPos<0) {
finalXPos = 0;
$img.css('width', windowWidth-10);
$img.css('height',(windowWidth-10)/ratio);
}
// If overflow Y
if(finalYPos+getSize($img,'height')>windowHeight) {
// calculate where is more space (top or bottom?)
var showOnTop = (windowHeight-initYPos-10)<windowHeight/2;
if(showOnTop) {
if(initYPos<getSize($img,'height')) {
$img.height(initYPos-30);
$img.width(getSize($img,'height')*ratio);
}
finalYPos = 0;
finalXPos = initXPos+getSize($img,'width')>windowWidth? windowWidth-getSize($img,'width')-5 : initXPos;
}else {
// show on bottom
if(windowHeight-initYPos<getSize($img,'height')) {
$img.height(windowHeight-initYPos-10);
$img.width(getSize($img,'height')*ratio);
}
finalXPos = initXPos+getSize($img,'width')>windowWidth? windowWidth-getSize($img,'width')-5 : initXPos;
}
}
dv = $('<div />')
.attr('class', '__shidivbox__')
.css({
display: 'none',
zIndex : 9999,
position: 'absolute',
MozBorderRadius : '5px',
WebkitBorderRadius : '5px',
borderRadius : '5px',
top: finalYPos+$(window).scrollTop(),
left: finalXPos
}).append($img)
.appendTo(document.body);
dv.fadeIn('fast');
});
// load the original image (now is the same, but I think is better optimize it)
$img.attr("src",$this.attr("src"));
function getSize($el,widthOrHeight) {
// horrible but working trick :)
return +$el.css(widthOrHeight).replace("px","");
}
})
.mouseleave(function(){
dv.fadeOut('fast');
});
});
this script adapt the image to window size and adjust x position if needed.

jQuery animate height expand outward instead of down

I am building my sister a website at SarahNWatson.com/new. I have it set up as a big photo/video album. For actual content pages, such as her Bio, I have it so that it opens a modal window.
Right now I have the modal window so that the height starts at 0px and then animates open, however this gives me a slide down effect. I want it to open outwards as if something were in the box pushing in both directions. How can I accomplish this?
Here's the code:
function createModal(filler) {
var $this = $(this);
var $body = $('body');
var winHeight = $(window).height();
var winWidth = $(window).width();
$body.prepend('<div id="blackout">');
$("#blackout").css({ height:winHeight }).fadeIn(1800);
$body.prepend('<div id="modal_window">');
$("#modal_window").html(filler).fadeIn(2000);
var modalHeight = $("#modal_window").height();
var modalWidth = $("#modal_window").width();
var offsetH = winHeight/2 - modalHeight;
var offsetW = winWidth/2 - modalWidth/2;
$("#modal_window").css({ top:offsetH, left:offsetW, height:'0px' }).animate({ height:modalHeight });
}
And the CSS:
#modal_window {
position: absolute;
z-index: 1000;
width: 600px;
background: rgba(0,0,0,.8);
padding: 15px;
}

Start with offsetH = winHeight/2 and offsetW = winWidth/2. Then, animate all of the top, left, and height CSS properties. The final top will be (winHeight - modalHeight)/2 and final left will be (winWidth - modalWidth)/2.
function createModal(filler) {
var $this = $(this);
var $body = $('body');
var winHeight = $(window).height();
var winWidth = $(window).width();
$body.prepend('<div id="blackout">');
$("#blackout").css({ height:winHeight }).fadeIn(1800);
$body.prepend('<div id="modal_window">');
$("#modal_window").html(filler).fadeIn(2000);
var modalHeight = $("#modal_window").height();
var modalWidth = $("#modal_window").width();
var offsetH1 = winHeight/2;
var offsetH2 = (winHeight-modalHeight)/2;
var offsetW = (winWidth-modalWidth)/2;
$("#modal_window")
.css({ top:offsetH1, left:offsetW, height:'0px' })
.animate({ top:offsetH2, height:modalHeight });
}
UPDATE: Code sample updated to only animate vertically.
Essentially, you're moving the box up as it grows taller. So instead of sliding down it gives the appearance of expanding from the middle.

You could give it a margin-top of half the ultimate height (modalHeight) and add marginTop:"toggle" to your animation:
.animate({ height:modalHeight, marginTop:"toggle"})

Try using the CSS setting Bottom instead of Top. You should then use the bottom of the element to position it thus having it animte upwards instead of downwards.
.animate() always animate away from the anchor.

How to make a div scroll when I scroll after certain point?

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page. I know I've seen at least one example of this online but I cannot remember it for the life of me.
Any thoughts?

[Working demo]
var el = $("#sticky");
var win = $(window);
var width = el.width();
var height = el.height();
var win_height = $(window).height();
window.onscroll = function() {
var offset = el.offset().top + height - win_height;
if ( win.scrollTop() > offset ) {
window.onscroll = function() {
el.css({
width: width,
position: "absolute",
top: win.scrollTop() + win_height - height
});
};
}
};
If you don't need to support IE based browsers you can use:
position: "fixed"
bottom: 0