How would I insert a "toolbar" style header into a page using the Shadow DOM that pushes down all other content?
The process is well documented elsewhere using iframes, but doing so with the Shadow DOM is something I am struggling with.
An iframe won't allow elements in the iframe to generally overlap the rest of the page content, so it prevents the creation of a clean interface in said toolbar.
If you want to insert something that is shadow DOM, one way would be to create a custom element and then insert that into the DOM. You can do this in a static way (i.e. have this simply replace the position your iframe would be), or you could insert it dynamically with JavaScript running on the page.
This fiddle shows the basics for creating a custom element http://jsfiddle.net/h6a12p30/1/
<template id="customtoolbar">
<p>My toolbar</p>
</template>
<custom-toolbar></custom-toolbar>
And Javascript like
var CustomToolbar = Object.create(HTMLElement.prototype);
CustomToolbar.createdCallback = function() {
var shadowRoot = this.createShadowRoot();
var clone = document.importNode(customtoolbar.content, true);
shadowRoot.appendChild(clone);
};
var CToolbar = document.registerElement('custom-toolbar', {
prototype: CustomToolbar
});
Related
I want to append or overlay some divs over existing html page. Is there a way to achieve this without disrupting the existing html ecosystem, with extension maybe? Simple example with
(source: mozilla.net)
.
Similar that Evernote has:
As far as code is concerned, I can inject or append the div element on page but that is not the point, I have to mod some css as well when I do that. Is there a way with a help of extension for that div to be independent from that page? To be overlaid to be precise.
background.js
function change(){
var bod = document.body;
var divi = document.createElement('div');
bod.appendChild(divi);
};
window.addEventListener('DOMContentLoaded', change());
So I have this nice piece of javascript that will load local HTML files into my document for me on the fly, which is pretty cool.
function load_html(src) {
var html = document.createElement("object");
html.type = "text/html";
html.data = src;
document.getElementById("wrapper").appendChild(html);
}
I got the idea from the post here How do I load an HTML page in a <div> using JavaScript?.
The only problem with it is that it seems that the object tag that I create needs a default width and height, which I want it to wrap the size of it's containing elements, and the new elements that are within the object tag have their own set of css values instead of using the css value of the current page.
Does anyone know how to make the elements within my object get the css values from my current page?
Also, how can I make my object be the size of it's containing elements?
I'm sure there is an easy way to do it, but I haven't found much on object tags.
I need to display an extracted html content ( HTML ONLY , no JS ) in a collapse/expand div but the extracted content is not 'valid' all the time and it may have more closing divs than it should, thus it closes the divs of my UI and breaks the UI.
Is there any solution to this issue except iframes ? perhaps a js library to sanitize this kind of content. I'm using AngularJS and boostrap.
I think it could also be done using Shadow DOM but I'm not sure how it works/can be done so I'm wondering if there is any expand/collapse plugin that uses shadow dom.
You could create create an off-page div, add your (possibly invalid) HTML content there, let the HTML parser take care of everything and then take the innerHTML of the element again and put in your page:
var div = document.createElement( 'div' );
div.innerHTML = '<div></div><span>h</span></div>'; // whatever your content
console.log( div.innerHTML );
// will output "<div></div><span>h</span>" for the example
I'm trying to dynamically insert some HTML/JS/CSS on command. (holding
off this code for page loading speed). I found a neat way
of doing this, inserting a HTML5 tag pointing at the html-
file which in turn references the css and js, like so:
function toggleObject() {
var object = document.getElementById('myObject');
if (!object) {
var e = document.createElement('object');
e.setAttribute('data', 'testing.html');
e.setAttribute('id', 'myObject');
// inject data into DOM
document.getElementsByTagName('body')[0].appendChild(e);
} else {
document.getElementsByTagName('body')[0].removeChild(object);
}}
The only problem with this is that upon inserting the tag the object (height, width and position as defined by css) flashes white before loading which isn't very attractive.
Is there a remedy for the ugly white flash?
Note! I experimented with toggling the visibility property of the object and firing up a loader div, but I can't figure what event would be able to call off the loader and turn visibility back on when the object is fully injected in the DOM. In end I settled for just a timeout of 1 sec, which feels less than optimal..
Try setting the visibility to hidden when you create the OBJECT Element and then setting it to visible once it has been appended to its parent Node.
I am trying to embed a pdf into my webpage using an object that will fallback to an iframe which loads the pdf through an external rendering service for users that do not have acrobat installed.
I am trying to do it like this:
var container = document.createElement("div");
var object = document.createElement("object");
var iframe = document.createElement("iframe");
$(container).append(object);
$(object).append(iframe);
$("body").append(container);
This works in firefox but causes an error in IE in the jquery core code. It breaks when I append the iframe to the object.
I need to create the content in a way that will give me access to both the object and the iframe element because I do not have a reliable way to detect if the user has acrobat or not, so I am depending on the browser to display the correct content and just styling both the iframe and the object so that either one will look okay.
What is an alternate and cross-browser approach?
have you tried it like this?
var object = $("<object>");
var container = $("<div>").append(object);
$(object).append("<iframe>");
$("body").append(container);