Embedded PDF always appearing over Absolutely positioned elements - html

We have a page where a PDF is embedded, and are trying to pop drop-down menus, jQuery UI dialogs, etc. over the PDF document which is currently displayed.
The problem is that the PDF is ALWAYS taking the 'front' position, so any elements dynamically created appear behind it. This was a common problem with Flash back in the days of DHTML, and here we are again.
Is this the kind of behavior to expect from PDF, or is there a way to override it? Thanks in advance for the help.

try "shimming" an iframe under the elements.

Related

Angular 2 Chrome DOM rendering problems

Our team (not only my computer) has a wierd rendering issue for Angular 2, that only happens in Chrome.
Namely, when navigating the app or refreshing in mid app, many of the items in DOM are invisible. EG. paragraphs and headers that have text in them, but the text is not rendered for the end user, but the text is seen in the inspector DOM.
The DOM will regain visibility if you edit a random CSS attribute in the inspector. This CSS doesnt even have to be applicable to the invisible DOM item at hand, ala. the invisible item could be a paragraph in the header, and switching a random footer span-s top position on/off will make the header paragraph regain visibility.
Before toggling a random CSS element
After toggling a random CSS element
This happens on pages that have a fixed loader applied to them, eg. a component that has position fixed, a superhigh z-index and encompasses the whole screen. This page loader is displayed until ngOnInit finishes, meaning it is pretty fast most of the time. Disabling this loader seems to fix the issue.
This also sometimes happens to text in {{ var }} tags, when the var value is loaded after the page has loaded.
We have tried toggling the loader with either
*ngIf="true/false"
OR
[style.display]="block/none"
Neither of these solutions work, some of the dom is still invisible.
Does anyone have a clue as to why this happens?
I think this question has been answered here: custom #font-face does not load in chrome (chrome custom fonts not rendering)
I have done a quick test and it seems to have fixed things.
Basically I was including the custom font many times (each time a SCSS file was added to a component), so I have moved it, so it's only being loaded a single time, and it now loads fine.
The issue is multiple inclusion in google chrome, I face similar issue when using angular4 and material lite.The problem is i imported fonts in every component and fixed it by importing font in single main parent component.

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.

PDF in Iframe is overlapped other element

I have a screen where I need to show pdf/html .So I am making use of an iframe content to show the PDF or HTML in it.and whenever needed i need to show a popup on top masking the whole screen. This is working cool in all the places.
Problem is , only in Internet Explorer, if PDF is there in iframe content, the masking is not coming on top of the pdf, instead pdf overlaps the masking , popups,dropdowns.
Please let us know how to solve this.
Thanks in Advance.
So, I solve the problem. What you have to do is make iframe visibility hidden when you want to show masking on the page.

Dynamic Elements in JSP?

I am wondering how to create dynamic elements in a JSP webpage? For example, what I want to do is that I have a Selection Box, in which a user selects an image. Upon clicking a button (or possibly after selecting an item), the image will 'slide down' (like how PPT slides slide down when changing slides) and rest on the center of the screen.
Or at least another simpler case would be, when clicking a button, a text box will appear each time you click the button. So far, the only idea I have of this is by using visibility but that will limit me.
Can you help me on how to do these things or if it is possible to do these with only JSP? Additionally, is it possible for elements to 'pop up' (like in facebook photo viewer) without refreshing the page?
Thank you!
You want things to happen on the client, so you need to be focusing on the HTML, CSS and JavaScript. The fact you generate the HTML using JSP is irrelevant.
Build on things that work
Write JS logic for adding new content based on the form options
Write JS logic for manipulating the CSS to do the animation
Consider using a library such as YUI or jQuery to help with the JS, and using CSS 3 Transitions for the animation.

page break in HTML

i want to use page break in html that means the reader cannot scroll down further until he select a link for it.
<SPAN id=title><A name=BdToc_1 external=yes><h1 id="BookTitle" align="center"><font color="#B90000"><b>Choose Subject</b></font></h1>
</A>
</SPAN>
<p>
Contents....
</p>
I want a page break before and after this. Please help me
Forgive me for pointing out the obvious, but page breaks are used to separate distinct pages. Each HTML document is a distinct "page". "select[ing] a link" traditionally loads a new page. So.... why don't you just load the next page when they click on this link?
You can specify where page breaks occur using CSS properties page-break-after, page-break-before. Of course, this works only when printing the web page. As far as I know, these properties are correctly implemented in all major browsers including IE6+. Additionally, you can also state that page break should not occur inside an element using page-break-inside.
If you want paging per se, you need to have HTML for each page and interlink these pages. Or you can fetch contents of each page using AJAX dynamically, which of course involves scripting.
It's not quite possible in HTML. You could try makeing something in Javascript, but anyone can dissable javascript.
Why would you want something like this?
You can use onscroll in javascript to control the scrolling. The onscroll event can determine the current position and there is a function to scroll up if the user is too far down.
Then, when the user clicks the link, you set a flag (scrollok=1). The onscroll checks the flag and now permits scrolling.
If you want to defeat people who have deactivated javascript, just make the content invisible until they click using stylesheets: visibility=none.
Then, when they click the link, you enable scrolling via the flag, and make the content visible.
If you don't know how to do these things, just leave a comment and I can be more precise.