My application lets users edit documents. The editor widget, unsurprisingly, represents user documents as HTML.
I need to redisplay the documents outside the editor, but inside my site's layout. Documents need to appear in the exact same style they are presented in the editor, unaffected by my site's stylesheet. I could use the editor in read only mode, with all its buttons hidden, but I still will have scrollbar and border style issues to resolve.
I have identified the CSS file that the editor uses. How can I effectively configure a div element (the one that will contain the document) to (1) disregard all current styling, and (2) load a css file to apply to its content?
You have two options:
1.) Reset all styles on the div containing your document, and make sure your document's styles are prioritized over the reset. This could get messy.
2.) Use an iframe and load the document and styles inside the iframe.
<iframe src=".../documents/myDocument.html"></iframe>
Where "myDocument.html" is an html document containing the document and styles (treat the document html page as any other html page, and make sure it has proper head and body tags, etc.
Other options:
1.) Open the document html page inside another window.
<a href=".../document/myDocument.html" target="_blank" >Open Document</a>
2.) Render the document as a pdf, and load it into the page using a pdf viewer. (you would want to keep a backup of the original document, as the conversion back would be terrible, I presume).
Yes and no. If you want to use a div, you will want to use a stylesheet with styles defined to "reset" the css for that div. That would basically undo your site's styles, and then any new style selectors should be limited to within that div itself.
Otherwise, I would suggest using something like an iframe where you can render a truly independent document.
Related
Is it possible to create a hyperlink to (not from) part of an SVG file? Specifically, I'd like to either zoom to or highlight a specific text element within an SVG file, but doing so from a separate HTML file.
I will have pre-knowledge of the SVG text element's id and position.
I've tried URLs like below without success, referencing either/both the text elements Id as well as text fragments:
../example.svg#obj-text-4005
../example.svg#:~:text=abc
(update, sorry if I've omitted important details)
The SVGs are part of a collection I have generated myself, and I was hoping (maybe naively) that I could create an unrelated HTML page that would act as an "index" of keywords. This "unrelated HTML page" could simply be a list of URLs, each to a different text element within a given SVG.
Whether the SVG can be referenced/opened directly, or if/how it needs to be part of its own HTML page, is an open and unknown question to me. It's a matter of whatever works and is most practical.
I am writing a preview function to let user preview the HTML file they uploaded and do some minor editing. The HTML file will contain no Javascript and no external CSS. All CSS are either inside style tag or inline. Images, on the other hand, will always be external as we don't provide space for storing images.
iFrame is not a good solution, because:
The preview is before actually saving the content, so I cannot provide an URL for iFrame to load the page.
It is difficult to touch the element inside iFrame. As the user will be doing minor update in another text box showing the plain HTML, I will need to update the elements inside frequently.
However, if I just insert content into an <div> the repeated <html>, <head> and <body>tag will crash the page.
So, is there a way I can preview the HTML without iFrame?
if you dont want to have the main app to affect the styling of the preview, you need to use iframe. have you see iframe's content window? https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow. this might be the answer you are looking for. So basically here you try to access the DOM of your iframe. give it a try!
preview = getYourIframeDom();
code = getYourHtmlCodeHere();
preview.contentWindow.document.open("text/html","replace");
preview.contentWindow.document.write(code);
preview.contentWindow.document.close();
In my application I am loading external markup inside a div on my page. But sometimes the external content messes up the styling of my page.
The application gives a list of user's email from gmail and on clicking on an email it's loaded in the div. But sometimes the email's styling affects the styling of my whole page. Is there a way I can avoid that ?
I don't want to remove all the html tags from external content as I want to keep the original styling of email.
I am having a header which it will be uniform in all the pages. I want to make it generic. So I want to include common header in every HTML Page.
When i checked for HTML includes i cameup with SSI which needs a server. My Requirement is I want to include HTML file in another WITHOUT a server.
The way I would do it would be to make a "hanger" div with a class of .header. Then put a <p> inside the div to put alt text into. Then in your main css stylesheet apply your header image as a background image, and negatively indent the text.
Example
.hanger {background-image:url(header.png); text-indent:-1000px;}
To resize the header all you would do is put a width and height on div.hanger.
Does this help?
I've never heard of including html in another html file. I think what you can trying to do can be accomplished using an iframe.
example: header.html
This later question got an answer that works with files on disk provided you are using firefox.
Chrome gives a cross site scripting error
You could have a <div> for the header, I will call it <div id="header">.
Using jQuery we could say something like: $('#header').load(---html file---);. Aside from the pain it might be to include the JS file in all pages, it will allow you to make changes to the header globally throughout your application.
We are using twitter bootstrap to do some redesign of our site.
The issue we have is that the part of the site we are redesigning is that this part shows content that the user is able to enter themselves including html tags .eg etc that they may have defined their own styles for.
The problem with this is that the bootstrap stylesheet would overwrite the user stylesheet or vice versa.
Is there a way to scope the stylesheet to a particular class (ie twitter stylesheet only applies to elements inside a div with class = "twitter" or something similar) without it affecting the user stylesheet and without having to modify all of the twitter classes to include a more specific selector.
We have considered using an iframe but we really need good control over the user content to be able to send/receive from it pretty easily, ie. ajax methods that trigger things on the rest of the page
Using an iframe is the way to go.
Here's some examples of how to communicate with it and access it's content.
The iframe content can call a function in the parent like this:
parent.yourFunction()
The parent can call a function in the iframe like this:
document.getElementById('iframeid').contentWindow.yourFunction();
The parent can access the iframe's html like this:
document.getElementById('iframeid').innerHTML() = "<html><body><div>some content</div></body></html>";
Not quite what you were hoping but it's the only way to have css only apply to part of a page.