We Keep Coding

Display Tooltip if element is visible within the viewport

after a little advice. I'm working on my portfolio and I'm using a css transition to animate an element with some contact information which becomes active when the user scrolls up.
Within this element there is a figure class element called '.top-bar-avatar' which I have added a tool-tip and bounce animation too. This is all working but what I would like to achieve is for the tool-tip to automatically display and animation to fire when the figure is displayed within the web browser.
HTML
<li><figure class="top-bar-avatar"><img src="img/nick_avatar.png" alt="Top Bar Avatar Image Of Nick" title="Find Out More About Me" data-toggle="tooltip" data-placement="bottom"></figure></li>
JS
$('[data-toggle="tooltip"]').tooltip();
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward code here
$('.top-bar').addClass('top-bar-animate');
}else{
//downward - code here
$('.top-bar').removeClass('top-bar-animate');
}
lastScrollPosition = newScrollPosition;
}
Tried a few different ways of doing this with yet to succeed. Any advice would be appreciated. Cheers in advance

I seem to have resolved this myself, i simply added and removed the display attribute and modified it's value within my existing code, see below.
Oh I also added a div id called 'profile-pic' to the image element, rather than focus on the figure class it's contained within.
var lastScrollPosition = 0;
window.onscroll = function() {
var newScrollPosition = window.scrollY;
if (newScrollPosition < lastScrollPosition){
//upward code here
$('.top-bar').addClass('top-bar-animate');
// display tool-tip when top-bar animates in
$('#profile-pic').tooltip('show');
}else{
//downward - code here
$('.top-bar').removeClass('top-bar-animate');
// hide tool-tip when top-bar animates out
$('#profile-pic').tooltip('hide');
}
lastScrollPosition = newScrollPosition;
}

Scroll to the Bottom of Dynamic Div

I have a div with id "page-content", it does not have height or width, it just have a blank div.
I'm filling that div with content dynamically, so the div height is growing constantly, I'm making a chat, and i want to detect if I am at the bottom of the div or in the last 10% of the div total height, If true, scroll to the bottom
var box = $('#page-content');
if (box.scrollTop() > (box.height*0.90))
box.scrollTop(25000); // This is the top bottom
What I'm trying to do is, check if you are in the last 10% or less top bottom height of "#page-content" div (not when I'm reading "old messages" at the beginning of the Div), I have a function that appends new messages but I need to scroll down manually to see new messages...so i want to automatically scroll to the New bottom so i can see the new message :)
UPDATE:
function getChat() {
$.ajax({
type: "GET",
url: "refresh.php?lastTimeID=" + lastTimeID
}).done( function( data )
{
var jsonData = JSON.parse(data);
var jsonLength = jsonData.results.length;
var html = "";
for (var i = 0; i < jsonLength; i++) {
var result = jsonData.results[i];
html += '<span class="color-'+result.color+'"><b>'+result.usrname+'</b></span> <i class="fa fa-angle-right"></i> '+result.chattext+'<br>';
lastTimeID = result.id;
}
$('#page-content').append(html);
if(html!="")
{
// Here i need to check if the scroll position is in the bottom or in the last 10%
//then this to scroll to the top bottom (25000 is height limit)
$('.page-content').scrollTop(25000);
}
}); }

The trick is that inside the container for your messages (in your case the #page-content DIV), you can have an invisible placeholder div with some id set on to it.
In this demo JSFiddle, as you click on the anchor .addItem, after the new item is added to the container, the placeholder div is moved to the end of the container. This ensures at the same time that clicking on the .addItem brings the bottom of the container DIV into view (as it refers the id of the placeholder in its href attribute).
function scrollToBottom(container) {
// get all the child elements of the container
var children = container.children('.item');
// move the placeholder to the end of the container
$('#contentBottom').insertAfter(children.eq(children.length - 1));
}
Update
In order to determine your current scroll position, you should listen to scroll events in the container. Meanwhile, you should take into account the updated height value of the container when new messages arrive.
Check out this updated fiddle in which I'm checking if the current scroll position is beyond 60 % from the top to easily see the effect.
Note: If a new message comes when you are not scrolling, you can simply do $('.container').scrollTop(25000) in the same function/block of code that appends it to the container.

there is a trick in scrolling the page to bottom of DIV, i tried implementing it in this fiddle.
See $(window).height()+$(window).scrollTop() will always be equal to the total height(including paddings,margins) of children of the window, in our case it is equal to the $('#page-content').height()+margin/padding.
CSS:
div#page-content {
height:600px;
border:solid 1px red;
}
in our situation:
$(window).height()+$(window).scrollTop()=$('#page-content').height()+(margin/padding)=600px
so whenever we scroll it, we can attach an scroll() event to the div and easily check whether we are in in the last 10% or less top bottom height of "#page-content"
$(window).on('scroll',function(){
if($(window).height()+$(window).scrollTop()>=($('#page-content').height()*(.9))){
$(window).scrollTop($('#page-content').height()-$(window).height())
}
})
Good luck.

Since I did not make this, I don't want to take credit for it.
There is a jQuery plugin that makes anything that has a scroll bar scroll to a specific location or to an element. Since you want to scroll to a dynamic div, you can call this after you created the div and it will scroll to that location.
You can find the plugin over here.
You can find a demo of the plugin in action over here.
Hope this was what you are looking for.
-W

