Develop Reference

How to apply offset to fixed element (bottom: 0)

I am using the smooth scrollbar plugin and am having issues with elements with position fixed.
I have a div ID 'scroll', the nav, footer and content are inside this
Since transform creates a new local coordinate system(W3C Spec), position: fixed is fixed to the origin of scrollbar content container, i.e. the left: 0, top: 0 point.
Therefore, you may need to register a scroll listener and apply offsets to the fixed element.
I am having issues with the getting the footer (#footer) to work, the nav (#fixed) is working correctly
Any suggestions?
var fixedElem = document.getElementById('fixed');
var footerElem = document.getElementById('footer');
var scrollbar = Scrollbar.init(
document.getElementById('scroll'),
);
scrollbar.addListener(function(status) {
var offset = status.offset;
fixed.style.top = offset.y + 'px';
fixed.style.left = offset.x + 'px';
footer.style.bottom = offset.y + 'px';
footer.style.left = offset.x + 'px';
});
CSS
#fixed {
position: fixed;
top: 0
left: 0;
}
#footer {
position: fixed;
bottom: 0
left: 0;
}

JavaScript mousewheel event to scroll page horizontally when vertical scroll

I am trying to detect when a user scrolls up or down on an fixed height element and update the element's transform: translateX CSS value accordingly to scroll the contents either to the left or two the right. However, I can't figure out how to get the proper value from the delta.
document.getElementById("list").addEventListener("wheel", myFunction);
function myFunction(event) {
var matrix = $('.gallery-list').css('transform').split(/[()]/)[1];
var y = parseInt(event.deltaY);
var posX = parseInt(matrix.split(',')[4]);
console.log(y);
console.log(posX);
console.log(y + posX);
//$('.gallery-list').css('transform', 'translateX('+posX + y+'px)');
}
Here is a Codepen here: https://codepen.io/kylehagler/pen/OKxMGr

Add this to your css:
.outside {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
position: absolute;
}
Surround the gallery-list div with:
<div id="outside" class="outside">
Finally, here is the JS:
document.getElementById("outside").addEventListener("wheel", myFunction);
var total = 0;
function myFunction(event) {
var y = parseInt(event.deltaY);
total += y;
$(".gallery-list").css('transform', 'translateX(' + total + 'px)');
}

Javascript - Controlling image movement at different speeds with scroll

I have a container and and image inside that container. When the container is not in view - the image must be at translate y 0%. When the container is halfway into the viewport and past halfway - the image must be translate y 50%. The % value must be bound to the position of the container into the viewport (controlled by scrolling). The position of the container also determines the speed the image is being translated at. The problem I'm getting is that when the speed value changes, the image jerks up or down instead of changing the speed from that point onward.
Here is my script:
if (wScroll > $(".largeWindow").offset().top - ($(window).height())) {
var cont = $(".largeWindow");
var img = $(".coffee2");
var top = cont.offset().top - cont.height();
var speed;
// translate the image within the container
var moveImage = function() {
setSpeed();
var scroll = Math.floor((wScroll - top)) * speed;
return img.css("transform", "translate(-50%, " + scroll + "%)");
}
// get the position of the image within the container
var getImagePos = function() {
return img.position().top - img.height()/2;
}
var getContainerPos = function() {
var windowHeight = $(window).height();
var contPos = Math.floor(cont.offset().top + cont.height()/2) - wScroll;
return Math.floor(contPos/windowHeight * 100);
}
// set the speed the image will be translated at
var setSpeed = function() {
if (getContainerPos() < 50) {
speed = 0;
}
else if (getContainerPos() < 60 ) {
speed = 0.5
}
else if (getContainerPos() < 70 ) {
speed = 0.5
}
else {
speed = 0.8
}
}
getContainerPos();
moveImage();
getImagePos();
}
Here is the sass for the container and image:
.largeWindow
position: relative
margin: 0 auto
height: 400px
width: 400px
border-radius: 50%
overflow: hidden
background:
image: url(../images/bgTable.jpg)
size: cover
repeat: no-repeat
position: center
attachment: fixed
.coffee2
position: absolute
height: 200px
width: 200px
left: 50%
transform: translateX(-50%)
top: - 200px
background:
image: url(../images/bgCup.png)
size: contain
repeat: no-repeat
position: center

How to get the lower co-ordinate of images in html

I have a image and it is inside a div. I want to know what would be the lower co-ordinates for the image. Like if it a rectangle with corners A,B,C and D with A as the bottom left corner I want to get the co-ordinates of that. Could you let me know how I could achieve that using JavaScript or jQuery.

