Forum PHP.pl

mam plik JS gdzie wstawiam przez document.write kod HTML z CSS, mam tam między innymi import css i style lokalne. Niestety jak wstawie go na stronę to część stylów się nadpisuje. Bo strona ma już swoje style css i teraz nie wiem co mam zrobić by wyczyścić styl css dla wyświetlanego przeze mnie kodu tak by wyświetlał się tak jak zdefiniowałem to u siebie.

Ma ktoś jakiś pomysł? Ja wiem, że mogę wymusić styl przez !important, ale to nie rozwiązuje mi problemu ze stylami których nie zdefiniowałem. Jężeli nie mam np dla danego tagu ustawionego borderu, a na stronie jest to important nic mi nie pomoże.

A może jakiś inny sposób wstawiania widgeta na stronę? może coś innego niż document.write? Znaczy można to jako iframe, ale czy to sensowne rozwiązanie?

Musisz zdefiniować style dla każdego tagu, który zostaje domyślnie ostylowany, swoimi stylami. Jeżeli chcesz uniknąć nadpisania stylów, które nie zdefiniowałeś, to nadaj swojemu wigetowi unikalną klasę np https://jsfiddle.net/g4LsLpu0/

Ten post edytował CuteOne 28.04.2016, 16:22:30

http://stackoverflow.com/questions/1590103...or-element-only
Skorzystałem z tego rozwiązania.

Nadałem id dla widgetu i dałem takie coś i to rozwiązało mój problem. Mam nadzieje, że to jest poprawne rozwiązanie. Napewno działa mam nadzieje, że za każdym razem

[HTML] pobierz, plaintext 
div#moj_widget *{
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
}
[HTML] pobierz, plaintext 

jedynie o ile miałbyś więcej widgetów to nie poprawne jest mniej więcej (będzie działało ale...) wiele tych samych "id"...
+ o ile ten skrypt jest częścią czegoś większego, gdzie na "obcej" stronie jest załączany JS to sama metoda document.write jest bardzo złym pomysłem, gdyż przy późniejszym asynchronicznym wczytaniu skryptu skasujesz zawartość strony... rozwiązanie - twórz elementy DOM lub wstrzykuj kod HTML ale inaczej ;]

i tak i nie... dalej to i element mógłby być czarny a nie jest ;] - to akurat był jakiś "reset" w duuuużym skrócie... osobie mniej doświadczonej w pracy można wytłumaczyć kiedy reguły CSS są nadpisywane a kiedy nie...

z zawodu nie jestem programistą mimo, iż 5/6 lat temu "dorabiałem" (o ile przy moich zarobkach można to nazwać dorabianiem ;p) z pasji przy pisaniu w JS choć wtedy miałem większą wiedzę z PHP... i jedną z rzeczy dla grafików w manifo.pl to miałem wykonać narzędzie graficzne do wizualizacji styli pomijając ostylowanie na istniejącej stronie...

...lata naszej rejestracji, to co do nauki JS, zachęcali zaglądać w kod Prototype, jQuery dobrze wtedy rozwijał się choć kod nie był super ;], pamiętam, jak wtedy jeszcze w jQ nie było metody .delegate a na tym forum był już kod jak to powinno działać (tzn. nie była to metoda jQ)... co poprawne to ludzie wyznaczają z czasem...

samo Node.js 5/6 lat temu raczkowało a teraz proszę... oprócz wiedzy marketing i brak potrzeby nauki dodatkowego [rus.] jazyka ;p, no i jest... gdzie coś podobnego łatwo można było napisać w PHP i ludzie serwery do nietypowych zastosowań pisali w języku który znali zamiast uczyć się C++ i bibliotek właśnie w PHP... choć wielu pisze to w trybie blokującym ale mniejsza z tym Guru - Multiplexing - gdy potrzebowałem, to okazało się, iż wielu nawet nie umie stosować Curl multi i tych informacji w necie było nie wiele by nie zrywać połączenia ze stroną którą się parsuje więc o czym tu mówić...

