CSS conflict with generated content

JavaScript
1

I was just trying to make a condition in JQuery, if it’s false, then a message appears on the screen. Actually, I was trying to create a page to dynamically generate content from some other local pages. Clearly stating, I was trying to get generated reports from DU meter (a software to monitor bandwith), anyway that doesn’t matter at all. Let’s come to the point. Here’s my JQuery code:

$(document).ready(function() {
	var table_count = $(document).find('table'),
		sum = table_count.length,
		files = ['DU_monthly.html table',
				 'DU_weekly.html table',
				 'DU_today.html table'
				]
	function DataCall () {
		for (var a= 0; a < sum; a++) {
			var pos = ($(table_count[a]).attr('data-serial'));
                        /* **************** The condition is here ****************** */
			if (pos == 'table' + (a+1)) $(table_count[a]).load(files[a]);
			else $('body').empty().prepend('<h1>Sorry, an error occured during data transfer.</h1>').css({
				fontSize: 'xx-large',
				fontWeight: 'bold',
				fontVariant: 'smallCaps',
				color: 'red',
				fontFamily: 'Corbel, Consolas, Cambria, serif'
			}).hide().fadeIn(1500);
		}
	}
	DataCall();
});

Now as you can see, if the ‘else’ condition runs, the body will be emptied and an ‘h1’ will be added containing the message. The given css should be applied on the ‘h1’. But it’s not happening. I had an external CSS file that also had rules for ‘h1’ elements. Rather than following the given CSS rules in JQuery, it’s following that external CSS rules. But shouldn’t JQuery CSS rules override local/external stylesheet rules?

2

Hi,

You are applying the css to the body element and not the h1 you just added.

e.g. generated source:


<body style="font-size: xx-large; font-weight: bold; color: red; font-family: Corbel,Consolas,Cambria,serif; display: block;"><h1>Sorry, an error occured during data transfer.</h1>

Therefore the h1 is not specifically targeted and will receive styles in the usual way.

Why not just add a class to the new h1 and style it from the stylesheet as normal.


.prepend('<h1 class="warning">Sorry, an error occurred during data transfer.</h1>')



h1.warning{
style here etc....
}

Remember though that any other styles applied to the h1 will cascade into it so you may need to undo any rules from existing styles also.

But shouldn’t JQuery CSS rules override local/external stylesheet rules?

Inline styling has precedence (as it is last in the cascade) unless other rules use !important and in which case the !important rules will win out.

3

Confusing! by the CHAINING RULE of JQuery, the CSS should be applied to the h1. Any way, where should I put the word “!important”, in the style sheet, or the JQuery code. I want the JQuery CSS to override others, in this case using the !important in local/external sheet would be meaningless.

4

No you are effecting changes on the body as that is the selector you have originally targeted. To target the h1 that you just added you would need to do something like this (there may be better ways):


$('body').empty().prepend('<h1>Sorry, an error occurred during data transfer.</h1>'[B]).find($('h1:first')[/B]).css({
				fontSize: 'xx-large',
				fontWeight: 'bold',
				fontVariant: 'smallCaps',
				color: 'red',
				fontFamily: 'Corbel, Consolas, Cambria, serif'
			}).hide().fadeIn(1500);

Any way, where should I put the word “!important”, in the style sheet, or the JQuery code. I want the JQuery CSS to override others, in this case using the !important in local/external sheet would be meaningless.

I gave you a working example. The css just goes in the css filea nd you don’t need any css in the js. It’s usually best to avoid directly changing styles in jquery as really that is css’s job so just add a class with jquery and then you can always update the styles from the css without messing with scripts.

Both example above are working examples and will do what you wanted.