how to isolate CSS in a website gadget?

Question

I have a livescore website and I am trying to make a gadget of that website to show part of it in others websites,the problem that I face is how to isolate my code (JavaScript and CSS) from the code of the host site for my gadget. I use an "anonymous function" like this:

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.8.3') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else { // Other browsers
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() { 
    jQuery(document).ready(function($) {
    /******* Load CSS *******/
    var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "http://localhost/aaa/widget/widget.css" 
        });
        css_link.appendTo('head');          
        var txt;
        txt='<div id="wrapper">';
        txt=txt+'<ul class="tabs">';
        txt=txt+'<li id="fixtures_tab"><a href="#fixtures">All</a></li>';
        txt=txt+'<li id="live_tab"><a href="#live">Live</a></li>';
        txt=txt+'<li id="finished_tab"><a href="#finished">finished</a></li>';
        txt=txt+'<li id="program_tab"><a href="#program">Program</a></li>';
        txt=txt+'<li id="postpond_tab"><a href="#postpond">Postpond</a></li>';
        txt=txt+'<li id="selected_tab"><a id="f" href="#fav">Selected (0)</a></li>';
        txt=txt+'</ul>';
        txt=txt+'<div class="tab-container">';
        txt=txt+'<div id="fixtures" class="tab-content"><script type="text/javascript">get_All_Today_Matches();</script></div>';
        txt=txt+'<div id="live" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="finished" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="program" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="postpond" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'<div id="fav" class="tab-content"><script type="text/javascript"></script></div>';
        txt=txt+'</div>';
        txt=txt+'</div>';
        $('#widget-container').html(txt);
    });
}

})(); // We call our anonymous function immediately

everything is going fine for the JQuery but not for CSS (the CSS file is loaded and worked fine but some of the hosting site CSS is effecting my CSS) I have no control on the hosting site CSS and I think that I have isolated my code well by using anonymous function but why is my CSS affected by the website orginal CSS ??? help me please i have been at this point for a while

You need to reset any styles you think they may have set. For example, if they had `div{background:#FF0000}` then all your divs will have red backgrounds. You can revert it by setting transparent or inherit. A good way to start is `.mycontainer *{font:inherit;(etc)}` — Dave, Apr 01 '13 at 11:54
I tried to use CSS reset but i am afraid it is useless it still the same problem. I used also !important but no response. my problem specially in the fonts sizes and families — unique_programmer, Apr 01 '13 at 12:34

score 2 · Answer 1 · edited May 23 '17 at 11:54

2

I know of two possible solutions.

One is to have your code embedded on the other site via an iframe. Your CSS won't clash then, unless the other site specifically writes something to modify your CSS inside the iframe. But by default, it won't be a problem.

Otherwise, you'll have to add MyWidget_ to the beginning of all of your class/ID names so as to prevent collision with the other site.

edited May 23 '17 at 11:54

Community

1
1

answered Apr 01 '13 at 11:54

Luke Shaheen

4,262
12
52
82

1

I agree completely, this is about the only way, but also like Arun said I'd remove any ids and opt for class names to be able to use multiple instances of widgets. – Robert Hoffmann Apr 01 '13 at 12:07

score 0 · Answer 2 · answered Apr 01 '13 at 12:01

my solution will be is to add a class my-widget-wrapper to the top element, in this case I think it is the element with id wrapper.

Then specify all css rules in my style file as a child of the class my-widget-wrapper.

Ex: To change the color of a elements to green, instead of css rule

a {
    color: green;
}

I would use

.my-widget-wrapper a {
    color: green
}

Side Note: When you develop a widget never use fixed id's in the widget elements, since it will restrict you to have only one instance of the widget in the page. Instead of using id attribute to identify elements use custom class attributes

i use classes in the css file the id in the wrapper is just for jquery. inside the jquery i add some html and make the style of them using widget.css so the id wrapper has nothing to do wwith the css — unique_programmer, Apr 01 '13 at 12:41

how to isolate CSS in a website gadget?

2 Answers2