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
Related
I'm currently learning JS following some tutorials on YouTube, for now my goal is to put some code on the bottom of the page. With a little bit of googling I think what I'm looking for is appending, but I don't find any example of how to append. I found an example of append but it seems like I can append only one element, but since I'm trying to append a whole responsive bootstrap footer, I'll need to append a div with divs in it with classes etc... Is append the right method to use? I can't place the footer in the page itself I only have access to JS that's why I try this way..
I don't know if I should give you the code I want to append, sorry to bother
If you have the whole footer with div children that have classes etc. append will work, and it works as such:
const mainContent = document.getElementById("main-content")
const footerElement = document.createElement("footer")
footerElement.innerHTML = '<footer> other divs with classes etc......</footer>'
mainContent.append(footerElement)
Basically, once you have your footer element defined however you need it, you can run the append function on your main content/wherever you want your footer to be at the bottom of, and the element will be added. Hope that helps.
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());
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
});
Hello so I have to parts to this question:
I would like to be able to dynamically create div elements when a user performs an action (say, clicks a button a drags something into a droppable and create a new droppable). I'm using this code right now and it's successfully generating the css block:
function createDiv()
{
var divTag = document.createElement("div");
divTag.id = "slotclass";
divTag.className ="connect";
document.body.appendChild(divTag);
}
... though I'm not too sure how to make it droppable/draggable/sortable after this.
I'd like for the dynamically generated div element to appear within a div that has a specific id from the css stylesheet. However, when I use createDiv(), it generates it outside of the div brackets regardless of what things I've tried (such as not closing brackets or placing my button in this case within the div brackets).
If anyone could help out with these two areas, that would be so great! Many thanks.
Let say you want to make it sortable, initialize sortable after you append child:
$("#slotclass").sortable({ ... }); or $(divTag).sortable({ ... });
You appended your new div in the body. To make it simple, I use jQuery. Replace document.body.appendChild(divTag); with $('#yourtargetdiv').append($(divTag));
I have a div element with some formatted images. On user request, I load additional images asynchronously, without postback, and append the result (formatted HTML for new images) to the div element using JavaScript:
function onRequestComplete(result) {
var images = document.getElementById('images');
images.InnerHtml += result;
}
All is okay, except that part when images in the panel loaded previously flicker after the HTML is appended. As far I understand, the panel is reconstructed, not just new HTML is appended to its bottom. So it isn't web 2.0 behavior.
How can it be done without flicking? Thanks in advance.
Use the dom method of adding them:
var div = document.createElement('div');
div.innerHTML= result;
document.getElementById('images').appendChild(div);
Or if you really want to do it the right way, create an dom element for each image and then append them. This also has the benefit of preloading the images.
Or just use jQuery. ;)
Using the += operator is the same as:
images.innerHTML = images.innerHTML + result;
Which will re-render all your container, thus causing "flickering".
You should be able to have the same result appending new elements to the container, without having the flickering. For that, you will need the createElement and appendChild methods.
HTH!
When you append your content, you could tack on something like
<span class='endMarker'></span>
Then instead of just updating "innerHTML" like that, you'd look through the DOM inside the target, find the last <span> with class "endMarker", and then append new content after that. Without meaning to be a "use jQuery problem solved" person I will say that a library like that would make things a little easier. To append the content, you could drop it in a hidden div and then move it.
Make all images a single image, than use CSS positioning to show the desired section. The flickering is due to the loading of the new images.