Disabling a stylesheet file for a given div and its childs.

Hi,

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

Any good solution or a clever workaround?

Br.
LVL 12
jazzIIIloveAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
are you talking about jQuery UI dialog?

If yes, then you might try to override the dialog div class by using this parameter:
$( ".selector" ).dialog({ dialogClass: "YourCustomClass" });

Open in new window


HTH
Rainer
0
jazzIIIloveAuthor Commented:
Hi Rainer,

Thanks for the interest. The case is actually more complex. It is a part of ajax call in which i render the jquery dialog's html content as follows:

                 $.each(data.d, function (index, value) {
                     console.log("Index" + index);
                     console.log("Value" + data.d[index]);

                     $('#' + index).live('click', function () {
                         console.log("inclick");
                         var SplitText = "Title";
             // This is the father div for popup content          
  var $dialog = $('<div id = "donttouchme"></div>')

                             .html(SplitText)
                             .dialog({
                                 height: 500,
                                 width: 600,
                                 title: 'Title'
                             });
                         //works!                 
                         // $("#test").dialog();

                             // document.styleSheets[0].disabled = true;                             
                         $dialog.dialog();
                         // $dialog.html('Some text Some text Some textarea Some text');
                         // $dialog.html(data.d);
// html snippet is passed down there

                         $dialog.html(data.d[index]);
                         
                         return false;
                     });
                 });
             }
             ////                 
         });
     });
 </script>

</body>
</HTML> 

Open in new window

0
jazzIIIloveAuthor Commented:
Hi,

I don't actually have a class for the div and i hesitate as i have other divs on the parent web page.

To clarify i want the parent page's stylesheet not to be in effect, "just for" $dialog.html(data.d[index]).

data.d[index] holds the child tags. Any way to adapt your suggestion?

Br.
0
Brandon LyonSenior Frontend DeveloperCommented:
Unfortunately that's not the way that CSS works. Anything which you see on the screen will be affected by the stylesheet, with few exceptions. Your only options are to target things on the page with more specificity so that it doesn't involve the area you don't want it to, or to override the existing styles.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nap0leonCommented:
You may be able to override most of the page's CSS by applying portions of a "reset" css to the dialogue.

e.g., if you dialogue is inside $('#dialog '), using this reset css list (http://meyerweb.com/eric/tools/css/reset/).

#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;
}

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.