We Keep Coding

JQuery - Scroll and anchor to bottom of ajax-driven div unless user scrolls up

I am trying to scroll to the bottom of a div #chat-feed with overflow set to auto and stay there unless a user scrolls that div's content up. If they scroll back down, the div should lock to the bottom and new content will be displayed at the bottom.
Known issues: I have tried implementing this answer with my code but I do not know Javascript well enough yet to get it working. If content from chat-feed.php is taller than the container then the scroll stays at the top. It also seems like the answer given does not respect content loaded from an external file.
Key things: new content should show at the bottom and the div should scroll to the bottom when new content loads UNLESS the users has already scrolled up a bit. If the user scrolls back down, then it should lock to the bottom and new content be displayed at the bottom and be visible.
<div id="chat-feed" style="height: 200px; width: 300px; overflow: auto;"></div>
<script>
$(document).ready(function(){
setInterval(function(){
$('#chat-feed').load("chat-feed.php").fadeIn("slow");
}, 1000);
});
</script>
Demo link

On question you linked to, there is a better implementation https://stackoverflow.com/a/21067431/1544886.
I've reworked that author's code below:
$(document).ready(function() {
var out = document.getElementById("chat-feed"); // outer container of messages
var c = 0; // used only to make the fake messages different
// generate some chatter every second
setInterval(function() {
//check current scroll position BEFORE message is appended to the container
var isScrolledToBottom = checkIfScrolledBottom();
// append new mesage here
$('#chat-feed').append("<div>Some new chat..." + c++ + "</div>").fadeIn("slow");
// scroll to bottom if scroll position had been at bottom prior
scrollToBottom(isScrolledToBottom);
}, 1000);
function checkIfScrolledBottom() {
// allow for 1px inaccuracy by adding 1
return out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
}
function scrollToBottom(scrollDown) {
if (scrollDown)
out.scrollTop = out.scrollHeight - out.clientHeight;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chat-feed" style="height: 150px; width: 300px; overflow: auto;"></div>
UPDATE
JQuery's .load() function deletes the associated element (chat-feed) and re-adds. This means that the out variable points to the old deleted element, not the new. The solution is update the out variable after executing a .load():
$('#chat-feed').load("chat-feed.php").fadeIn("slow");
out = document.getElementById("chat-feed"); // outer container of messages

Unable to calculate the hover element's exact position

I am just trying to get the mouse hover div's position at the right according to the space around. Somehow I am able to do this in first two columns but not for other columns. May be my calculations while writing the condition state are wrong.
Can anyone please help?
JS Fiddle URL:
http://jsfiddle.net/mufeedahmad/2u1zr11f/7/
JS Code:
$('.thumb-over-team li').find('.cover').css({opacity:0});
$('.thumb-over-team li').on('mouseenter', function(){
var $this = $(this),
thisoffset = $this.position().left,
openDivId = $(this).find('.cover'),
thumbContainer = '.thumb-over-team',
speedanim = 200;
if(thisoffset + openDivId.outerWidth() >= $(thumbContainer).outerWidth()){
//thisoffset = $(thumbContainer).outerWidth() - openDivId.outerWidth() - 212;
thisoffset = thisoffset - openDivId.outerWidth()+10;
openDivId.stop().css({'z-index':'9999'}).animate({'opacity':'1', 'left':-thisoffset}, 200);
}else{
openDivId.stop().css({'z-index':'9999'}).animate({'opacity':'1', 'left':'212px'}, 200);
}
}).on('mouseleave', function(){
$(this).find('.cover').stop().css({'z-index':'-1'}).animate({'opacity':'0', 'left':'200px'}, 200);
});
$('.close-parent').on('click', function(){
$(this).parents('.cover').stop().css({'z-index':'-1'}).animate({'opacity':'0', 'left':'200px'}, 200);
});;

In your first conditional, try to calculate the position of the offset as:
thisoffset = ($(thumbContainer).outerWidth() - openDivId.outerWidth() - thisoffset);
That way, you're adjusting the appearing square (.cover) when it doesn't fit inside the container, to be as close possible to its rightmost edge: (maximum width - appearing square width - current li position)
Calculated this way, you can animate it with the new offset in positive:
openDivId.stop().css({'z-index':'9999'}).animate({'opacity':'1', 'left':thisoffset}, 200);
See it working here.
For elements that "almost" fit, the current system isn't completely precise because of what I already pointed out in my previous comment: the appearing square, even if it were at 0 opacity, would still be inside the containing element (($(thumbContainer)) or .thumb-over-team) and it would add its width to the total width of the container.
So your conditional may think that there's enough available space in the container to make the expandable element fit, but that would go out of the screen. As an example, notice that there's a horizontal scrollbar from the very beginning, caused by this effect, where your containing .thumb-over-team element doesn't fit in the screen.
But I would say that more precision in this point would require a fresh new approach to your system where the appearing .cover elements were out of the containing ul .thumb-over-team

Fresh take on the problem, essentially based on the main issue: the expandable text block (.cover) used to add its width to the container (.thumb-over-team). This altered the calculations on available container space, and made the text containers go off screen.
The solution is to make sure the expandable .cover elements aren't contained inside the .thumb-over-team element, so they won't impact the calculations on available width.
Here is a JSFiddle containing this new approach: link.
Explanation of how it works:
The idea was to create a separate element called .cover-container and let's put all the expandable .cover elements in there.
We want to associate every image in the li elements in .thumb-over-team with their appropriate .cover (so the first image triggers the first .cover to show, the second image would show the second cover, and so on.) We achieve is by finding out the index of the element that triggered the event:
thisLiIndex = $this.index() + 1
And then selecting the cover in the matching position:
openDivId = $('.cover-container .cover:nth-child(' + thisLiIndex + ')')
The expandable covers shouldn't interfere with the mouseenter or mouseleave events of .thumb-over-team, so we make it to ignore mouse events via CSS:
.cover-container{pointer-events:none;}
Changing from one image to another would automatically trigger new events, so the expanding covers stay visible when the mouse stays on the images, but close automatically when the mouse exits them.
Since the covers are now outside of $(thumbContainer), openDivID.outerWidth() does not alter $(thumbContainer).outerWidth(), and we can use that safely in our positioning.
If I understand the placement that you want, for covers that fit, the position is the current offset (position of the li element that triggered the event) plus the width of the image and some subtle margin
imageWidth + rightSeparation + thisoffset
And for covers that won't fit inside of the screen, we keep them just inside of the screen
thisoffset = $(thumbContainer).outerWidth() - openDivId.outerWidth();

How can I get the element visible in the viewport? jQuery

I have a list of images on a page. As I scroll through the page I would like to show some options in a naviationbar of the image currently in the viewport. Therefore I need to get the image element currently in the viewport, is this possible ?
Jakob

Who says there's just one image in viewport? What would you like to do when there are many?
But otherwise you can always get the scroll position of your container with images as well as your images' top offset to see which one is currently in-view.
So these values will get you to your result
container scroll position
container visible client height
images' top offset
Using these values will make it possible to locate all images in the view regardless whether they're fully or partially displayed (at the top or bottom).
This is a simplified JSFiddle that gives red border around the first fully-in-the-view image. The code does this:
// get top positions and references to all images
var pos = $("img").map(function(){
var $this = $(this);
return {
el: $this,
top: $this.offset().top
};
}).get();
// provide document scrolling
$(document).on("scroll", function() {
$("img").removeClass("first-in-view");
var scroll = $(this).scrollTop();
var i = 0;
while(pos[i].top < scroll) i++;
pos[i].el.addClass("first-in-view");
}).scroll();
This should be optimised to only toggle class when it needs to. Otherwise we have flickering in every scroll. But it demonstrates how this can be done and you can get going from here.
IMPORTANT
It is utterly important that you attach your image position determining process on document load event and not the usually use DOM ready, because you have to wait for the document to load in order for your images to have final positions.

CSS JS Display none alter div

I have a one pager. And in that one pager, I have an item that is set as display:none (fixed side nav in a div).
Can I have it show when scrolling to a certain div?
So it starts out in the code but not displayed, and then when the user scrolls to #about can the side nav show up?

Essentially you will need to check if the user has scrolled to or beyond the div id of about.
First you will need to establish the current Y value of the div.
//cache about div
var about = $('#about');
//this caches the about div position on window load
var aboutPosition = about.position();
Next you will need to determine how far the the user has scrolled. The best way I have determined to accomplish this is with a timer. You could use the scoll event but its far too taxing on the user browser and a timer will be for the most part indistinguishable.
//generic timer set to repeat every 10 mili(very fast)
//with a callback to execute the logic
var checkScrollPos = window.setInterval("scrollTopLogic()",10);
function scrollTopLogic(){
//if about y position is greater than or equal to the
//current window scroll position do something
if(aboutPosition.y >= $(window).scrollTop()){
$('nav').show();
//remove timer since it is no longer needed
window.clearInterval(checkScrollPos);
}
}

You can catch the scroll event of the div and show the element like this
$("#div").scroll(function() {
$("#item").show();
});

Absolute position element left or right depending where it is?

How can I assign absolute left 0px OR absolute right 0px depending on if the absolute positioned div will go outside of its container div.
I guess an easy example of what I mean is: right click in your browser, see it has that menu position to the right of where you click, well not go all the way to the right of the page, instead of going outside of the page, it stays inside of it so it's still visible.
example: (Hover over boxes)
http://jsfiddle.net/ueSNQ/1/

It sounds like you'll need to use script to work the "depending on if the absolute positioned div will go outside of its container div" bit, IE supports css expressions but you're probably after a cross browser solution.
that said it should be a simple matter of something like this
function isOverflow(parent, child){
var left = 0;
var op = child;
while(op && op != parent){
left += op.offsetLeft;
op = op.offsetParent;
}
return ((left + child.offsetWidth) > parent.offsetWidth);
}
function getHoverHandler(parent, child){
return function(){
if(isOverflow(parent, child)){
child.style.marginLeft = 'auto';
child.style.right = '0px';
child.style.left = '';
}
}
}
function attach(o,e,f){
if(o.addEventListener){
o.addEventListener(e, f, false);
}else if(o.attachEvent){
o.attachEvent('on'+e,f);
}
}
var yellowElement = document.getElementsByTagName('UL')[0];
var list= document.getElementsByTagName('LI');
for(var i = 0; i < list.length; i++){
var element = list[i];
var tip = element.getElementsByTagName('DIV')[0];
attach(element, 'mouseover', getHoverHandler(yellowElement,tip));
}

Well Friend,
Try the following steps
1. You have a container div and on right clicking on it you will need to display a div for example say div with list of menus.
2. Have the left position of the container div in a variable **contLeft** and width of the container in another variable **contWidth**
3. Assign the oncontextmenu event handler on the container div.
4. In the event handler function take the mouse x postion in a variable **mosX** and mouse y position in a variable **mosY** and you have to fix the top position of the div to be displayed as mosY and the left as mosX.
5. In order to maintain the div within the container you have to calculate the container's screen occupation as **totPos = (contLeft + contWidth)**
6. Calculate the screen occupation of the menu div as **posMenu = (mosX + width of the div)**
7. If the totPos greater than or equal to posMenu display the menu in the same top and left postion using the values of mosY and mosX
8. Else place the menu in position top = mosY and left = (mosX - width of menu div)
Hope this would solve your problem.

Well first of all if the container div has a position set than position: absolute, right: 0px or left: 0px will be positioned relatively to the container's position. Else it will be positioned to the first parentNode going up the tree from the desired div which has a position, if none is found it will be relative to the body. So you can search the first parent or grandparent container that has a position set. The question is hard to understand so if you would like to share some examples we would be glad to help.
EDIT:
In the example you posted it is exactley like in my comment, calculate the offsethWidth of the parent and the offsetWidth + left to not be overflowing if it is decrease the left or just remove left and set the right positioning. For the same effect on width and height you have to make some cases for the corners.