Syndication am Bildrand fixieren

[mv_alex]

Hallo zusammen,

ich suche nach einem Weg, die Syndication-Links eines Artikels (drucken, PDF, Facebook etc.) am rechten Bildrand zu fixieren, sodass sie beim Scrollen immer an der gleichen Stelle bleiben, bzw. idealerweise dort auch erst noch ausgeklappt werden müssen.

Es gibt ja z. B. diverse jQuery-Ansätze dafür - aber welcher eignet sich zum Einsatz innerhalb von Contao?

Habt Ihr so etwas schon mal umgesetzt und könnt mir eine Lösung empfehlen? Ich würde mich über jede Anregung freuen!

Gruß Alex

[operatorone]

Hi,

da gibt es zwei Ansätze. Entweder editierst du das fe_page-Template und fügst im Footer folgenden Code ein:

<div class="socialshares"><span>Teilen: </span>
<a href="share/?p=facebook[&]u={{env::path}}{{env::request}}[&]t={{page::pageTitle}}" rel="nofollow" title="{{page::pageTitle}}" onclick="window.open(this.href,'','width=640,height=380,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');return false"><img src="<?php echo TL_FILES_URL; ?>assets/contao/images/facebook.gif" width="16" height="16" alt=""></a>
<a href="share/?p=gplus[&]u={{env::path}}{{env::request}}[&]t={{page::pageTitle}}" rel="nofollow" title="{{page::pageTitle}}" onclick="window.open(this.href,'','width=600,height=200,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');return false"><img src="<?php echo TL_FILES_URL; ?>assets/contao/images/gplus.gif" width="16" height="16" alt=""></a>
</div>

oder du erstellst ein Modul und verwendest diesen Code:

<div class="socialshares"><span>Teilen</span><br>
<a href="share/?p=facebook[&]u={{env::path}}{{env::request}}[&]t={{page::pageTitle}}" rel="nofollow" title="{{page::pageTitle}}" onclick="window.open(this.href,'','width=640,height=380,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');return false"><img src="/assets/contao/images/facebook.gif" width="16" height="16" alt="facebook"></a>
<a href="share/?p=gplus[&]u={{env::path}}{{env::request}}[&]t={{page::pageTitle}}" rel="nofollow" title="{{page::pageTitle}}" onclick="window.open(this.href,'','width=600,height=200,modal=yes,left=100,top=50,location=no,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');return false"><img src="/assets/contao/images/gplus.gif" width="16" height="16" alt="googleplus"></a>

</div>

Viele Grüße,
operatorone

[Spooky]

Eigentlich reicht dafür einfach

.pdf_link {
    position: fixed;
    right: 0;
    top: auto; /* je nach Geschmack */
    width: 18px; /* je nach Geschmack */
} 

Für das Ausklappen braucht man etwas mehr, geht aber auch CSS only - kommt aber darauf an was man nun genau haben will.

[mv_alex]

Vielen Dank für Eure Anregungen!

Ich denke, ich werde es mal mit einer CSS-Lösung probieren. Da kann man ja mit Transitions auch eine Menge anstellen, wenn auch nur für moderne Browser.

Gruß Alex