Oficjalne forum pomocy serwisu PUN.pl

Rudik

Użytkownik

Skąd: Iława

Dołączył: 2007-06-18

Liczba postów: 5,530

Spoiler domyślnie ukryty, pokazywany po kliknięciu

Cześć,
ostatnio ktoś pytał o stworzenie modyfikacji, aby spoiler działał tak jak powinien - czyli pokazywał się dopiero po kliknięciu jakiegoś przycisku.
Zainspirowało mnie to do odświeżenia swoich magicznych skilli w JS, więc stworzyłem prosty kod.
Demo można obejrzeć tutaj, a oto kod:

<script type="text/javascript">
if (location.pathname == '/viewtopic.php') {
    var spoiler = document.getElementsByClassName('spoilerbox');
    for (var i = 0; i < spoiler.length; i++) {
        var p = spoiler[i].getElementsByTagName('p')[0];
        p.style.display = 'none';
        p.setAttribute('id', 'spoiler-' + i);
        var link = document.createElement('span');
        link.style.fontWeight = 'bold'; link.style.marginTop = '10px'; link.style.cursor = 'pointer'; link.style.display = 'block';
        link.appendChild(document.createTextNode('Pokaż'));
        link.setAttribute('onclick', 'spoilerToggle(' + i + ');');
        spoiler[i].appendChild(link);
    }
}
function spoilerToggle (id) {
    var p = document.getElementById('spoiler-' + id);
    p.style.display = (p.style.display == 'none') ? 'block' : 'none';
}
</script>

Podany kod wrzucamy do stopki.

Ostatnio edytowany przez Rudik (2013-05-07 19:23:19)

xn

Użytkownik

Dołączył: 2010-08-09

Liczba postów: 455

Odp: Spoiler domyślnie ukryty, pokazywany po kliknięciu

Dzięki!

Edit:
Wykasowałem to co wcześniej napisałem, poprawiony kod:

<script type="text/javascript">
if (location.pathname == '/viewtopic.php' || location.pathname == '/viewpoll.php' || location.pathname == '/post.php' || location.pathname == '/edit.php' || location.pathname == '/poll.php' || location.pathname == '/message_list.php') {
    var spoiler = document.getElementsByClassName('spoilerbox');
    for (var i = 0; i < spoiler.length; i++) {
        var p = spoiler[i].getElementsByTagName('p')[0];
        p.style.display = 'none';
        p.setAttribute('id', 'spoiler-' + i);
        var link = document.createElement('span');
        link.style.fontWeight = 'bold'; link.style.marginTop = '10px'; link.style.cursor = 'pointer'; link.style.display = 'inline-block';
        link.appendChild(document.createTextNode('Pokaż'));
        link.setAttribute('onclick', 'spoilerToggle(' + i + ');');
        spoiler[i].appendChild(link);
    }
}
function spoilerToggle (id) {
    var p = document.getElementById('spoiler-' + id);
    p.style.display = (p.style.display == 'none') ? 'block' : 'none';
}
</script>

To idzie do stopki

.spoilerbox p {
    background: black;
    color: black;
    display: inline-block;
    min-width: 100px;
}
.spoilerbox p:hover {
    color: white;
    min-width: 100px;
}
.spoilerbox p img {
    opacity: 0;
}
.spoilerbox p:hover img {
    opacity: 1;
}
.spoilerbox p[style="display: block;"] img {
    opacity: 1;
}

.spoilerbox p[style="display: block;"] {
    background: inherit;
    color: inherit;
    display: inherit;
    min-width: inherit;
}
.spoilerbox p[style="display: block;"]:hover {
    color: inherit;
    min-width: inherit;
}

A to do modyfikacji CSS.

Jakie są różnice?
Zmodyfikowany kod działa też w sondach, PW itd.
Jednakże tam, gdzie go nie uwzględniliśmy (bo mogłem coś przegapić ), oraz na chatboxie (bo tam kod JS z nowymi wiadomościami nie daje sobie rady), jak i dla osób z wyłączonym JS tekst w spoilerze będzie czarny, na czarnym tle, a jego kolor zmieni się dopiero po najechaniu myszą.

Ostatnio edytowany przez xn (2013-05-08 10:58:48)

Woytasio

Użytkownik

Dołączył: 2013-02-17

Liczba postów: 7

Odp: Spoiler domyślnie ukryty, pokazywany po kliknięciu

Działa super.

A jak zrobić aby słowo POKAŻ było bardziej wyraźne np. białe

xn

Użytkownik

Dołączył: 2010-08-09

Liczba postów: 455

Odp: Spoiler domyślnie ukryty, pokazywany po kliknięciu

Użyj CSS by go wystylizować.

Rakshi

Użytkownik

Dołączył: 2013-05-13

Liczba postów: 174

WWW

Odp: Spoiler domyślnie ukryty, pokazywany po kliknięciu

a czy dało by zrobić coś takiego że przy pisaniu tematu lub odpowiadaniu na jakiś temat
na górze był by przycisk "Ocena" (zamiast słowa spoiler)

po klieknieciu w ten przycisk w treści wiadomości automatycznie wklejał by się obrazek np po kliknieciu kilka krotnie przycisku "Ocena" pojawialo by sie więcej obrazków ( i tak np do max 6)

dało by rade coś takiego zrobić?

Ostatnio edytowany przez Rakshi (2014-07-31 11:56:26)

---

pro14ab

Moderator

Skąd: C:\users\pro14ab

Dołączył: 2013-01-20

Liczba postów: 1,198

WWW

Odp: Spoiler domyślnie ukryty, pokazywany po kliknięciu

Rakshi to nie powinien być nowy temat? Chodzi Ci o to, że jak kliknie się to w szybkiej odpowiedzi wkleja się np.

[img]http://www.sklepna5.pl/kruk/pliki/icon_normal.png[/img]

?

---

Discord: pro14ab#3318
>> GitHub <<
Polecam

Rakshi

Użytkownik

Dołączył: 2013-05-13

Liczba postów: 174

WWW

Odp: Spoiler domyślnie ukryty, pokazywany po kliknięciu

oo dokładnie

w sumie myślałem czy by nowego nie założyć ale w ostatecznym rozrachunku wydało mi się to podobne do mechaniki działania spoilera ale mogłem się mylić

a wracając do tematu jakieś pomysły?:)

Ostatnio edytowany przez Rakshi (2014-08-01 12:37:17)

---

Sher

Użytkownik

Dołączył: 2011-06-15

Liczba postów: 172

Odp: Spoiler domyślnie ukryty, pokazywany po kliknięciu

oo dokładnie

w sumie myślałem czy by nowego nie założyć ale w ostatecznym rozrachunku wydało mi się to podobne do mechaniki działania spoilera ale mogłem się mylić

a wracając do tematu jakieś pomysły?:)

Wydaje mi się, że najłatwiej będzie dodać taką emotikonkę :>

ukaszf9

Użytkownik

Dołączył: 2011-08-01

Liczba postów: 1,335

Odp: Spoiler domyślnie ukryty, pokazywany po kliknięciu

Jakieś preferencje gdzie takowy przycisk miałby się znajdować?