CODEWITHSUNDEEP
jqueryhtmlcss
Hammad
Hammad

Reputation: 2137

How to avoid CSS conflict using jquery?

I am experiencing a CSS conflict issue. Here are the details:

I have a search results page in which products are shown in grid format. The CSS for that is grid search results is "product-grid.css" which is included header of the page. On this page I have button which when clicked shows the search results in list format. The css for list format is "product-list.css" which is also included in head tag of the page.

Now the HTML guy has made the name of classes to be same in both product-grid.css and product-list.css.

What I want is that when I am viewing the page in grid style only product-grid.css should apply to respective portion of the page. And when I am viewing the page in list format then product-grid.css should be disabled and product-list.css should apply on whole page.

I have tried enabling and disabling css files using jquery but may be I am doing something wrong. Also when the page loads both css files are active in head tag and due to conflict in classes names the page is malformed even without shifting to other view.

Any help what should I do?

Upvotes: 2

Views: 2203

Answers (2)

matewka
matewka

Reputation: 10148

Here's my solution:

The HTML guy should change the class names. Current approach is unacceptable.

Doing workarounds and abracadabras with CSS files loading just because some guy was to lazy to separate the significant parts of the page is simply stupid, IMHO.

Upvotes: 4

nrsharma
nrsharma

Reputation: 2562

Make a variable which decides about the condition that page is viewing either in grid style or in list style. On the basis of that variable use the code below.

As per your condition you need to verify that if page is viewing in grid style then add grid css like

$('head').append('<link rel="stylesheet" type="text/css" href="product-grid.css.css">');

else 

$('head').append('<link rel="stylesheet" type="text/css" href="product-list.css">');

Ref: Can I load external stylesheets on request?

Upvotes: 2

Related Questions