Scroll offset after window resize

Off-Topic
1

I am just using the native HTML, CSS and Javascript. Nobody seems to be responding to this question on other forums so I was wondering if anyone could help me with this. Maybe it’s not an easy problem to solve but IDK.

Scroll offset goes off when resizing window. So in my app, I am trying to keep my elements from going offscreen. It works ok when I visit the page but when I resize the toScrollX goes off what I need. If I resize then refresh, this will also work fine. I tried executing the event using the hover event for the tooltip with JQuery and I have tried using a timer to repeat the execution of the function. I cannot get this to work how I want, the toScrollX value goes off as soon as I resize the window. I am using ‘$(document).width() - $(window).width();’ to calculate the amount that can be scrolled.

Here is the code:

var toScrollX;

function setupTooltips() {
$('.tooltip_span').each(function(i, obj) {
$(this).css('display', 'inline');
$(this).css('position', 'absolute');

var toScrollX = $(document).width() - $(window).width();
console.log(toScrollX);
if ($(this).offset().left < 0) {
$(this).css('left', (($(this).width() / 2) - toScrollX));
} else if ($(this).offset().left + $(this).width() > $(window).width()) {
var toSetLeft = $(document).width() + toScrollX - $(this).width();
$(this).css('left', toSetLeft);
}

$(this).css('display', '');
$(this).css('position', '');
});
}

Thanks

2

JQuery :

var top = window.pageYOffset || document.documentElement.scrollTop; left = window.pageXOffset || document.documentElement.scrollLeft;

3

[quote=231277:@Michel Bujardet]JQuery :

var top = window.pageYOffset || document.documentElement.scrollTop; left = window.pageXOffset || document.documentElement.scrollLeft;[/quote]
I’m going to try this. Strange how you get responses quicker on the xojo forum than on the HTML and CSS CodingForum.Thanksyou very much

4

Perhaps other forums are just places where people sometimes use the same tools but remain strangers…

5

[quote=231277:@Michel Bujardet]JQuery :

var top = window.pageYOffset || document.documentElement.scrollTop; left = window.pageXOffset || document.documentElement.scrollLeft;[/quote]
I am still having problems how would I alter the code to use the ‘left’ variable. Thanks

6

As an example, this will display the values of Top and Left in the JavaScript console (programmer’s tools) when you scroll :

<body onscroll="top  = window.pageYOffset || document.documentElement.scrollTop ; left = window.pageXOffset || document.documentElement.scrollLeft;console.log(left+' '+top)">

To put the vertical scroll back where it was before resize, you can add this event in the Body tag :

onresize="window.scroll(left,top)"

That way the page does not scroll when you resize.

7

[quote=231322:@Michel Bujardet]As an example, this will display the values of Top and Left in the JavaScript console (programmer’s tools) when you scroll :

<body onscroll="top  = window.pageYOffset || document.documentElement.scrollTop ; left = window.pageXOffset || document.documentElement.scrollLeft;console.log(left+' '+top)">

To put the vertical scroll back where it was before resize, you can add this event in the Body tag :

onresize="window.scroll(left,top)"

That way the page does not scroll when you resize.[/quote]
This does not seem to fix my problem. Is there anything else that you may have presumed I missed. Thanks

8

I don’t know what you are doing, but this does stabilize scroll here :

<body onscroll="var top  = window.pageYOffset || document.documentElement.scrollTop ;left = window.pageXOffset || document.documentElement.scrollLeft" onresize="window.scroll(left,top)">

It is as simple as what you would do in Xojo applying the previous scrollposition to ScrollTo.

9

Basically, I have tooltips and I do not want them to go offscreen. So if the right of the tooltip is past or at the edge then it will decrease the position to something that is not offscreen. That code in the OP works.

The CSS might help you understand better. The span is of absolute position which I believe means that the ‘left’ is relative to the whole page.

a.tooltip { outline:none; }
a.tooltip strong { line-height:30px;}
a.tooltip:hover { text-decoration:none;} 
a.tooltip span {
    float: top;
    z-index: 10;display: none; padding: 14px 20px;
    width: 60%; line-height: 16px;
    transform: translate(-50%, -100%);
}
a.tooltip:hover span {
    display: inline; position: absolute; 
    border: 2px solid #FFF;  color: #000000;
    background: white repeat-x 0 0;
}
/*.callout {z-index:20;position:absolute;border:0;top:150px;left:120px;}*/
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:2px;        
    box-shadow: 0px 0px 8px 4px #666;
    opacity: .9;
}

The issue is that it does not reposition accordingly when I resize the window. But if I resize the window and then refresh, it will give me the results I wanted from having that particular window size but that’s only the case if the page is refreshed. Not sure if scrolling the page would make a difference.

I used this code so the position worked as if it was hovering and if display is set to none then it will not have the scroll offset needed to set the variables correctly:

$(this).css('display', 'inline');
$(this).css('position', 'absolute');

This code is to set it back to the default:

$(this).css('display', '');
$(this).css('position', '');

Does that make sense? Thankyou

10

You requested the offset in your title. That is what the JavaScript code I posted provide.

Now it appears you do not use JavaScript but CSS. I cannot really help you set those parameters. You will have to work on that yourself.

However, since you mention it works when you reload, check this way of doing it in JavaScript :
http://www.w3schools.com/jsref/met_loc_reload.asp

11

[quote=231371:@Michel Bujardet]You requested the offset in your title. That is what the JavaScript code I posted provide.

Now it appears you do not use JavaScript but CSS. I cannot really help you set those parameters. You will have to work on that yourself.

However, since you mention it works when you reload, check this way of doing it in JavaScript :
http://www.w3schools.com/jsref/met_loc_reload.asp[/quote]
Thanks. Using the reload function actually works but there is a delay in the refresh.