Post po lewej bądź prawej stronie z zapamiętywaniem

ukaszf9 · 2012-01-07 20:43:16

Przedstawiony poniżej sposób pozwala na utworzenie w poście możliwości zmiany jego położenia ( wiadomość po prawej bądź lewej ). Pierworodnie skrypt miał zostać wykonany w jQuery ale ze względu, że obsługa jquery.cookie.js jest dość trudna ( wg. mnie oczywiście ) to przedstawiam sposób z wykorzystaniem kodu z kurshtml.pl ( pokazany przez ffox w dziale css ). My go sobie przerobimy na właśnie taki dodatek.

Potrzebne
- Własne konto na cba.pl
- 10 minut na zrobienie wszystkiego

Więc zaczynajmy.
1. Wejdź na swoje konto cba.pl w bazę fftp.
2. Utwórz trzy pliki:
- left.css
- right.css
- script.js

W ich treści wpisz:

Dla left.css

Kod:

.postleft {float:left;width:18em;}
.postfootleft {float:left;width:18em;text-align:left;}
.postright {border-left-width:18em;}
.postfootright {border-left-width:18em;float:right;}
.postright {width:73%;}

Dla right.css

Kod:

@import url('http://www.TWOJEFORUMNAPUNIE.pun.pl/style/TWOJANAZWASTYLU.css');
.postfootleft {float:right !important;text-align:right !important;}
.postleft {float:right !important;}
.postright {border-left-width:0em !important;width:70% !important;}
.postfootright {float:left !important;border-left-width:0em !important;}

Uwzględniając, że gdzie jest TWOJANAZWASTYLU tam dajemy styl jakiego używamy. Na początek wpiszcie Test9 i go sobie ustawcie na forum.
Gdzie TWOJEFORUMNAPUNIE wpisujemy adres naszego forum.

Dla script.js

Kod:

/**
 * @author Sławomir Kokłowski {@link http://www.kurshtml.edu.pl}
 * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
 */

function Skin(name, expires, path, message)
{
    this.expires = typeof expires != 'undefined' ? expires : 365;
    this.message = typeof message != 'undefined' ? message : 'Wymagana obsługa cookie';
    this.name = typeof name != 'undefined' ? name : 'skin';
    this.path = typeof path != 'undefined' ? path : '/';
    
    var link = null;
    var original = '';
    var css = '';
    
    this.get = function()
    {
        if (css != '') return css;
        var matches = document.cookie.match(new RegExp('(^|;\\s*)' + this.name + '=([^;]*)'));
        if (matches && matches.length == 3) css = matches[2];
        return css;
    }
    
    this.set = function(url)
    {
        document.cookie = this.name + '=' + url + (this.expires > 0 ? ';expires=' + new Date(new Date().getTime() + 86400000 * this.expires).toGMTString() : '') + ';path=' + this.path;
        css = url;
        if (this.message != '' && !navigator.cookieEnabled) window.alert(this.message);
        this.show();
    }
    
    this.reset = function()
    {
        css = '';
        document.cookie = this.name + '=;path=' + this.path;
        this.show();
    }
    
    this.show = function()
    {
        var url = this.get();
        if (url != '' || original != '')
        {
            if (link == null || original == '')
            {
                for (var i = 0; i < document.getElementsByTagName('link').length; i++)
                {
                    if (document.getElementsByTagName('link')[i].getAttribute('rel').toLowerCase() == 'stylesheet')
                    {
                        link = document.getElementsByTagName('link')[i];
                        original = link.getAttribute('href');
                        break;
                    }
                }
            }
            link.setAttribute('href', url != '' ? url : original);
        }
    }
    
    this.show();
}


var skin = new Skin();

Po zapisaniu tego na swój serwer wchodzimy w Administracja - Ustawienia - Ogłoszenie i na końcu swojego ogłoszenia wklejamy taki kod:

Kod:

</div></div></div></div>
<div id="announce" class="block left-right">
<h2>Po której stronie ma wyświetlać się post ?</h2>
<div class="box">
<div class="inbox">
<div class="left or  right">
<a href="javascript:void(0)" onclick="skin.reset(); return false">LEWA STRONA</a>
<div class="right" style="float:right;"><a href="javascript:void(0)" onclick="skin.set('http://TWOJANAZWA.cba.pl/right.css'); return false">PRAWA STRONA</a></div>

Uwzględniając, że gdzie jest TWOJANAZWA to nazwa twojej strony na cba.pl

Oraz do modyfikacji css na końcu wklejamy taki kod:

Kod:

/*** LEFT-RIGHT by ukaszf9 ***/
.left-right {display:none;}
#punviewtopic .left-right {display:block;}
</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link rel="Stylesheet" type="text/css" href="http://TWOJANAZWA.cba.pl/left.css" />
<script type="text/javascript" charset="iso-8859-2" src="http://TWOJANAZWA.cba.pl/script.js"></script>
<style type="text/css">@import url('http://TWOJANAZWA.cba.pl/left.css');</style>
<style type="text/css">

Oczywiście gdzie TWOJANAZWA uzupełniamy tak jak poprzednio.

Rezultat jest taki, że po wejściu w obojętnie jaki wątek powinno nam się pod ogłoszeniem pojawić drugie ogłoszenie z dwoma odnośnikami o treści "LEWA STRONA" i "PRAWA STRONA". Nie trudno się domyślić co będzie po kliknięciu.

ukaszf9

Ogłoszenie

Reklama ( Kliknij w celu pokazania zaprzyjaźnionych stron )

Skrypty ( Informacje dotyczące użytkowania )

Współpraca ( Wymiana bannerem, kontakt itp. )

#1 2012-01-07 20:43:16