jquery - how to isolate CSS in a website gadget? -

-

this question has answer here:

i have livescore website , trying make gadget of website show part of in others websites,the problem face how isolate code (javascript , css) code of host site gadget. use "anonymous function" 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 () { // old versions of ie           if (this.readystate == 'complete' || this.readystate == 'loaded') {               scriptloadhandler();           }       };     } else { // other browsers       script_tag.onload = scriptloadhandler;     }     // try find head, otherwise default documentelement     (document.getelementsbytagname("head")[0] || document.documentelement).appendchild(script_tag); } else {     // jquery version on window 1 want use     jquery = window.jquery;     main(); }  /******** called once jquery has loaded ******/ function scriptloadhandler() {     // restore $ , window.jquery previous values , store     // 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);     }); }  })(); // call our anonymous function

everything going fine jquery not css (the css file loaded , worked fine of hosting site css effecting css) have no control on hosting site css , think have isolated code using anonymous function why css affected website orginal css ??? me please have been @ point while

i know of 2 possible solutions.

one have code embedded on other site via iframe. css won't clash then, unless other site specifically writes something modify css inside iframe. default, won't problem.

otherwise, you'll have add mywidget_ beginning of of class/id names prevent collision other site.


Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more