Scrolling to display overflowing element on hover in javascript - javascript

In a web app I have a div with tooltips that are displayed only when hovering over certain objects of the page. These tooltips can overflow out of the div. When this happens, the scrollbars appear on the page as expected.
The issue is that the user cannot scroll with the mouse, because doing so moves the mouse out of the hovering element, so the tooltip disappear, and the window resizes down to the original size (so the scrollbars disappear too).
Here is a mock example of a similar behaviour :
I tried to use scrollIntoView for putting the object into the view, but again this works for a fraction of seconds, as the automatic scrolling of the page to put the element into view moves the mouse out of the hovering element and causes the tooltip to disappear.
Is there a way to always keep the biggest frame size ? This way the user can scroll into the right view before hovering over the elements so that they are displayed entirely.

Got it working by using ResizeObserver.
I defined this function in the source of the web app :
parent.set_size = function(height, width) {
const iframe = document.getElementById('your-iframe');
iframe.style.height = height + "px";
iframe.style.width = width + "px";
}
and then in the page loaded in the iframe I defined something similar to :
$(document).ready(function() {
// set the div which has a dynamic size depending on whether or not the tooltip are displayed
var map_div = document.getElementById("map")
// set the initial size
parent.set_size(map_div.scrollHeight, map_div.scrollWidth);
var max_height = map_div.scrollHeight;
var max_width = map_div.scrollWidth;
// when the size changes, keep the biggest size
var ro = new ResizeObserver(entries => {
for (let entry of entries) {
max_width = Math.max(entry.target.scrollWidth, max_width);
max_height = Math.max(entry.target.scrollHeight, max_height);
parent.set_size(max_height, max_width);
}
});
ro.observe(map_div);
});
This way the iframe always keep the biggest size it get to, which allows scrolling to the correct position before displaying the tooltip.

Related

Prevent scroll in Google Calendar after appending DIV via Chrome Extension and creating/canceling new calendar event

