Baran Topal

Baran Topal


May 2024
M T W T F S S
« Feb    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Categories


Disable stylesheet for a given div and its childs – manipulation with JS vs. CSS reset

baranbaran

Couple of years ago, I needed to disable a stylesheet file for a given div and its childs.
That div was rendered in a jquery dialog and i want that dialog to be free of the css file which renders the entire page.

By overriding the dialog div class by using this parameter should fix the issue:

$( ".selector" ).dialog({ dialogClass: "YourCustomClass" });

But this dialog was rendered in an AJAX call..
And unfortunately anything which you see on the screen will be affected by the stylesheet, with few exceptions. My only options were to target things on the page with more specificity so that it doesn’t involve the area I don’t want it to, or to override the existing styles.

As described http://meyerweb.com/eric/tools/css/reset/, resetting css is one option:


#dialog html, #dialog body, #dialog div, #dialog span, #dialog applet, #dialog object, #dialog iframe,
#dialog h1, #dialog h2, #dialog h3, #dialog h4, #dialog h5, #dialog h6, #dialog p, #dialog blockquote, #dialog pre,
#dialog a, #dialog abbr, #dialog acronym, #dialog address, #dialog big, #dialog cite, #dialog code,
#dialog del, #dialog dfn, #dialog em, #dialog img, #dialog ins, #dialog kbd, #dialog q, #dialog s, #dialog samp,
#dialog small, #dialog strike, #dialog strong, #dialog sub, #dialog sup, #dialog tt, #dialog var,
#dialog b, #dialog u, #dialog i, #dialog center,
#dialog dl, #dialog dt, #dialog dd, #dialog ol, #dialog ul, #dialog li,
#dialog fieldset, #dialog form, #dialog label, #dialog legend,
#dialog table, #dialog caption, #dialog tbody, #dialog tfoot, #dialog thead, #dialog tr, #dialog th, #dialog td,
#dialog article, #dialog aside, #dialog canvas, #dialog details, #dialog embed, 
#dialog figure, #dialog figcaption, #dialog footer, #dialog header, #dialog hgroup, 
#dialog menu, #dialog nav, #dialog output, #dialog ruby, #dialog section, #dialog summary,
#dialog time, #dialog mark, #dialog audio, #dialog video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
#dialog article, #dialog aside, #dialog details, #dialog figcaption, #dialog figure, 
#dialog footer, #dialog header, #dialog hgroup, #dialog menu, #dialog nav, #dialog section {
	display: block;
}
#dialog body {
	line-height: 1;
}
#dialog ol, #dialog ul {
	list-style: none;
}
#dialog blockquote, #dialog q {
	quotes: none;
}
#dialog blockquote:before, #dialog blockquote:after,
#dialog q:before, #dialog q:after {
	content: '';
	content: none;
}
#dialog table {
	border-collapse: collapse;
	border-spacing: 0;
}