CODEWITHSUNDEEP
javascriptjquerycss
leora
leora

Reputation: 196689

How can I centralize this jquery styling colors into css?

I have the following code in a number of HTML files:

$("table.altRow tr:odd").css("background-color", "#eeecec");
$("table.altRow tr:even").css("background-color", "#ffffff");

How can I change this so the colors are defined in one place so if I want to change it I only need to change it once (instead of on every page). One requirement i have is that i sometime delete rows (and then call this code again to "reset" the alt row colors . I need that to continue to work

(NOTE: that i am doing this dynamically so I can't get rid of this jquery code and fully replace with css).

For example, i often delete rows and then run the code above to keep alternate row data accurate.

Upvotes: 1

Views: 93

Answers (4)

I don't use this profile anymo
I don't use this profile anymo

Reputation: 2676

Ok, combining my answer with others' answers to hopefully address the complete solution:

1) Add the rules to an external css stylesheet (e.g. make a file called style.css with the following content:)

.lowlight { 
background-color: #eeecec;
}

.highlight { 
background-color: #fff;
}

2) To link to the stylesheet, this needs to be in the <head> of your HTML document:

<link rel="stylesheet" type="text/css" href="/path/to/your/style.css" />

3) And finally, to assign styles to the relevant table rows: 

$("table.altRow tr:even").addClass("lowlight");

You may need to remove the old class as well, e.g.

$("table.altRow tr:even").addClass("lowlight").removeClass("highlight");

Upvotes: 4

Jeff Noel
Jeff Noel

Reputation: 7618

You could define the variable/constant in PHP and generate a PHP CSS file (ie.: myCSS.php)

Here is an example:

PHP / CSS (single file)

<?php 
    header("Content-type: text/css; charset: UTF-8"); 
    $main_color = "#00bfff"; #sky light blue
    $secondary_color = "#FFF"; #white
?>

html{
    background-color:#DDD;
    font-family: "Open Sans", Arial, sans-serif;
}

h1 {
    color: <?php echo $main_color;?>;
}

div {
    border-color: <?php echo $main_color;?>;
}

altRow tr:nth-child(even) {
    background-color: <?php echo $secondary_color;?>;
}

You get the file within your HTML file like any regular CSS file.

Upvotes: 0

MonkeyZeus
MonkeyZeus

Reputation: 20747

You can have a generic JS file which gets loaded before every other JS file and declare some unique globally-scoped vars that you should avoid over-writing in sub-subsequent JS files:

autoload.js

var glob_unique_odd_tr = '#eeecec';
var glob_unique_even_tr = '#ffffff';

yourjsfile.js

$(document).ready(function(){
    $("table.altRow tr:odd").css("background-color", glob_unique_odd_tr );
    $("table.altRow tr:even").css("background-color", glob_unique_even_tr );
});

Your HTML files JS load order from now on

<script type="text/javascript" src="autoload.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="yourjsfile.js"></script>

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Use classes like,

.color1 { background-color : #eeecec; }
.color2 { background-color : #ffffff; }

And in JS use .addClass(),

   $("table.altRow tr:odd").addClass("color1");
   $("table.altRow tr:even").addClass("color2");

The advantage behind this is, you can remove the colours later if you don't want it, by using .removeClass().

Upvotes: 1

Related Questions