How do we ignore <body scroll="no"> in MS webbrowser control - html

Problem we are trying to solve is: The vertical scroll bar is intentionally disabled in HTML code (by others), but users with larger Monitor screens are setting display to be larger than 100% in Windows causes clickable elements to be outside the the display of the webbrowser control when those pages are opened.
We need a way to reactivate the scroll bars when this occurs.
We have no control or authorship over the web page being opened.
Even though we have scroll bars enabled for the webbrowser control, the only thing we have seen so far that might explain why there is no vertical scrollbars displayed is the Body line at the top of each page. that says:
<body id="BuildingSelect.asp" topmargin="0" scroll="no">
My question is:
Is there a way to tell the MS webbrowser control to ignore the 'no scroll bars' command coming from the web page itself?

You can do it using javascript. Try adding the following code before the closure of the body.
<script>document.body.removeAttribute("scroll");</script>

Related

Saving changes made with Google Developer Tools

I'm trying to access page(s) on a website. The pages are loaded via a ribbon navigation across the top of the page (which is always present), which then loads the data in a div container below.
The ribbon/navigation bar SHOULD allow me to scroll left and right - to access other links, and thus other pages - but the scroll button isn't appearing. I can overcome this problem by using Developer Tools and making the navigation bar much wider (editing the width attribute), thus revealing the links that otherwise remain hidden.
Problem: when I change the CSS to allow access to the 'hidden pages', and then click to load a new page (or new set of data, rather), the new page is loaded, and the navigation bar reverts to its shorter, original state.
Is there any way of preserving my change to the page's CSS?
This is NOT my website. I have contacted the owners, but they have not answered yet.

Scroll bar formatting in HTML/CSS

Source: http://www.salefee.com/
There is an issue with the scroll bar on http://www.salefee.com/. I have tried to increase its width using inspect element option in chrome. But I am not able to find the same code in index.html(The code for scroll bar which is showing in inspect element option is not there in html file). I have tried to add scroll bar functionality by adding codes for it in html file but the changes are not reflecting on the website. Can you please help me with this scroll bar issue. I want to increase the width of scroll bar.
Thanks in advance!!
The scrollbar width is set via .niceScroll() plugin inside your main.js file.
Change the cursorwidth parameter to desired value.
Plugin's documentation on GitHub
$("html").niceScroll({
cursorwidth: "5px"
})
It may be possible that your code is generating on run-time that's why you can't see in your code. can you paste your code here ?

How to programmatically scroll HTML elements in a QWebView?

I'm developing a browser with touch screen support using Qt 5.4 and WebKit (I'm not using QML at the moment). Currently I'm implementing the touch scrolling and so far I managed to scroll the page's main frame. However, I'm having a hard time trying to figure out how to scroll its HTML sub-elements such as iframe, textarea, div, etc.
This is because I know how to scroll the main frame (I can call webView->page()->mainFrame()->setScrollPosition(QPoint(x, y));), but not how to scroll the web elements.
I imagine that with JavaScript injection it might be possible to check if an HTML element is scrollable and call a function that scrolls it, but this doesn't seem to be that elegant. Is there a way to this using only C++/Qt code?
I spent a lot of time grappling with this issue. Finally I just used a single line of Javascript and was done with it.
webView->page()->mainFrame()->evaluateJavaScript("window.scrollTo(0, document.body.scrollHeight);");
Plus, if Javascript is such a standard these days, why can't you rely on it inside a QWebView?
The Javscript to scroll a web element would be something like:
var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;

inspect script in chrome debug without losing ability to scroll webpage

When I have some breakpoints set up in a script google chrome removes the ability to scroll the webpage, saying at the top of the screen Paused in debugger. Is there a way to disable this so that I can look at elements in various parts of the page, while also looking at the script in the debugger?
Taken from here.
An easy workaround for the scrolling lock-up is to just jump to the console, and:
window.scrollTo(0, 800). (Replace 800 as needed)
You can click on the Elements tab and then hover over the HTML to the element you are interested in and right click to "Scroll into view". Not the most natural and fast, but it works...

Seamless FRAME/IFRAMEs (with reasonable scrollbars)?

Summary:
I'd like to display a shopping cart from another domain underneath my fixed content in my page - and have the scrollbars come out properly.
Details:
I need to display a shopping cart from a vendor within a page on "my" site with "my" header on top. (Eventually the shopping will all be in a subdomain but not now, sigh.) The header is a fixed height. The shopping cart pages vary in height as you navigate within that frame.
I've tried frames and iframes and had cross-browser issues with the iframes. I'm only testing four configurations, Windows/IE, Windows/Firefox, Mac/Safari and Mac/Firefox.
Right now I am using a frameset with two frames, one containing my fixed-height header page, the other containing the external page. This does work - the one issue is that when a scrollbar appears it (of course) only appears on the bottom frame.
This will do and the client isn't very sophisticated but it bugs me.
If I use IFRAMES, I find I need to sprinkle height: 100% and overflow-y: auto in various places - and yet I still cannot avoid either one of two unacceptable issues that appear in at least one of the browser/OS combinations...
The combined content is larger than the window, but no scrollbar appears.
An inner scrollbar and an outer scrollbar both appear.
Any hints appreciated!
EDIT:
Thanks for the work - but I don't think I conveyed the issue correctly.
I'm not using frames for layout - I wish simply to make a page framing something on another site (that hosts the shopping cart and whose URL should not be exposed).
Frames "work" - BUT having an interior scrollbar on the second frame and no scrollbar on the whole page is definitely wrong behavior. My client won't know this but it'll look amateurish to people seeing the page.
I don't see quite how a server-side include or CSS would do it and I know both fairly well. If I used the server side include, how would links internal to the shopping cart work? I'd leave my site, correct?
Summary: A shopping cart hosted on another site, embedded on my content page.
Don't use frames, if the user does command + click then the product will open in new window and your frame will disappear.
One feasible solution I see here is with Javascript:
Load the page via $.ajax
redirect all clicks so that it loads in ajax window by
$('iframe a').on('click',function(){
// load the product via AJAX
});
make sure height of Div is not fixed so that it expands automatically and scrollbars are there only on window.
This is best way I could think of keeping the integration seamless while hiding the url