Why does this static positioned div moves upward from its position? - javascript

This seems a very frustrating issue in my blog. I can reproduce it only in Chrome (60+). The main div (.columns.fauxcolumns) where the header and content are displayed is cropped from the top. Basically it's hidden (overflow:hidden is there) and somehow it is 10-20 pixels upwards from its normal position; flows out of .columns.fauxcolumns, even it (.colums-inner) is static.
How to inspect / re-produce:
Please visit https://sourcewing.blogspot.in/search/label/articles
Control + Click on MORE in the first article (to open in new tab)
Before the page is loaded fully in the tab that you've just opened, click on the tab and DON'T SCROLL the page. SCROLL UP ONLY WHEN PAGE IS FULLY LOADED.
When you'll scroll up, you'll probably find the issue.
You might not find it with just one try as it's produced in this scenario only.
Why is it happening? I know we can somehow fix it but I believe it's not a normal issue as it is observed only in Chrome.
The following screenshot might help:
Note: November 28, 2015 is cropped in screenshot.

I found the issue being the loading class not been removed after the page has loaded. This is something to do with JavaScript. The correct one should be the script should automatically remove the loading class from <body>. Since this being a show-stopper in the presentation, it can be kinda fixed using the following CSS:
.loading .main-inner .columns.fauxcolumns {
overflow: visible;
}

Related

Prevent page from flickering when using javascript and anchor links

I'm using scrollreveal on my website, and it mostly works well, but
sometimes the page is flickering just before the divs reveals and
make it looks like the page is loading, before the code is executed
after loaded http://regen.no/samarbeidspartnere when reloading
the page, you clearly see the problem.
Sometimes when using the #anchor link to a div with the id, the page is also flickering.http://regen.no/start changing between
"forsiden" and "påmelding" the page are flickering before it
jumps to the target div.
Is there any way to solve this issue?
Thanks.
By using the performance tab in Chrome developer tools, I did a recording (changing between two anchor points) and I notice that when a link is hit, the page goes directly there and then the smooth scrolling effect takes place. To describe this with a small example let's say that the user is at #bottom and clicks to go to #top:
The page goes directly to #top
The smooth scrolling effect takes place, so the page goes back to #bottom
Smooth scrolling back to #top
This is why you get this flickering and flashing result.
Maybe you should use a event.preventDefault(); somewhere in your js code.

div relative to change Iframe

I have a payment page that build from main page and third party iframe.
Under the iframe there is a relative div.
My problem is that sometimes the iframe add some warnning messegase at the bottom of it and override the relative div. see links for screen shots: pic1 and pic2
what should I do in order to make my div position will adjusted to the Iframe?
You can´t do this, as the iframe is from another source. So it´s not possible to look at it´s contents, due to cross-domain poilicies.. Your only option is to make the iframe smaller (so a scrollbar gets displayed) or move your "hint" further down.
I guess it´s illegal anyway to modify a payment processors site, by overlaying other content, that suggest, it is part of the payment processors process!
I solve it just by leaving enough space between the iframe and the button, so if the warning messages appears, the button is very close to the messages.

Customize scrollbars for iframe

I was wondering if is possible to customize the scrollbars for an iframe. Both the iframe and the page are on the same domain so there are no issues there. If so, what route should I take and is this something that I should be doing? (design-wise).
I will be updating this as I get it working. Just thought I'd try to get some insight ahead of time.
Thanks
Okay, I ended up getting it working using jScrollPane. The only hangup I had was that jquery.jscrollpane.css needed to be inside each iframe, not outside, which makes sense.
Afterwards, all it took was
$("iframe").each(function(){
var body = $("body",this.contentWindow.document) ;
body.jScrollPane();
});
where the above javascript is present in the parent of the iframe. The jScrollPane js files are also in the parent, not each individual iframe.
Afterwards, the scrollbars are sticky. I solved this by covering the iframe in an invisible element after the scrollbar is clicked and uncovering when released. This was done by
$(".jspDrag",body).on('mousedown',cover_iframes);
$("body").on('mouseup',uncover_iframes);
where cover_iframes and uncover_iframes call the .show() and .hide() of the covering element, respectively.
Now I noticed that when the scrollbar is moved, it is shifted over by the offset of the iframe. I am working on fixing that now.

When loading, the page goes on the bottom of it

I have an issue with my website. My page loads normally in Firefox, but when I use either Chrome or Safari, it goes to the bottom of the page and I don't understand why. I tried putting the following snippet at the beginning of the page, but no luck.
<script>
$(document).ready(function() {
$(document).scrollTop(0);
});
</script>
Why does the page go to the bottom on loading?
When going to your site, I get redirected to http://www.ondinevermenot.fr/#start. That means the page will try to jump to the start element.
However, the start element is absolutely positioned. Therefore, when the page tries to jump down, the start element moves down with it. Therefore the page tries to jump down again. Then the start element moves down more. They keep going down until the bottom of the page, when there is no more room.
To fix it, don't redirect to #start when your page loads.
Because of the strangeness of jumping to something that's absolutely positioned, it's probably handled differently in different browsers.
Try to have your image and other contents put inside div and set the box attribute of the div to margin:auto. works well with HTML5.
i have an alturnative work around for you and incase you ever need to get to the top of the page - you can use this javascript as an alturnative:
((IJavaScriptExecutor)webapplication).ExecuteScript("window.scrollTo(0, document.body.scrollHeight 0)");
however the other option would be to set a start up property: for example document.start("body.height = 0") something along those lines may work.
preferably id use option one as a code to start the broswer at a set height may not work so well for every browser. hope this helps.
I had 2 links to my home page in my footer. When I removed the links from my footer the problem went away.

Repainting a page in Chrome?

I've been looking at using a script I've found online (here) as a basis for a website I'm looking to create. It has an issue in Chrome in that the page wont scroll once a link is clicked, however if I resize the window just a tiny bit the page "repaints" - I think this is the right term - and all is well again.
Is there anyway to do a repaint like this? I don't mean refresh :)! Sorry if this seems a bit vauge, if you try this link in chrome, press one of the links in the header and you'll see the problem when trying to then scroll.
Initially I'm thinking there might be some javascript I can call at the end of switching pages that repaints the page.
Thanks
You could try doing something like this after the slide has completely transitioned to a new page:
Since you've commented that it didn't work as I originally suggested, here's a way to "encourage" Chrome to do the hide/display trick:
$(".slide.loaded.prev").css("display", "none");
setTimeout(function() {
$(".slide.loaded.prev").css("display","");
});
or you could try this:
var slide=$(".slide.loaded.prev");
slide.css("display", "none").height(); // just get the height to trigger a relayout.
slide.css("display", "");
The above code simply finds the previously visible slide, sets the CSS property display to none (hiding it completely) and then removes it. This trick worked when using the Chrome developer tools.
It appears that the scroll bar is for the previous "slide" in Chrome. By toggling the display of the slide briefly, the scrollbar is hidden under the now current "slide's" content.

Categories