obecnie na swoje potrzeby wolę korzystać z C++ ASIO ;] - ale hobbystycznie ;]... + do obróbki niektórych stron zamiast używać jakichś pluginów do przeglądarek w JS to wolę QtWebki ;]

Oczywiście mam rózne id. To tylko podałem za przykład

Czyli lepiej jak dam np
<script src="http://moj,pll/display.js?id=1234"></script>
<div id="widget_id_1234"></div>
i potem dac jakiś innerHtml tak?


Ogólnie mam to zrobione w ten sposób. Osoba generuje sobie widget gdzie personalizuje wygląd (kolory, wielkości itd) i potem wstawia to na stronę.

Tylko mam pewien problem bo nie moge dac 2 id dla tego samego diva. a jeden ID potrzebny jest mi do stylów. Bo dla każdego rodzaju widgetu mam zdefiniowany styl.css plus w kodzie dodaje do tagów style zedifniowane przez uzytkownika. np.

<div id="widget_1"><h2 style="color: red">Tytul</h2></div>

nie moge dać

<div id="widget_id_1234" class="widget_1"><h2 style="color: red">Tytul</h2></div>

ponieważ jak na stronie jest zdefiniowany styl #cos h2{color: blue} to styl po id jest ważniejszy od mojego .widget_1 h2 i nie nadpisuje wartości (testowałem), no chyba że bym generował dla każdego widgetu odzielny styl css, co nie jest trudne ale wydawało mi się zbyteczne.

można zrobić jakis htaccess gdzie odwołanie http://moj.pl/css/styl_id_1234.css generuje styl z określonym id w stylach.

Jak zrobić by to było dobrze ?

Wiem, ze wszystkie PP jak adsense definiuja sobie wygląd w kodzie js w postaci zmiennych, ale nie chciałem tego robić w ten sposób bo jak ktoś będzie miał X widgetów i zmieni sobie wygląd to potem musi zmieniać w każdym kodzie kolory, a tak u mnie definiuje sobie styl i może go wykorzystac w wielu widgetach i za 1 kliknięciem może sobie kolory zmienić bez ingerowania w kod widgeta samego.

Jakieś sugestie ?

Ten post edytował Lord 28.04.2016, 22:26:11

"Cicha woda brzegi rwie" ;]
nie udzielałeś się na forum a teraz widać, że jednak wiesz co i jak ;p

robisz bardziej zaawansowany "system" - jak już wspomniałem kilka id tych samych zadziała [na 99% - a jak pisałeś, że sprawdzałeś to i możesz sprawdzić wszystkie przeglądarki...]

... szczegóły a i pewnie nie wszystkie napisałeś w ostatnim poście... trochu musisz potestować ale... i dalej innerHTML (i jego implementacje) nie były mile widziane w przeszłości, a jak teraz nie wiem (ale najśmieszniejsze u programistów, jak to dobrze obudujesz i tego nie będą widzieć to ok o.O)...

...jeśli jest tak jak pamiętam, że wszystkie przeglądarki respektują kilka "id" i tylko tak możesz pewne rzeczy nadpisać to z tego skorzystaj... problemem jest dla dalszych "developerów", iż powinni korzystać np. z .queryselectorAll a nie z document.getElementById itd...

...choć wspomniałeś co chcesz zrobić to i nie do końca choć może... masz wielu userów i oni mają zdefiniowane style domyśle a potem widgety jak sub-aplikację.... no na wiele sposobów to można rozwiązać... o ile nie chcesz się bawić w "liczenie" wartości którą możesz zrobić po stronie serwera lub klienta to możesz znowu doraźnie nadpisać wartości przez dokładniejszą definicję CSS dodając np jakiś kontener z dodatkowym ID czy jak tam ;p

ps. nie bierz teraz tego jako wykładnię a ja ko podpowiedź gdyż jestem podchmielony i też nie programuję z zawodu ;p