[jQuery] Redraw after changing CSS / Screen artifacts?
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:Arial;
color:windowtext;}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>I am new to jquery, and I am trying to load HTML and CSS from a
database and have them applied dynamically to the document. The CSS is returned
as a string and I am using the cssEngine plugin to change the CSS:<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>$</span></font><font
size=2 color=blue face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:blue'>.</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>cssEngine</span></font><font size=2 color=blue face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:blue'>.</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>createStyle(myCSS,</span></font><font size=2
color="#006600" face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:#006600'>'page_theme'</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>); <o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 color=black face="Times New Roman"><span
style='font-size:12.0pt;color:black'>Everything is working fine, the CSS gets
applied correctly, however, as I toggle between different CSS the screen does
not seem to completely redraw – until the window is resized. For example,
between two sets of CSS, the background color changes – but it doesn’t
update until the window is resized. Then it redraws correctly. So my question
is, is there someway to force a redraw?<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>The createStyle method from the ccEngine plugin source is below:<o:p></o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><b><font size=2 color="#0000c8"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#0000C8;font-weight:bold'>if</span></font></b><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>($.browser.msie){</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> rules=</span></font><font size=2
color="#0064c8" face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:#0064C8'>document</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>.createElement(</span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>"style"</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>);</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> rules.setAttribute(</span></font><font
size=2 color=green face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:green'>'type'</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>, </span></font><font size=2 color=green face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:green'>'text/css'</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>);</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> rules.styleSheet.cssText=cssText;</span></font><font
size=2 face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> $(</span></font><font size=2
color=green face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>"head"</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>)[0].appendChild(rules);</span></font><font size=2
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>}</span></font><b><font size=2 color="#0000c8" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000C8;font-weight:
bold'>else</span></font></b><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> </span></font><b><font size=2
color="#0000c8" face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:#0000C8;font-weight:bold'>var</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> rules = $(</span></font><font size=2 color=green
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:green'>"head"</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>).append(</span></font><font size=2 color=green face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:green'>'<style
type="text/css">'</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>+cssText+</span></font><font size=2 color=green face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:green'>'</style>'</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>)[0].lastChild;</span></font><font size=2
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> </span></font><b><font size=2
color="#0000c8" face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:#0000C8;font-weight:bold'>if</span></font></b><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>(id)</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> $(rules).attr(</span></font><font
size=2 color=green face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:green'>"id"</span></font><font size=2
color=black face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>, id);</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> </span></font><b><font size=2
color="#0000c8" face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:#0000C8;font-weight:bold'>var</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> fClasses = </span></font><b><font size=2
color="#0000c8" face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:#0000C8;font-weight:bold'>this</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>.classes || </span></font><b><font size=2
color="#0000c8" face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:#0000C8;font-weight:bold'>this</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>.getClasses(</span></font><b><font size=2
color="#c86400" face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:#C86400;font-weight:bold'>true</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>);</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> </span></font><b><font size=2
color="#0000c8" face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:#0000C8;font-weight:bold'>var</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'> obj = rules.styleSheet ? rules.styleSheet :
(rules.sheet || </span></font><font size=2 color="#0064c8" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0064C8'>document</span></font><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>.styleSheets[</span></font><font size=2
color="#0064c8" face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:#0064C8'>document</span></font><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'>.styleSheets.</span></font><font size=2 color="#0064c8"
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:#0064C8'>length</span></font><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>-1]);</span></font><font
size=2 face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal style='text-autospace:none'><font size=2 color=black
face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New";
color:black'> $.each((obj.cssRules || obj.rules),
</span></font><b><font size=2 color="#0000c8" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000C8;font-weight:
bold'>function</span></font></b><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'>(){fClasses.push(</span></font><b><font
size=2 color="#0000c8" face="Courier New"><span style='font-size:10.0pt;
font-family:"Courier New";color:#0000C8;font-weight:bold'>this</span></font></b><font
size=2 color=black face="Courier New"><span style='font-size:10.0pt;font-family:
"Courier New";color:black'>);});</span></font><font size=2 face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New"'><o:p></o:p></span></font>
<p class=MsoNormal><b><font size=2 color="#0000c8" face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:#0000C8;font-weight:
bold'>return</span></font></b><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'> rules</span></font><font
size=2 face="Courier New"><span style='font-size:10.0pt;font-family:"Courier New"'>;<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face="Courier New"><span style='font-size:10.0pt;
font-family:"Courier New"'>}<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face="Courier New"><span style='font-size:10.0pt;
font-family:"Courier New"'>};</span></font><o:p></o:p>
<p class=MsoNormal><font size=2 color=black face="Courier New"><span
style='font-size:10.0pt;font-family:"Courier New";color:black'><o:p> </o:p></span></font>
</div>
</body>
</html>