Jump to content

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


Dynloth
 Share

Recommended Posts

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. 

1.thumb.png.5adbbdeb513d5ae2d274d1507e53ac90.png2.thumb.png.7e1cfcac78265755b4edfc85d9cea2ad.png

 

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 :)

Link to comment
Share on other sites

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.

 3.thumb.png.5ae868f897b2f30afb7ea8512dc0cc66.png

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

 

Najbardziej chodzi mi o taki efekt:

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

Edited by Dynloth
Link to comment
Share on other sites

  • Manager

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.

  • Thanks 1

intermedia - profesjonalne rozwiązania Invision Power Board

---

Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

  • Manager

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}}

 

  • Thanks 1

intermedia - profesjonalne rozwiązania Invision Power Board

---

Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.

Link to comment
Share on other sites

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. 🤔

Link to comment
Share on other sites

  • Manager

Ł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/

  • Thanks 1

intermedia - profesjonalne rozwiązania Invision Power Board

---

Chcesz uzyskać szybko i sprawnie pomoc? Uzupełnij wersję i adres w profilu.

Link to comment
Share on other sites

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:
image.thumb.png.22a558702b212b351b204f000f2d1b8a.png

  • Thanks 1
Link to comment
Share on other sites

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. 😅

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.