Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Clear othe styles in Live Preview

Tags:

jquery

css

I have a div LivePreview that previews the text entered into a textarea as HTML using jQuery. The problem is, it inherits all the other styles on the page, as it should...

Is there a way to clear all styles for just the LivePreview (table, p, etc...) or will I have to reset each of the LivePreview children manually?

like image 988
guyfromfl Avatar asked Jan 21 '26 18:01

guyfromfl


1 Answers

The way to do it is as done in jsfiddle itself which does a similar thing to what you want. The way they seem to have doe it is put that box within an iframe.

Anything nested within the iframe loses any CSS that has been called out of it unless the CSS file is explicitly linked to from within the `iframe. So your code should be:

<div class="LivePreview">
    <iframe>
        <head></head>
        <body>
            /* Any HTML you want and will have the default CSS*/
        </body>
    </iframe>
</div>
like image 63
Nachshon Schwartz Avatar answered Jan 24 '26 10:01

Nachshon Schwartz