Pływająca reklama w panelu (widok tematu)

[Dynloth]

Siemanko,

Chciałem sobie zrobić na forum reklamę w panelu (jeden prostokąt w ułożeniu pionowym, lub np 3 kwadraty - jeden pod drugim.)

Początek zaczynałby się równo z nazwą tematu. Przewijając temat w dół, reklama zatrzymywałaby się równo z oknem przeglądarki i "płynęła" dalej w dół do końca strony, równolegle z ostatnią tabelką, np użytkownicy online.

Na ten moment dodałem widget php i do niego poniższy kod:

<div style="position:fixed; right:25;top:15;"><a href="http://itp-itd"><img src="https://workoutathletes.com/wp-content/uploads/2020/04/Workout-Athletes-Logo-BLUE.png" alt="reklama"></a></div>

Efekt wygląda jak na screenach. 

 

Czyli początek tabelki, który jest pusty i niepotrzebny. Natomiast podczas przewijania strony reklama jest w jednym ustalonym miejscu, a nie pod oknem przeglądarki. 

Ma ktoś pomysł jak to przerobić, może ktoś kiedyś już sobie robił taką reklamę na forum. 

 

Z góry dzięki za pomoc

[DawPi]

A może cały pływający sidebar?

https://invisioncommunity.com/forums/topic/455108-sticky-sidebar-with-ipssticky/

[Dynloth]

No to pobawiłem się tym co podesłałeś e efekt jest taki:

https://workoutathletes.com/forum/

Przy przewijaniu w dół jak już blok zaczyna się ruszać to brzydko to wygląda bo tak jakby skacze. ?

No i błąd jaki się pojawił to na widoku tematu zepsuło się miejsce na dodanie bloków.

 

Coś można poprawić czy to nie będzie śmigać jak powinno?  

 

Najbardziej chodzi mi o taki efekt:

https://www.typografie.info/3/Schriften/listen.html/

Edytowane 14 Stycznia 2021 przez Dynloth

[DawPi]

Tam to jest tak:

<div class="ipsBox ipsPadding:half ipsType_center" data-ipssticky="" data-ipssticky-relativeto="#ipsLayout_sidebar" style="position: static; z-index: 5100; top: auto;">
<!-- -->
</div>

Zobacz taki kod.

[Dynloth]

