How to avoid CSS conflict using jquery?

Tags: jquery,html,css

Problem :

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?

Solution :

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">');


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

Ref: Can I load external stylesheets on request?

    CSS Howto..

    Toggle radio button on javascript hide/show of div

    Using CSS, how do you anchor an element to a baseline and size it based on another “pinned” element?

    How to get a white outline around an image in CSS

    How do I resize a div relative to browser window size?

    Google Maps visual refresh - how do disable font Roboto in InfoWindow

    How do I align an item to the right inside a flex container?

    How to get CSS in Javascript working correctly

    How to create CSS styled dom element inside Google Maps InfoWindow?

    How to vertically align a list on one item, with HTML/CSS/JavaScript?

    How to make child divs visible in's CSS Radio Checked Tab Method

    Ionic 2.0.0-beta.24 how can i import node_module css files without ionic.config.js

    How do I make menu background even with the header in HTML/CSS

    How to add multiple css files to CKEditor editorarea

    How to clone an element using class name and append it to the body

    CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

    how to do 3d menu in css 3 with that effect like on page [closed]

    views_slideshow controls modification Drupal 7

    CSS: How to make drop down children to at least fill parent width

    how to make background 100% on a top menu

    How to apply css on every 2nd child using nth-child() with jquery

    css: how to force images to scale at same amount?

    Shadow DOM: how to apply CSS style only if the host element is ?

    How to wrap table cell at a maximum width in full width table

    How to make Flexbox span multiple lines?

    How do I make the text in the next line to be centered and not aligned to the left?

    how to make tab bar in jquery mobile?

    How to import packages within my Aurelia application

    How does CSS computation for background percentages work?

    How to align a horizontal list to the center in css

    How do you make 2 YouTube videos automatically play one after the other?