I'm writing an Chrome Extension for Google Calendar, which adds an div under the header section of Google Calendar.
For simplicity, this is what essentially happens in Chrome Extension content script, you can just paste this code in the console of calendar.google.com to check what happens:
let header = document.querySelector("header[role='banner']");
let appContainer = document.createElement('DIV');
appContainer.style.height = '200px';
appContainer.style.backgroundColor = 'red';
header.parentNode.insertBefore(appContainer, header.nextSibling);
The problem I experience is, after creating or canceling the creation of an event in calendar view, the window scrolls up and doesn't show the page header now.
Anyone have an idea how to keep page steady after creating or canceling of an event in calendar view, and keep the div I append via Chrome Extension content script too?
EDIT: Here are screenshots of how it looks like before the event creation/cancel and after:
Normally, without your extension, header.parentElement contains two elements that count towards header.parentElement.clientHeight: header, and the div that contains the calendar itself:
(It also contains a few floating buttons and hidden divs and stuff, but those aren't important here.)
These two elements, header and calendar, have heights that are calculated specifically so that header.clientHeight + calendar.clientHeight is equal to the height of the page. Under normal circumstances this is perfect since it means there's no need for scrolling.
However, in your case, that you add an extra div, which pushes calendar down:
Normally you would be able to scroll down yourself to see the bottom of calendar, but since the scroll bar is disabled, you can't. However, when you create an event, your browser sees that you are trying to access the bottom of calendar, so it scrolls down automatically to show you the bottom of calendar. Since the whole page is now scrolled down to make the bottom of the page visible, the top of the page is now invisible, resulting in the behavior that you describe.
The way to fix this is to make adjust the height of calendar so that header.clientHeight + appContainer.clientHeight + calendar.clientHeight is equal to the height of the page, rather than just header.clientHeight + calendar.clientHeight. This can be done by adding the following code:
//Getting calendar can be a bit tricky since it's just one dive among others.
//While it does have a CSS class, I don't know how that name is determined or if it will change in future versions of Google Calendar, so it's best not to use it.
//What I do here instead is that I select the first child of header.parentElement that has parts outside of the page frame
const getCalendar = () => [...header.parentElement.querySelectorAll(":scope > div")].find(d => {
let boundingRect = d.getBoundingClientRect();
return boundingRect.y + boundingRect.height > document.body.clientHeight;
});
let calendar = getCalendar();
//This function adjusts the height of calendar
const adjustHeight = () => {
calendar = calendar || getCalendar(); //calendar may be null in the beginning before all the elements were set, so if it's null try to select it again
if(calendar != null){
calendar.style.height = (calendar.parentElement.clientHeight - header.clientHeight - appContainer.clientHeight) + "px"; //Adjust the height of calendar
}
};
window.addEventListener("resize", adjustHeight); //Adjust the height whenever the window gets resized
window.addEventListener("load", adjustHeight); //Adjust the height on page load

Removing extra space in html page

I am currently implementing a tool for a project, and I am having some difficulties to remove some extra space at the bottom of the main container.
Basically, the container that contains the drawings-list and the map, resizes itself on window resize event. The bottom bar is fixed, so it does not affect anything.
$(window).on('resize', function () {
resize();
});
function resize() {
var height = $(window).height();
var width = $(window).width();
var mapHeight = height-260; // 260 for fixed elements
var mapWidth = width-360; // 360 for left hand side list
$('.map-drawings-container ul').height(mapHeight);
$('#map_parent_container > .map').height(mapHeight);
$('.drawings-list').height(mapHeight);
}
When the page is first loaded, it renders properly. Then when shrinking it, we can see a space that seems to be equal to the difference between the original page height and the current one.
Changing the size of the html and body element does NOT fix the issue.
Using the Google Chrome Dev tool, I am not able to select that grey background.
Changing margin-bottom to a negative value on the main container does not remove that space either.
Any clue on how to get this space removed?
Thanks
Sure you don't have an element inside that extends beyond the body with a min-height set on it. This would push the sticky footer down when the body shrinks below that min-height creating the extra space?
Look for all elements with a min-height and try shrinking them.
When the page is first loaded, it renders properly. Then when
shrinking it, we can see a space that seems to be equal to the
difference between the original page height and the current one.
May problem is: resizing the page so try that:
$(window).resize(function(){
var height = $(window).height();
var width = $(window).width();
var mapHeight = height-260; // 260 for fixed elements
var mapWidth = width-360; // 360 for left hand side list
$('.map-drawings-container ul').height(mapHeight);
$('#map_parent_container > .map').height(mapHeight);
$('.drawings-list').height(mapHeight);
});

Using javascript to find the page number of the current view page in an iboooks epub

I am building a lightbox style div element for an ibooks epub. I want the div to be displayed on the current page being viewed at the time. If the image is on page two of the ebook, I want the lightbox to showup on page two. I have the div width and height set to fill the screen.
document.getElementById("LightBoxDiv").style.width=window.innerWidth+"px";
document.getElementById("LightBoxDiv").style.height=window.innerHeight+"px";
I can manualy set a fixed top value of the div if I know which page number an image is on. My device has a 460px height on the window. So for an image on page two, the top should then be 460 which is the beginning of the 2nd page.
document.getElementById("LightBoxDiv").style.top="460px";
However, as ebooks are dynamic in that the user can change the size of the text larger or smaller, the page upon which something might fall changes. I need a way to set the top dynamically based upon the current page. If I know the current page number being viewed, I can set the div top to
var lighboxHeight = (pagenumber-1)*window.innerHeight;
I tried using the window.pageYOffset to calculate the current page, but this always gives a 0 value as the page does not scroll in an ebook. Unfortunately, I can find no documentation or any reference describing how to use javascript to access the page numbers. Does anyone have any idea how to access or find the current page number in an ibooks epub using javascript?
Thanks,--christopher
I believe I found the solution. This question/answer helped a lot.
//window height
var winHeight = window.innerHeight;
//top of object to be placed in the lightbox
//can be any object
var curOjbTop = document.getElementById(svgId).getBoundingClientRect().top;
//body y value
var bodyTop = document.body.getBoundingClientRect().top;
//amount the object is shifted vertically downward from the top of the body element
var offset = curObjTop - bodyTop;
//page number of the object
//this is actually 1 less than the true page number
//it basically starts the page count at 0, but for actual page number add 1
var curPage = Math.floor(offset/winHeight);
//this sets the top edge of the lightbox at y=0 on the page the item is on
var lightboxTop = curPage*winHeight;
document.getElementById("LightBoxDiv").style.top=lightboxTop;
My lightbox div covers the entire viewing area, but if you wanted a smaller one that was centered, you would need to add an additional half of the window height and then set the top margin to be half the negative amount of the height you wanted.
For example if the light box was 200 x 200, then your lightboxtop would be
var lightboxTop = (curpage*winHeight)+(winHeight*.5);
var topMargin = "-100px";
It may need to be tweeked some, but overall it should work to determine a page number.

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.

Fit image to width using fixed positioned button

I have a page with the following functionality: there is a large image that generates scoll (both horizontally and vertically) and a button in a fixed position (it remains in the top left corner, even with scroll) that, when clicked, fits the image to the client width.
Since position: fixed is not supported in Internet Explorer 8, I used a workaround - this is the function:
function setFixedPosition(jqueryWrapper, pixelsFromTop, pixelsFromLeft) {
jqueryWrapper.css('position', 'absolute');
var setOffsets = function() {
jqueryWrapper.css("top", (($(window).scrollTop() + pixelsFromTop) + "px"));
jqueryWrapper.css("left", (($(window).scrollLeft() + pixelsFromLeft) + "px"));
};
setOffsets();
$(window).scroll(function() {
setOffsets();
});
}
setFixedPosition($('#zoomFitButton'), 15, 15);
This is the button's action:
$('#zoomFitButton').click(function() {
$('img.preview').css('width', '100%');
});
The button remains fixed both in Firefox 13 and IE8.
But, under IE8, if I am scrolling somewhere, then I click the button, the button moves to a "strange" position:
If I scroll vertically, then click, it puts the button in the lower-left corner;
If I scroll horizontally, then click, it puts the button in the upper-right corner;
If I scroll both ways, then click, it puts the button somewhere in the center.
In Firefox, the button always remains in the upper-left corner (the place where I expect it to be), even after I click the fit to width button.
Here is a test page.
Is my code OK for this functionality (in principle), or I need to add something to the fit to width action (to fix my button positioning); or there is something wrong with IE (and I need a workaround - if so, any suggestions?)?
Thanks.
I found a solution that works in IE6 also.
I think the problem has something to do with IE not updating the scrollTop and scrollLeft positions after the document is resized.
So, after I resize the picture, I have to scroll to the upper-left corner (scrollTop(0) and scrollLeft(0)).
Unfortunately, if I have a large picture that needs vertical scrolling even when it's fit to width, the workaround brings me to the top of the page. So I added code to bring me back proportionally to the aproximate position I was before. I wrapped the logic in a more generic function:
function doSomethingThatAffectsScrollPosition(affectingScrollPositionFunction) {
var oldDocumentWidth = $(document).width();
var oldScrollFromLeft = $(window).scrollLeft();
var oldDocumentHeight = $(document).height();
var oldScrollFromTop = $(window).scrollTop();
affectingScrollPositionFunction();
var newDocumentWidth = $(document).width();
var widthRatio = (newDocumentWidth / oldDocumentWidth);
var newScrollFromLeft = (oldScrollFromLeft * widthRatio);
var newDocumentHeight = $(document).height();
var heightRatio = (newDocumentHeight / oldDocumentHeight);
var newScrollFromTop = (oldScrollFromTop * heightRatio);
$(window).scrollLeft(0); // Needed for button repositioning
$(window).scrollLeft(newScrollFromLeft);
$(window).scrollTop(0); // Needed for button repositioning
$(window).scrollTop(newScrollFromTop);
}
And I used the function in the fit to width button's action:
$('#zoomFitButton').click(function() {
doSomethingThatAffectsScrollPosition(function() {
$('img.preview').css('width', '100%');
});
});
Here is a test page.

Categories