I want to embed this a-frame project to my portfolio on Squarespace (most basic plan) like what a-frame shows in their embedded page but I'm not even sure if it's possible? I'm also super new to coding so let me know if I should provide more info. If people can also explain things in baby language that would be awesome thanks
embedding remote a-scene?
if you want to link your existing project to a different page then... I don't think it's possible. Look:
the documentation page uses a real a-scene there, with a-boxes and stuff.
It may be possible via iframes but I don't know if it works. There is something like this in the documentation:
For now, if the I-Frame is not on the same origin as the page, the WebVR polyfill for mobile won’t work and there won’t be any tracked rotation of the device. - source
embedded
embedded is used to create a smaller window of a-scene inside a standard HTML page. As far as I know, it just sets or changes some CSS values. Unfortunately, there is nothing like a magical src attribute that would allow you to fetch a different scene from another page
If you can upload a static HTML file onto Squarespace then by all means you can embed it there. But remember that
Only one <a-scene> can exist on a page - same source
You would need to copy your entire project a-scene and paste it into your Squarespace page. Add A-Frame script in header or link a js file and all standard stuff.
link
this may not be what you are looking for but you could potentially create an embeded a-frame scene that would have a link inisde that would "teleport" you (change location) to your project. link - A-Frame
I have an iframe embed as follows, which is currently public:
<iframe src="https://drive.google.com/embeddedfolderview?id=0B3gN5-3YYPjHeGlTVjduRnBTVGs#list" width="100%" height="500" frameborder="0"></iframe>
and it will show up in my website, but it will not navigate folders within that iframe, but instead navigate to a new window. Is there a way to make all navigate stay self contained in the iframe?
You can see samples of this at: http://help.realsmart.co.uk/embedding-a-google-drive-folder-in-a-post-or-page/
which shows how to embed a folder. It looks nice, but when navigating into deeper folders, it just navigates away.
Edit Added Fiddle: https://jsfiddle.net/0y4cm891/
Edit on 5 April 2020:
I made a new tool specifically for this purpose. For details and steps, read my answer to this similar question: https://stackoverflow.com/a/61034751/8111094
Old answer:
There are two ways to do this.
If you are using wordpress, you cam simply use the plugin Use Your Drive (its a paid plugin). There are few other similar plugins as well. As far as I have seen, none are free.
Use the Google Drive API, it will require you to write your own app and a google cloud account. Watch this video of a similar use case published by google https://www.youtube.com/watch?v=Z5G0luBohCg
I have been trying to embed an iframe to a wiki page that I'm working on based on wikimedia but not the actual wikipedia without any luck.
I've also tried googling on this topic, but have been fruitless. Will appreciate any advice on this pls.
Thks.
There's the easy way and the slightly harder way.
The easy way assumes you don't have a publicly editable wiki (i.e. non-logged in users cannot edit and creating an account is not automatic).
If that's the case, simply set $wgRawHtml to true and you will be able to input any arbitrary HTML into your pages by wrapping it inside the <html> tag.
Here's an example:
This is '''wikitext'''.
<html>
This is <em>HTML</em>.
</html>
Now, if you have a publicly editable wiki you most definitely don't want users to be able to add any and all HTML to your wiki. In that case you can use the Verbatim extension. This will embed the contents of a page in the MediaWiki namespace as-is, preserving any HTML markup.
For example:
<verbatim>Foo</verbatim>
Would embed the contents of MediaWiki:Foo.
Hope that helps.
I suggest you use the IDisplay extension.
The iDisplay extension allows MediaWiki pages to embed external web pages. It also allows setting an option to put a blocking page in front of it, so you prevent loading the page until the user wants to load the page.
It's implemented with an <iframe>.
I have been reading the dev guide but haven't been able to work out how to put my own codes into webpages
I know it is possible because AVG uses it (in it's link scanner), and FastestChrome extension uses it too (highlight something and a link to a search pops up).
I have a backgrounded page but I can't get it to effect the webpages I go on (permissions are correct as I can get css to effect)
I am probably missing something really simple :/
It's not intuitively presented in the documentation but your background page can not access the current webpage b/c they are in different contexts. In other words the background page is it's own separate page so it has no access to any other page's DOM.
If you want to affect the page the user is viewing in the browser you will need to use what is referred to as a "content script".
If you want to communicate between content scripts and the background page you will need to refer to the message passing API. Check out my extension's source code for reference. I do exactly that.
Just remember...
Background Page: used for general logic in your extension, not anything page specific.
Content Scripts: are loaded into every page the user sees, and can manipulate that specific page.
Those probably use Content Scripts to inject Javascript into webpages. These scripts run in the context of the web pages and can access the DOM.
You can either define a script to always run in a web page by declaring the script file in the extension manifest, or you can use your background page to inject a script when needed.
I simply want to embed a PDF file in a web site.
The best solution I've found is Google Docs Viewer (http://docs.google.com/viewer), but it does not work for IE and obviously that is not going to work for me.
Anyone have a clean, easy solution to this?
Update: I should add that one of the benefits of embedding the PDF file the Google viewer way is that as the PDF file I link to gets updated (and it could without notice to me), my site would automatically be holding the same PDF file (provided the full pathname doesn't change, which it does not). For this reason converting the file to an image is not preferred while.
Well since you obviously don't want to force someone to download the bloated insecure pdf plugin, why not let them use the bloated insecure flash player?
http://flexpaper.devaldi.com/
But really it is just a simple as
<iframe src="path/to/pdf" width="500" height="700">
If you do stick with the pdf embedded option, Byron is right although embedded pdf files don't look so great on a webpage. Anyway, be sure to be strict about the coding. Hence:
<iframe src="path/to/pdf" width=500 height = 700>
Should be
<iframe src="path/to/pdf" width="500" height="700">
Small alteration.
Updated answer for HTML5:
<object data="filename.pdf" type="application/pdf">
Your browser does not support pdfs, <a href="filename.pdf">click here to
download the file.</a>
</object>
You can read about it here:
http://www.w3schools.com/tags/tag_object.asp
How long is the pdf file? Can't you convert it to a very long image and display that in a div with a scrollbar?
Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.
Online demo: http://mozilla.github.com/pdf.js/web/viewer.html
GitHub: https://github.com/mozilla/pdf.js
enter link description here
You can also use Google PDF viewer for this purpose. As far as I know it's not an official Google feature (am I wrong on this?), but it works for me very nicely and smoothly. You need to upload your PDF somewhere before and just use its URL:
<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
I just ftp mine, I do not use Google or any other s/w
you must have some need other than a PDF file sitting in a directory, what is it?
Also, why would you convert the image (and reduce PDF resolution and clarity) ?
Response to Comments
That is the ugliest thing I have seen since my last trip to Africa. You are not seriously thinking of posting that much information on a single page, are you. No one can read it, and I tried every magnification.
For that amount of info, you need to take an architectural approach.
Put a few controls on the front page, and feed the user a small amount of manageable info, about the area that they chose. Only.
Get the info from the source website/database and feed it into your website/database. Only needs to change when the source data changes. The whole linkage can be automated.
Then you just create nice clean pages, with a reasonable quantity of info, in a readable form, on each page.
This is a 20th Century Timetable. Note, not a 21st century timetable (look at Berlin or München for one of those). You really can't just scan an intense doc and provide it as an embedded PDF.
Note that you do not need the elaborate controls of CityRail. you can have just a few to allow select of the line and timetable.
then produce a page that is a simple form of the CityRail page.
or (the absolute minimum) one fully viewable, full size PDF per web page.
.
Like this simple viewable PDF. That example could be served up in one PDF for page 1 and 4 separate PDF pages for the rest; PDFs already have basic navigation, so I have used that feature and produced one 5-pager instead. Make sure you find and use the blue glass buttons and follow the navigation hints on the left top and bottom of each page.
Second to demonstrating the PDFs and navigation, look at the folder: the files are all PDFs.
Back to the original question. Now you can embed PDFs, but if you do, please do not mess with them. All the controls you have on the linked page are redundant; any browser facilitiates that even now, and will be doing so better in future. Eg. in simple viewable PDF, use your browser controls to increase/decrease magnification, move around the doc, etc.
Let's assume you finish your Google Maps page, that's the first or index page. Draw all the train lines in; when the user clicks on a train line, it takes them to either (a) a clean page produced from your db as per (1) which will look like (2), or (b) a single clean PDF in readable form as per (3). You could do the whole project just by manipulating files in directories.
A lot less work. No Google docs; no intermediate s/w to constrict you or work around. You can forget about IE and its multiple incarnations and strangulations; any other browser and its limitations. Concentrate on the data, and getting it out there in presentable form, not on the pitiful s/w and its fits and starts.
Cheers
From HTML5 :
<embed src="url" type="media-type" height="" width=""/>
For media-type refer, http://www.iana.org/assignments/media-types/media-types.xhtml
Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. The files don't have to be uploaded to Google Docs, but they need to be available online.
Here's the code I used to embed the PDF file:
but you should replace the bold URL with your own address. As I mentioned, the document viewer works for PDF and PPT files.
http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html