I'm using Xam.Plugins.WebView with static HTML on multiple pages of a carousel. I find that when a carousel page first shows a page the HTML takes a while to render and there's an ugly flash. This doesn't happen when using the default Forms WebView but I'm not using that because it doesn't do Javascript integration. Is there a way to trigger a rendering of HTML before it's visible? (Under the covers it's using WkWebView instead of UIWebView, which is what Forms WebView uses.)
Related
I tried to download the web page as pdf by using html2canvas and jspdf. All elements of page like radio button, checkbox and label are rendered well. But if I add the embedded video into the page by iframe, it doesn't render at all.
Is there any way to render the embedded video into pdf by html2canvas and jspdf?
Thanks.
this is the screenshot of web page to be rendered.
And this is one of downloaded pdf.
I'm afraid html2canvas cannot render iframes. It says so clearly in the documentation:
The script doesn't render plugin content such as Flash or Java applets. It doesn't render iframe content either.
You could do this by other means, but not from the client, AFAIK.
I am building a Chrome extensions which injects a decent amount of JavaScript, CSS, and HTML into the page DOM for the current webpage tab. It it does so to show a Modal window with my extensions functionality in that modal.
I cannot use the background or popup scripts to do what I need to do so I have to use a content script which injects into the actual page DOM.
My issue so far is I have to be super careful with CSS class names and JS as well as I have discovered if the page has a CSS class matching the name of any of my extensions CSS, my extensions ends up over-riding the pages CSS!
I have seen that some other extensions that have to do a lot of HTML, CSS, JS into the content end up injecting into there own Iframe in the page which helps prevent this name collision.
Is using an Iframe the standard best practice in this case?
One of the features in my extensions is to do full-page screeenshots which require my contnet.js script to send a message to my background.js script which is responsibble for calling the CHrome API and taking the screenshot of the current scroll position in the pages viewport.
user clicks button in DOM modal windows
content.js sends message to background.js with the coordinates of the viewport.
background.js takes the screenshot with those coordinates. THen sends a message back to content.js.
content.js then scrolls down the page to the next area of the viewport for the next screenshot and then sends those new coordinates back to background.js.
this cycle continues until a shot of the whole page is made and stiched together and then sends back the URL of the new image to content.js when done.
Because both the Chrome API needs to sends messages back and forth between my content.js and background.js and then also if there is an iframe the iframe has to send messages back and forth with the page and the iframe.
Because of this I am not sure if I could use an iframe or not even?
Also if I did use an iframe, it would not load the content from a remote server but instead would be loaded into the page as html.
So is there a best practice for doing this?
Use inline styles instead
You can wrap your css in content.js then apply it to your target elements, it won't interfer the original design of the webpage
Use Shadow DOM
It provides encapsulation for js/css and makes it easy to ensure your components separate from the DOM of the main document.
I am currently using Durandal 2.0 to produce a modal dialog box to display an HTML file. I am successfully doing it using IFRAME tag. Its needed for the application. SSRS produces these files daily and the user needs to see the content of these files on an intranet app. I was wondering is there a more preferred way of displaying the content of an external HTML file other than using IFRAME tags or is IFRAME tags are still the preferred way?
Thanks in advance for the answers.
If your HTML views has nothing to do with your view models then I think there is no point of making that HTML files to a Durandal view.
Because the actions/navigations happening in those HTML files are independent from your Durandal application it is better to use an IFrame.
Pipbox says it's "Plone 4 compatible way to do AJAX pop-ups in Plone 3".
http://plone.org/products/pipbox
Then, what's the proper way of doing jQuery Tools image pop-ups in Plone 4?
Scan HTML for images using selector
Install click handler
On click open the image in pop-up, using one of predefined sizes from plone.app.imaging
All pipbox really does is load plone.app.jquerytools support in Plone 3. In Plone 4, plone.app.jquerytools is built in.
plone.app.jquerytools loads jQuery Tools and some Plone-specific support for easy AJAX popups. That support allows you to associate AJAX popups with jQuery-selectable page components. See the PYPI page for full documentation.
A quick example: let's say that you want to set up lightbox-style popups for images in the content area using the preview-scale supplied by plone.app.imaging. JS to do this is:
jQuery( function($) {
$('img.image-right, img.image-left, img.image-inline')
.prepOverlay({
subtype: 'image',
urlmatch: '/image_.+$',
urlreplace: '/image_preview'
});
});
You would load this code by registering a javascript resource as a skin or browser layer, then add it to the portal_javascripts js resources.
The code:
Sets up a function to load when the page is ready, with "jQuery" aliased to "$";
Selects all image items in the page that use the styles used by the visual editor;
Calls the prepOverlay routine (from plone.app.jquerytools) to associate them with overlays;
Specifies that the overlays will be images, which means that size information may be determined from the loaded image;
Does a little regular expression matching and replacing to pick up the image URL and convert it to a preview.
I have one jQuery plugin (colorbox) that loads a modal popup window (with an external html file). <-- works perfectly by itself. I have another jQuery plugin (jScrollPane) that loads custom scroll bars for divs. <-- it too works perfectly by itself. Both have a JS component and a CSS component.
My process thus far:
I tried to load and initialize the scroll bar jQuery and CSS from the eternal html (popup) and my div disappeared.
Then I tried to load the scroll bar jQuery in the parent window and initialize it in the colorbox callback...this time my div didn't disappear but the scroll bar and arrows (even OS standard arrows) did disappear.
Finally, I put the scroll bar CSS in <style> tags and shoved it inside the eternal html file's <body> tags. That works on all major browsers, however, now you can't exit the popup window. Arg!
So I think my question is: how do you get jQuery plugins and their CSS files to initialize on dynamically loaded content? What goes where (incl. the jQuery library itself)?
Thanks!
If you are using the "window.open" type of popup, then I would say make it a little simpler and bring it into your page as a JQueryUI Dialog box that pulls in your external html file are the content, loading it in the DIV and accessible within the general page context, inheriting the JQuery and CSS as well. The simple form of this should be like:
$("#id").load(url).dialog();
Where #id is the DIV that is hidden and will contain your dialog data, and URL is the external url to the html file in your popup.
Found the solution....
My question was specifically on integrating colorbox (a jQuery lightbox plugin) with jScrollPane (a jQuery custom scrollbar plugin). My ajax call to load content with the colorbox worked, however, the jScrollPane could not initiate because the required wasn't loaded (because the ajax call didn't pull any info from the head tags).
If other Stack Overflowers stumble across a similar issue this is what I did to solve it: used iframes instead of an ajax call. Ooops. duh.
I don't know if colorbox is the only plugin that pulls info only from body tags and not the head but I imagine many plugins work this way when working with external files. If this is your problem, use iframes to ensure that the data in your head tag is pulled.
Thanks Stack Overflow anyhoo! I still love you.