Using jQuery to disable CSS inheritance

views:

190

answers:

+3 Q:

Using jQuery to disable CSS inheritance

Is there a way to use jQuery (or generic javascript) to disable CSS inheritance on a block level? For example, if I am pulling in an external resource via javascript, say pastie.org, they will have their own CSS that my CSS overrides. I would like to place the embed code into its own container that has CSS inheritance disabled.

This is not my own CSS structure, so I can't rename IDs Classes or inline anything to make it work, the holy grail of inheritance blocking is my last resort.

+4 A:

Have you thought about using an <iframe> to display the content? Then you have a blank canvas with no CSS set, so to speak.

Andy E 2010-05-19 15:39:01

Yep, this is the only way. Whilst you could include a complete CSS reset for the block you're going to insert content into, that wouldn't stop other rules applying to the stuff inside it. You need a completely new display content; that's what iframes are for.

bobince 2010-05-19 15:40:51

Yeah, the iframe is definitely the best solution. Kind of <headdesk/> obvious, but never occurred to me. Thanks guys.

Buzzedword 2010-05-21 12:50:12

Andy, quick thing: that <iframe> tip was so blaringly obvious, I'm making a jQuery plugin that creates an <iframe> populated with the children of a selected <div>. I set out to do this with jQuery, so I'm going to finish it with jQuery.

Buzzedword 2010-05-21 21:18:46

@Buzzedword: glad I could help. I can think of a few times I've had my hand on my face after being told something obvious on stack overflow ;-)

Andy E 2010-05-21 21:34:21

http://plugins.jquery.com/project/jCascade

Buzzedword 2010-05-24 12:58:28

@Buzzedword: That's pretty cool if it's thorough enough. Well done!

Andy E 2010-05-24 13:13:32

@Andy, something I threw together in like 12 hours, but it's pretty straightforward, has a blank HTML page included in it, proper structure, adjustable name, height, width... pretty much can't miss. Thanks a lot for the extra push!

Buzzedword 2010-05-25 20:26:49

That or make sure that when you are pulling in the content you pull in the css also , are you using $('#example').load('pastie.org'); ? can you specify pastie.org's css?

travismillward 2010-05-19 19:58:01

ansaurus

tags:

views:

answers:

Using jQuery to disable CSS inheritance

related questions