A więc kod mam taki:

  {{$adsForceSidebar = ( \IPS\Settings::i()->ads_force_sidebar AND \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) );}}
{{if (isset( \IPS\Output::i()->sidebar['enabled'] ) and \IPS\Output::i()->sidebar['enabled'] ) && ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) || ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) || ( \IPS\Dispatcher::i()->application instanceof \IPS\Application AND \IPS\Dispatcher::i()->application->canManageWidgets() ) || $adsForceSidebar )}}

  <div id='ipsLayout_sidebar' class='ipsLayout_sidebar{$position} {{if !( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) && ( !isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) || !\count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) && \IPS\Dispatcher::i()->application->canManageWidgets() && !$adsForceSidebar}}ipsLayout_sidebarUnused{{endif}}' data-controller='core.front.widgets.sidebar'>
			<div class="ipsBox ipsPadding:half ipsType_left" data-ipssticky="" data-ipssticky-relativeto="#ipsLayout_sidebar" style="position: static; z-index: 5100; top: auto;">

    {{if $announcements = \IPS\core\Announcements\Announcement::loadAllByLocation( 'sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) )}}
			{template="announcementSidebar" group="global" app="core" params="$announcements"}
		{{endif}}
		{{if isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== ''}}
			<aside id="elContextualTools" class='ipsClearfix' {{if isset( \IPS\Output::i()->sidebar['sticky'] )}}data-ipsSticky{{endif}}>
				{expression="\IPS\Output::i()->sidebar['contextual']" raw="true"}
			</aside>
			<hr class='ipsHr ipsSpacer_both'>
		{{endif}}
		{{if $adsForceSidebar OR ( \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) ) )}}
			<div data-role='sidebarAd'>
				{advertisement="ad_sidebar"}
			</div>
			<br><br>
		{{endif}}
		{template="widgetContainer" group="global" app="core" params="'sidebar', 'vertical'"}
	</div>
     </div>   
{{endif}}

 

Efekt jest taki:

https://workoutathletes.com/forum/

 

I teoretycznie mogłoby tak być w sumie, gdyż też to fajnie wygląda i jest praktyczne, leczy czy dałoby się tą funkcję odwrócić, tak aby to dolna tabelka się przyczepiła do ekranu podczas przewijania, a nie górna tak jak to jest teraz? 

No i gdzieś zrobiłem błąd, gdyż nie ma odstępu między tabelkami tak jak np tutaj na Invisionize. Wygląda jakby się wszystko w jednej tabeli wcisnęło. 

Dziękuję @DawPi za dotychczasową pomoc.

[Dynloth]

Nie mogę edytować postu, muszę napisać drugi. 

W widoku tematu nie wyświetla się reklama, więc jest gdzieś kolejny błąd popełniony w moim kodzie.

[DawPi]

A zobacz to, bo u mnie na localu śmiga:

{{$adsForceSidebar = ( \IPS\Settings::i()->ads_force_sidebar AND \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) );}}
{{if (isset( \IPS\Output::i()->sidebar['enabled'] ) and \IPS\Output::i()->sidebar['enabled'] ) && ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) || ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) || ( \IPS\Dispatcher::i()->application instanceof \IPS\Application AND \IPS\Dispatcher::i()->application->canManageWidgets() ) || $adsForceSidebar )}}

  <div id='ipsLayout_sidebar' class='ipsLayout_sidebar{$position} {{if !( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) && ( !isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) || !\count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) && \IPS\Dispatcher::i()->application->canManageWidgets() && !$adsForceSidebar}}ipsLayout_sidebarUnused{{endif}}' data-controller='core.front.widgets.sidebar'>
			<div data-ipssticky="" data-ipssticky-relativeto="#ipsLayout_sidebar" style="position: static; z-index: 5100; top: auto;">

    {{if $announcements = \IPS\core\Announcements\Announcement::loadAllByLocation( 'sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) )}}
			{template="announcementSidebar" group="global" app="core" params="$announcements"}
		{{endif}}
		{{if isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== ''}}
			<aside id="elContextualTools" class='ipsClearfix' {{if isset( \IPS\Output::i()->sidebar['sticky'] )}}data-ipsSticky{{endif}}>
				{expression="\IPS\Output::i()->sidebar['contextual']" raw="true"}
			</aside>
			<hr class='ipsHr ipsSpacer_both'>
		{{endif}}
		{{if $adsForceSidebar OR ( \IPS\core\Advertisement::loadByLocation( 'ad_sidebar' ) AND ( ( isset( \IPS\Output::i()->sidebar['contextual'] ) && trim( \IPS\Output::i()->sidebar['contextual'] ) !== '' ) OR ( isset( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) && \count( \IPS\Output::i()->sidebar['widgets']['sidebar'] ) ) ) )}}
			<div data-role='sidebarAd'>
				{advertisement="ad_sidebar"}
			</div>
			<br><br>
		{{endif}}
		{template="widgetContainer" group="global" app="core" params="'sidebar', 'vertical'"}
	</div>
     </div>   
{{endif}}

 

[Dynloth]

Czyli coś musiałem źle zrobić bo w Twoim kodzie jest ok i działa. 

Natomiast, która linijka odpowiada za wybór przewijanych tabelek? Chciałbym zmienić żeby to ostatnia tabelka przykleiła się do ekranu, a nie pierwsza. 

W sensie mam np. 6 tabelek, przewijam ekran w dół, napotykam ostatnią tabelkę - i to ona zaczyna płynąć z ekranem dalej w dół. 

Bo w tej konfiguracji jak np chce zobaczyć 4 tabelkę, to muszę przewijać na sam dół, żeby się tabelki zablokowały i dopiero mogę zobaczyć zawartość przykładowej 4 tabelki, co jest w ogóle nie praktyczne. ?

[DawPi]

Ło kurde, nie mam pojęcia - czy w ogóle jest to możliwe.  Popatrz po parametrach:

https://invisioncommunity.com/4guides/themes-and-customizations/javascript-framework/using-ui-widgets/ipsuisticky-r62/

[aXen]

Nawiązując do tego:

20 godzin temu, Dynloth napisał:

Najbardziej chodzi mi o taki efekt:

https://www.typografie.info/3/Schriften/listen.html/

Zauważ że jest tam tylko jeden blok, który podąża za ekranem, a nie cały blok z widgetami.

 

Jeżeli masz aplikację pages to stwórz nowy widget i tam zadeklaruj position sticky np.:

<div data-ipsSticky>
  	test
</div>

 

Efekt:

[Dynloth]

28 minut temu, aXen napisał:

Zauważ że jest tam tylko jeden blok, który podąża za ekranem, a nie cały blok z widgetami.

Dziękuję za odpowiedź, niestety pages przestałem opłacać licencję gdyż praktycznie ich nie używałem. 

Link który podałem chciałem zrobić tylko do wyświetlania takiego formatu w widoku tematu. Natomiast w widoku głównym forum miało być bez zmian.

Kod który podał DawPi, robi fajną robotę i się sprawdza (przynajmniej jak dla mnie) zarówno w widoku tematu i forum. 

Lecz niestety jest ten jeden minus że ekran łapie od górnej tabelki, a nie dolnej. 

Może uda mi się ustalić gdzieś, jak przerobić ten kod żeby śmigał tak jak chce.

 

Tak czy tak dziękuję Wam za odpowiedzi, a ja się bawię z tym dalej. ?