Post po lewej b±d¼ prawej stronie z zapamiêtywaniem

ukaszf9 - 2012-01-07 19: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