You can do this with JQuery position() and return left and top
var pos = $('img').position();
$('.result').append('(x: ' + pos.left + ', y: ' + pos.top + ')');
div {
width: 200px;
height: 200px;
position: relative;
border: 1px solid black;
}
img {
position: absolute;
left: 40px;
top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="http://placehold.it/50x50">
</div>
<span class="result"></span>

The best solution would be to use getBoundingClientRect()
var image = $( "img" );
var imageBounds = image.get(0).getBoundingClientRect();
var imageLeft = imageBounds.left;
var imageBottom = imageBounds.bottom;
Fiddle
But you could also use jQuery's .position() to get the top and left coordinates then to calculate the bottom and right position just add .height() or .width()
var image = $( "img" );
var imagePosition = image.position();
var imageHeight = image.height();
var imageLeft = imagePosition.left;
var imageBottom = imagePosition.top + imageHeight;
Fiddle
or without using jQuery:
var image = document.getElementById("image");
var imageBounds = image.getBoundingClientRect();
var imageLeft = imageBounds.left;
var imageBottom = imageBounds.bottom;
Fiddle

You can use .position() to get left and top coordinates(top left corner).
to get the bottom left corner just add image height to top coordinate.
$(window).load(function(){ //to make sure all images are loaded
console.log($('img').position().left);
console.log($('img').position().top + $('img').height());
});
div { padding: 30px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="http://placehold.it/350x150"></div>

Here is the demo on codepen: http://codepen.io/ssh33/pen/AXdVER
Waits for the image to download to get the width and height and calls GetCoordinates().
If the image has been previously cached $("#image").load() will never fire. In this case $(window).load() will call GetCoordinates() instead. GetCoordinates() checks for non-numeric width/height and retrieves it if necessary.
Recalculates on window resize.
var img_width, img_height, x, y;
$("#image").load(function() {
img_width = this.width;
img_height = this.height;
});
var GetCoordinates = function(){
if (isNaN(img_width) || isNaN(img_height)){
img_width = $("#image").width();
img_height = $("#image").height();
}
var img_left = $("#image").offset().left;
x = img_width + img_left;
var img_top = $("#image").offset().top;
y = img_height + img_top;
}
$(window).load(function() {
GetCoordinates();
});
$(window).resize(function() {
GetCoordinates();
});

Same position and animation of dynamic generated Images

I have a few elements positioned in my HTML. The body has a max-width from 1280px with margin auto. And there are a few elements, which I floated right. In the middle of the page there should be 70 images go from left to right (and then dissapear). I have tried to make those elements position absolute with display: inline, but since the start and the end position should always be the same, and the images have a width and a height, I didn't know how to make it dynamically.. Thats my code so far:
HTML
<body>
<h1>Sweets</h1>
<div class="images"></div>
<div id="display"></div>
<div class="clear"></div>
<div id="maracons"></div>
<div id="cupCake"></div>
</body>
JQUERY
for (var i = 0; i < 10; i++) {
$('.images').append('<img class="image' + i.toString() + '" src="img/' + arr[i][5] + '">');
}
CSS
$leftPos: 1100px;
$widthImage: 200px;
.images{
width: $widthProducts;
height: 200px;
position: absolute;
left: 1100px;
top: 0px;
}
.image-1{
left: $leftPos;
}
.image-2{
left: $leftPos - $widthImage;
}
.image-3{
left: $leftPos - $widthImage*2;
}
Here is how it looks like:

Confusing question but from what I gather you want the images to have dynamic height/width when you are appending them? If so what do you want to make the width/height equal?
If thats the case here is the answer:
var imgWidth = 10, imgHeight = 10;
for (var i = 0; i < 10; i++) {
imgWidth = 100; //Set width
imgHeight = 100; //Set height
$('.images').append('<img style="width:' + imgWidth +'px!important; height:' + imgHeight + 'px !important; " class="image' + i.toString() + '" src="img/' + arr[i][5] +'">');
}
the !important keyword will force the width/height specified to ignore the width/height specified in the class..
sorry if this is not what you mean, a jsfiddle would be great.
UPDATE
Check this fiddle:
http://jsfiddle.net/xP8Qb/
Here is the kinda thing you were looking for:
$(document).ready(function () {
var endpoint = 800; //you can set left+top endpoints and ref them in loop below..
for (var i = 0; i < 3; i++) {
var html = '<div class="imgs img'+i+'"></div>';
setTimeout(function() {
$('.images').append(html);
$('.images>.imgs:last').animate({"left" : "300px"}, endpoint);
}, i * 1000);
}
});
i can work on it more if needed, but hopefully this is enough to put you on the right track..