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.
Related
I'm placing a form (that I host) on this demo page (cross-domain).
I can add code on both parent and child.
The iframe auto-resize works perfect (using iframe-resizer), but when submitting the form on mobile or desktop with narrow window (so longer scrollbar) the thank you message is not visible right away. You need to scroll the parent page up a bit to see it which may cause confusion to people.
The iframe is perfectly shrunken down to the right size, but somehow need to do a custom postMessage to tell the parent to scroll/jump their page up to the top of the embedded iframe.
Any thoughts on how to use the already existing iframe-resizer script or can i just do a postMessage without it, if yes how?
Thank you in advance!
Have you tried
document.getElementById('thankyou').scrollIntoView()
Im working on a Meteor POS project at the moment. (for people who don't know Meteor is a framework and can use javascript/jquery and all kinds of web app scripting). The application is suppose to be a full screen POS that does not need to scroll at all, but only the area which entered products needs scrollbar (iframe).
I ran into a problem that I don't know how to solve, which is how to disable overflow on the entire page but not the iframe. There are a few things I have tried but failed:
Setting body to overflow: hidden and iframe auto. Which of course it doesn't work because the entire body is not able to show the scroll bar and iframe is embedded within.
using onmouseenter (mouseover) and onmouseleave (mouseout) to listen for changes and using javascript or jquery to toggle between hidden or auto. I tried and even console logged but it doesn't want to work in meteor.js for some reason. Even if it worked I think the main page scroll bar will show too which I don't want.
Here is an image, the top and bottom is part of the body and the middle part filled with items are using iframe.
Thanks for any help!
It has been answered by axel.michel in the comment.
It was a better solution overall than using iframe.
Thanks!
Is there any way to stop a link to a page anchor within an iframe from causing the parent page to scroll too? I thought setting overflow:hidden for the page would solve the problem but it didn't make a difference, just meant there was no scroll bar to scroll back up. I tried the solution detailed here but this also didn't help. I have searched several other forums for a solution but the answer I've come across has been to use the Javascript scrollTo(x,y) function for each link to balance out the effect of both the parent page and iframe scrolling but this seems messy and also incredibly difficult to implement on my site as there are several html pages each with several links to anchors. Is there any more efficient way of preventing this?
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.
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.