[FOORUM] Suurte signatuuride osaliselt kuvamine

Vaata eelmist teemat Vaata järgmist teemat Go down

Tonight
Tonight

[FOORUM] Suurte signatuuride osaliselt kuvamine Vetera11
Liitus : 19/02/2012
Postitusi : 17983

PostitamineTonight 28.12.18 2:48

[FOORUM] Suurte signatuuride osaliselt kuvamine Signaa10

Sissejuhatus

Kindlasti oleme me kõik kohanud foorumis sellist kasutajat, kelle signatuur võtab pool ekraanist endale. Kui sa ei soovi administraatorina signatuuride suurust piirata, siis võib üheks heaks lahenduseks olla signatuuride lõikamine ehk osaliselt kuvamine: kui inimene vajutab vastavale nupule, siis on tal võimalik näha signatuuri täissuuruses.

Paigaldamine

Lisa Javascript (ACP -> Modules -> HTML & JAVASCRIPT -> Javascript codes management -> [FOORUM] Suurte signatuuride osaliselt kuvamine Ajoute10).
In the topics (kui sa soovid seda terves foorumis, siis vali In all the pages)
Kood:
$(document).ready(function() {
         
    var settings = {
        height : 100,
        title : 'Signatuuri kuvamine',
        show : 'Kuva rohkem',
        hide : 'Kuva vähem'
    };
         
    $('.signature_div').each(function() {
      if ($(this).height() > settings["height"]) {
          var Y = settings["height"].toString();
          var t0 = 'height:'+Y+'px;overflow:hidden;';
          var t1 = '<div id="showMore" class="toggleSig" title="'+settings["title"]+'">'+settings["show"]+'</div>';
               
        $(this).attr('style',t0).before('<div></div>'+t1);
       
          $(document).on('click','#showMore',function() {
            $(this).next().attr('style','height:auto;');
            $(this).after('<div id="showLess" class="toggleSig" title="'+settings["title"]+'">'+settings["hide"]+'</div>').remove();
          });
         
          $(document).on('click','#showLess',function() {
            $(this).next().attr('style',t0);
            $(this).after(t1).remove();
          });
      }
    });
});
Koodis määrab 'height' väärtus maksimaalse kuvatava kõrguse (alates sellest "peidetakse" pilt ära).

Seejärel anname nupule kujunduse. Liigu ACP -> Display -> Pictures and Colors -> Colors -> CSS Stiilifail ja lisa järgmine CSS:
Kood:
.toggleSig {
background:#FFF;
border:1px solid #CCC;
box-shadow:0 -10px 3px rgba(0, 0, 0, 0.07) inset;
color:#000;
cursor:pointer;
display:inline-block;
margin-bottom:3px;
margin-top:10px;
padding:3px
}
.toggleSig:hover {
border:1px solid #059;
color:#D41141
}
CSS koodi tuleks sul muuta nii, et välimus ühtiks üldise foorumi kujundusega.

Vaata eelmist teemat Vaata järgmist teemat Tagasi üles

Soovid vestluses osaleda?

Selleks logi sisse või tee endale kasutaja.

Liitu foorumiga

Tee endale kasutaja ning osale aruteludes.


Tee uus kasutaja

Logi sisse

Omad foorumis juba kasutajat? Logi sisse.


Logi sisse

 
Permissions in this forum:
Sa ei saa vastata siinsetele teemadele