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!
Related
I want to be able to click on a link in my HTML website and when I load onto the other website to be in the same position. Say you are in the middle of a website when you click the link I want to be in the middle of the website when I load onto that link. Is there anyway to do this? Sorry if this is confusing.
I'm sorry for the confusion, but I meant if you controlled both web pages. My bad.
There's no way unless you have control over the linked site.
Scrollbar is rendered by the browser based on overflow-x or overflow-y attributes, if you have no control over the linked site's code, you can't force it to present a scrollbar or scroll to a specific position(which requires javascript code to be executed)
If you have access to the linked site's code, you can send the ID of the element you want to scroll to through the url as a parameter like this:
https://example.net#mydiv
and then, at the linked site, just add this javascript code to scroll to the element:
$(window).load(() => {
const divID = window.location.hash;
document.getElementById(divID).scrollIntoView();
});
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()
This is a problem which only started today with zero code changes to the pages CSS, so i have a suspicion that Recaptcha changed its code, but i cant see anyone else being affected by this.
When i click on the "I'm not a robot" for a recaptcha thing on my website, the popup that gives the "Select all images with x" response is being positioned on the wrong side of the captcha box and this is causing half of it to be hidden because it goes over the screen on low resolutions.
The other problem i found, is that if you scroll the webpage down, and click on a recaptcha element that requires you to scroll, the popup no longer appears next to the element.
So my question is, can i force a style onto this popup? it has no class or element ID.
Also is anyone else having this problem, or experienced it before?
The reCaptcha uses an iframe to load. Google doesn't give much for customization of their module. Try adding the data-size="compact" attribute to the loading div. It is the only other option they offer. Trying to enforce styles on the module gets really messy, really fast.
<div class="g-recaptcha" data-size="compact" data-sitekey="your_key"></div>
There is another option, use the css transform to scale the iframe.
https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/
<style>#media screen and (max-height: 575px){
#rc-imageselect, .grecaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;-webkit-transform-origin:0 0;}
</style>
Target the entire iframe of popup with css (However the recaptcha does not assign any id or class to the iframe parent div so it will only work if you have only 1 frame in the page)
div iframe{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
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.
in my web page there is a chat window. When the chat's log is filled out, the user uses scrollbar in order to navigate between messages. I want my chat frame to present always the last message that is located at the bottom. How can I do this using CSS, JavaScript?
Thanks,
Tomer
Even thou is not a tag on your question here is a jQuery solution i use for my chat web app:
//Where chat_message_tray is the scrollable div in your chat
function chat_scroll(chat_messages_tray){
var scroll_amount = $(chat_messages_tray).attr("scrollHeight") - $(chat_messages_tray).height();
$(chat_messages_tray).animate({ scrollTop: scroll_amount}, 500);
}
DOM elements (the good ones, anyway) support a method called scrollIntoView(). If you have a reference to the DOM element corresponding to the last chat entry (a <div> or whatever) you can use scrollIntoView() to tell the browser that its surrounding content should be scrolled in order to make the <div> visible.
Now, with some complicated (or not-so-complicated, maybe; perhaps just unlucky) page layouts, I've had to contend with Internet Explorer wanting to scroll the wrong thing, or just do something weird to the page. The nature of a thing like scrollIntoView() is such that you're letting the browser decide exactly how it wants to do that scrolling. Generally, with fairly simple content in a simple scrolling container (one with "overflow: auto" and a fixed height, basically), it does work however.
http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
3rd result from Google - 'div scrollbar bottom'