display overflow html content outside browser - html

This may be the dumbest question ever but our customer really wants this. I am asking this silly question just to be sure that it cannot be done.
We have a popup window which has opened by window.showModalDialog (img 1)
In this window there is a custom autocomplete control which displays an html table. The problem is autocomplete table is wider than the modal dialog. So user is unable to see the contents of this table. (img 2)
Then we made initial size of the modal dialog wider enough to see table contents but customer did not want the initial empty area and did not want the content to be wider also. (img 3)
The customer wants to see the thing as in img 4 which i could only made by paint.
Is it possible to display overflowed html content outside the browser. At least for the ones which has opened by window.showModalDialog.
Note: This is about a 10 years old project and it is totally based on window.open and window.showModailDialog. So using a custom jquery dialog or something similar is not an option.

Within your client's constraints, your task is not possible.
What you could do instead is popup another modal window that shows the contents of the dropdown. That way, you can get a differently sized viewport than what the first modal window offers. Also, if you open the new one as a child, you could even pass messages between the 2 windows.
Of course this will be a very rudimentary stone-age solution! You may also come across a lot of browser limitations/quirks.

Related

Open new page at specific size

I have rollover that when clicked opens a link (video) in a new page or tab depending on if I specify target="_blank".
Question? Can I control the width of this new (parent) page. I would like it to be ~80% smaller than the parent just to show the user that it is a separate page. Or.. How can I have this code open in a window of the existing page?
Thank you for your time
<div id="apDiv3"><img src="Rollover blankBL.png" alt="Fork at 5.7 Km stay right" width="400" height="225" id="fork 57" /></div>
As you mentioned in your own post you can use window.open read the window.open documentation for more info. You can specify many parameters about the popup. A simple popup with explicit width / height would look like this:
window.open('http://www.google.com',"My Window Name", "width=400,height=400")
I also created a plunker so you can see it in action
HOWEVER, I really advise against using this. This is the OLD way of doing things. This type of popup hasn't been popular for well over 10 years now. Outside of being annoying and unpopular it is also not dependable. Some browsers / popup blockers will totally block this window from opening.
A better alternative is to use some sort of JS modal library to load the content within the actual page (not in a new window).
One I really like is Magnific Popup they have a bunch of examples on their page.

Screen Reader not finding popUp

Currently trying to make a section of a site more readable to screen readers (Jaws, MacVoice over, ect). One of the buttons on the page generates a popup that in turn the user will need to be notified of, the problem is this popup is generated at the bottom of the DOM meaning that the user would have to navigate to the bottom of the dom (tabbing through) in order to even know the page is there. Does anyone know a possible way around this?
You can try removing it from the generated place with javascript and append it to a more convienant/logic place for the user. The code should be something like:
$('#amoreconvenientplaceforthebuttonID').append($('#mybuttonID'));
$('#mybuttonID').remove();

HTML + Chrome help having a form in the page space

I am trying to create a input box somewhere on the screen in chrome, not attached to extension button like a normal popup,
it also needs to be running all the time so the user doesnt need to click the extension button to open it, for example so they do not have to come out of fullscreen.
What i have so far since im not great at html or java just a simple form
What i have: http://i.imgur.com/xCY1a41.png
What i want: http://i.imgur.com/cJH8bD4.png
I would also like to control the position of the form but from what i have above doesnt seem as if i will be able,
Sorry if its a bit vague but anything helps!
What you want to do can't be done in Chrome. This is by design. If web content could display itself outside the boundaries of the browser tab's content area, then users might be confused who was presenting it. Confusion is just the beginning of that problem: if web/extension content could masquerade as a system or browser-level alert, then that content could trick the user into doing something dangerous.
If you need a presence outside of a browser tab, your options are a native app or Chrome App.
If you want the input box to be displayed on the page you could use content script - then it would appear as you presented.

how to fetch specific part of an html page into webBrowser control?

I am working on getting only a part of the navigated webpage.
for example, "the face book . com" homepage.
I only want the division of groups on the left to appear in my web Browser control.
is that possible?
I am having ideas on fetching but i don't know how to do it. any other way is fine.
also, please let me know where to put the code, because i am new on vb.net
web.Document.All("mConnect").InvokeMember("click")
this is for clicking something inside the html
web.Document.getElementId("<div>").InnerHtml("")
is this code correct? what is it for?
let's say we cut the google homepage 4 ways. and i only want Quadrant 2 to appear in my webBrowser control. is that possible? I think this is a clearer explanation..
I saw one post in this forum that technically solved my problem by manually forcing the webbrowser control to scroll to what place I want.
Web.Navigate("javascript:window.scroll(320,10,document.body.scrollHeight);")
320 is the width, 10 is the height. edit to where you want it to be.
adjust the size of your webBrowser then you can particularly choose the part that you want to see, disable scrollbars if you want.

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