class is being removed from a div

The OpenERP web interface relies heavily on javascript, QWeb, jQuery (I think), and css.
The default view has a black menu bar along the top, a side menu bar along the left, and the rest of the screen for the content being served.
The issue I was trying to "fix" is that it is displayed as one large page, meaning if you scroll the page the top menu and side menu also scroll off.
I have a nearly working solution:
adjust top menu bar to be fixed
adjust side menu bar to be fixed
adjust remainder to take up the remaining space
In order to do that I also had to add a new css class, which I called oe_main_window, and located the code which sets up the view to add oe_main_window to the div with the class oe_view_manager_current.
This works fine for primary views.
However, if I click on a link in a primary view, say to show a product, it removes the oe_main_window class and messes up the display. If I go into developer tools and add oe_main_window back the display is again correct.
I have tried searching for where this is happening, but so far have failed to locate the appropriate code either to not remove the new class or to add it back after the transition.
Any ideas?

You can find how to put a breakpoint on DOM mutation here:
https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-mutation-events
mainly it's opening the chrome dev-tools using F12, right click on your div and click "Break on...>> Attributes modifications"

The final solution to the problem involved targeting the first oe_view_manager found. Here's the (clumsy) JavaScript:
function addOeMainWindow() {
var newChildren = [];
var currentChild, getAttr, oldClass, newClass;
var i;
for (i=0; i<document.childNodes.length; i+=1) {
newChildren.push(document.childNodes[i]);
}
while (newChildren.length > 0) {
currentChild = newChildren.shift();
getAttr = currentChild.getAttribute;
if (getAttr !== undefined) {
oldClass = currentChild.getAttribute("class");
if (/oe_view_manager/.test(oldClass) && !/oe_main_window/.test(oldClass)) {
newClass = oldClass + " oe_main_window";
currentChild.setAttribute("class", newClass);
return;
}
}
for (i=0; i<currentChild.childNodes.length; i+=1) {
newChildren.push(currentChild.childNodes[i]);
}
}
return;
}

How to stick a div at the bottom of the page while scrolling after checkbox is checked

Usually I don't ask questions...I'm looking for a solution until I give up,
and this is the case here.
There are many similar questions to my but after a thorough search I found nothing.
So the question is:
After selecting a checkbox the div at the bottom of the page
shuold be sticky untill the user scrolling down to the original place where it was.
I have a great example from kickstarter web site :
If only I could know how they do it :)
If I was not clear enough I'd love to explain myself better.
Thanks in advance

After clicking on checkbox,
You can add these CSS lines to div
position:fixed;
bottom:0;

you want to add position: fixed and attach it to the bottom of the container when checked
html
<div class="wrapper">
<input type="checkbox" id="check"/>
<div id="foot"></div>
</div>
js
var check = document.getElementById('check');
var foot = document.getElementById('foot');
check.addEventListener('change', function () {
if (check.checked) {
foot.style.position = 'fixed';
foot.style.bottom = 0;
}
});
fiddle - http://jsfiddle.net/qak2ept6/
EDIT - http://jsfiddle.net/qak2ept6/1/ restore when unchecked
EDIT EDIT - http://jsfiddle.net/qak2ept6/3/ attach on scroll

when you check the check box. create div with position fixed and store the offset of the bottom edge of the window that would be normally your window height. Assign scroll event and keep checking if the scroll value is equal to the offset you have stored and when it reached just remove the fixed position from the div.

My guess (and if I was doing it) It'll be done by monitoring scroll position and applying a css style or not accordingly.
Something like
Inject it in invisible state in to the document
Note it's position (y coord)
Apply class to make it stick to the bottom of the window and show
On scroll, as soon as you get near the expected yCoord, remove the class and let it assume it's rightful place in the document
On further scroll (when you scroll away), re-apply class until you scroll back
HTH

If i have understood your question, I guess what you want is here
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
If not, please explain us with more code and what exactly you need

Adjusting the position of FB.ui() dialog box

I'm using Fb.ui() to post an update to user's wall but the dialog always appears in the same spot in my browser (center middle if scrolled up). The problem is that I'm opening the dialog from the bottom of the screen. Is there a way to get the dialog to show for the user's current scroll location?

The FB.ui() dialog should already be positionned relative to the place the user scroll currently is.
If not, you can simply position your #fb-root in CSS :
#fb-root { position:fixed; top:10%; }
That way, the pop-in will always be on the scroll position of the user and also follow it if he continue to scroll up or down the page.

I'm using this piece of code to set the dialog position to the top of the page, but you can use it to set the position anywhere you want. This code uses the jQuery library
setInterval(function(){
var dialog = $('.fb_dialog');
for(var i = 0; i < dialog.length; i++)
{
var d = $(dialog[i]);
if(parseInt(d.css('top')) > 0 && parseInt(d.css('top')) != 195)
{
d.css('top', '195px')
}
}
}, 500);

The facebook write the dialog html code to the <div class="fb-root"></div> so if you surround it with a <div style="position: absolute;"></div> the dialog appears where you put this code.
For example:
<div style="position: absolute">
<div class="fb-root"></div>
</div>