Bootstrap und die Sache mit den OnePagern

Discuss phpwcms here, please do not post support requests, bug reports, or feature requests! Non-phpwcms questions, discussion goes in General Chat!
Old Boy
Posts: 1035
Joined: Fri 23. Nov 2012, 13:52

Bootstrap und die Sache mit den OnePagern

Post by Old Boy » Wed 5. Aug 2015, 19:04

Ich halte pers. diese OnePager-Lösung für absoluten Quatsch, aber was soll man machen, die Welt braucht das anscheinend ... und interessant ist die Aufgabenstellung schon :wink:
Also habe ich mal nachgelesen, was die Jungs so machen und habe meine alten Experimente herausgesucht, aus einer Zeit, da der Begriff OnePager noch gar nicht existierte!

Bei meinen Experimenten hatte ich versucht, das über mehrere Artikel in Form einer Artikelliste zu lösen, wobei ich die vorhandenen ContentParts der einzelnen Artikel per SHOW_CONTENT nachgeladen hatte...

Gestern habe ich dann festgestellt, das "andere" User eben diese Idee hatten und anscheinend auch über die Tatsache stolpern, das in diesem Fall die Verwendung der cpgroup custom Methode scheitert, da die erforderlichen Elemente anscheinend in einer "falschen" Reihenfolge abgearbeitet werden und die "umschliessenden" Container nicht generiert werden!
Mist!!!

Also habe ich noch mal überlegt, ob das denn nicht mit den in phpwcms vorhandenen Bordmitteln ANDERS gelöst werden könnte, also einfach mit Ankern innerhalb eines einzigen Artikels ... und siehe da, die ersten Versuche sind ganz erfolgversprechend gelaufen.

Auch die Navigation lässt sich mittels Boostrap und den bekannten phpwcms RTs einfach realisieren.
Momentan zickt Firefox noch mit dem punktgenauen Anspringen der Zieladresse , aber ich denke, das ist eine Frage der korrekten CSS-Einträge und sollte lösbar sein... hoffe ich zumindest :?

"Prinzipiell" also machbar... ich werde weiter im Sandkasten knobeln und experimentieren:
http://bootstrap.pepes-sandbox.de/onepa ... tteln.html

Wie habt ihr denn dieses Problem gelöst... sachdienliche Hinweise sind gerne gelesen und entsprechend bewundert?

Ich gehe derweil man eine Runde um den See, die Enten füttern :wink:

photojo
Posts: 660
Joined: Wed 15. Nov 2006, 20:02
Contact:

Re: Bootstrap und die Sache mit den OnePagern

Post by photojo » Thu 6. Aug 2015, 06:57

Hi,

kannst du evtl. ganz kurz, auch ohne Screenshots erläutern, wie du das nun realisiert hast?

Und zu dem zielgenauen ansteuern: evtl. geht das ja mit einem kleinen js, das ja "später" an die entsprechende Stelle scrollt. Und hier könnte man ein offset einpflegen. Nur so eine Idee.

Gruß

Old Boy
Posts: 1035
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy » Thu 6. Aug 2015, 14:42

OK, wenn du mich sooo auf Knien anbettelst :lol:

Ich habe mal angefangen unseren Weg zu beschreiben,
komme aber in den nächsten Tagen wohl eher nicht dazu, dort weiter zu machen!
http://bootstrap.pepes-sandbox.de/onepa ... tteln.html

Erst gegen Mitte August wird wieder Zeit vorhanden sein.
Im Moment wird der Karpfenteich abgelassen und wir müssen die glitschigen Fische behutsam umsetzen.
Das dauert!

Old Boy
Posts: 1035
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy » Sat 8. Aug 2015, 23:52

Das Wetter war nicht gut genug, um die anstehenden Arbeiten im Park zu erledigen... OK, haben wir uns eben doch noch mal schnell den "phpwcms Bordmittel OnePager" vorgenommen.
Je mehr man experimentiert, umso mehr erkennt man die Vorteile, auf Bootstrap zurückgreifen zu können. Das geht einfach verdammt fix und man bedauert nahezu, niemandem mehr eine gebootstrapte Internetseite andrehen zu können :D

Trotzdem, der OnePager ist nicht wirklic mein Ding, mir fehlen einfach die Strukturierungsmöglichkeiten.
Aber was solls, die Dinger werden ja eh nur für Portfolios oder Werbekampagnen verwendet, bei denen 3-6 Bereiche ausreichen.

Trotzdem haben wir nicht Ruhe gelassen, bis es nun auch möglich ist, bei Bedarf Informationen per SlideIN Panel reinrutschen zu lassen... ja, so kann man sich das Ding schon etwas brauchbarer vorstellen, quasi ein OnePager mit Geheimtüren :D

Wer mal sehen möchte, das es wirklich funktioniert: http://bootstrap.pepes-sandbox.de/onepa ... tteln.html
Section 1 und 3 haben so eine Geheimtüre.
OK, an der Formatierung müssen wir auch hier wieder etwas feilen, aber das wird schon gehen, wir sind recht zuversichtlich :wink:

Eins aber sein noch lobend angemerkt...
phpwcms ist durch seine einfaches Templating und die diversen ReplacementTags eine echte Wunderwaffe, die mehr unter der Haube verbirgt, als man nach Aussen sehen kann. Es macht einfach Spass damit zu arbeiten. Schade, dass nur, dass man das meiste nicht sieht oder irgendwo nachlesen kann!

Fast vergessen ist der Wunsch nach einer funktionierenden multilingualen Lösung...
vom ausgefeilten Rechtssystem ganz zu schweigen!

Aber wer braucht das schon?
Wir jedenfalls spielen in den kommenden Tagen weiter mit den bisher "gefundenen" Bordmitteln von phpwcms, ist doch was !!

Schliesslich gibt es doch das alte Sprichwort:
Die Taube im Bett ist besser als die Stumme auf dem Dach!
... oder so ähnlich :?

Old Boy
Posts: 1035
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy » Wed 12. Aug 2015, 01:37

So, im Moment bin ich zwar nur per iPad unterwegs, aber nach dem Abendessen war etwas Zeit... und das hat gereicht, um unserem OnePager das gemütliche Scrollen beizubringen.
Ich kann im Moment nicht prüfen, ob - außer dem Safari - auch andere Browser die korrekten Ankerstellen der einzelnen Sections präzise anfahren, aber von hier aus, sieht alles ganz ordentlich aus und das eingetragene Overlay scheint akzeptiert zu sein:

http://bootstrap.pepes-sandbox.de/onepa ... tteln.html

Wenn es etwas zu meckern gibt ... immer her damit bitte!

photojo
Posts: 660
Joined: Wed 15. Nov 2006, 20:02
Contact:

Re: Bootstrap und die Sache mit den OnePagern

Post by photojo » Wed 12. Aug 2015, 08:23

Hi Old Boy,

super Sache. Mit welchem Script hast du das Scrollen realisiert?

Gruß
Jo

P.S.: Der nächste Onepager wird sicher einer nach deiner Methode!

Old Boy
Posts: 1035
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy » Wed 12. Aug 2015, 16:45

Na, das hört sich ja gut an :D

Hier das Sriptlet für das smooth scrolling:
<!-- JS:
$(document).ready(function(){
$('a[href^="onepager-mit-bordmitteln.html#cpid"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 88 }, 2000, 'swing', function () {
window.location.hash = target;
});
});
});
-->
Der rot markierte Bereich ist natürlich der eigenen Situation anzupassen!
Lässt man den grün markierten Teil weg, werden ALLE Anker "gemütlich" angefahren! Z.B. auch der TOP-Link.

User avatar
kukki
Posts: 1661
Joined: Mon 7. Feb 2005, 20:02
Location: Strausberg bei Berlin
Contact:

Re: Bootstrap und die Sache mit den OnePagern

Post by kukki » Wed 12. Aug 2015, 17:35

Ne Old Boy, der FF zickt rum und auch Opera, die schieben den Content unter den Header - sieht nicht aus, als wenn Du es gepackt hast - schade :| . Da scheint es noch eine Inkomtibilität zu geben. Die Seite scrollt erst einmal richtig runter/ hoch, springt dann aber unter das Menü und wird überdeckt. Chrome macht es korrekt, IE11 auch, Safari zickt rum, allerdings nur beim Start (http://bootstrap.pepes-sandbox.de/onepa ... ml#cpid435)

Und beim manuellen Verkleinern des Desktop reagiert das Bootstrap :?: nicht korrekt! Viel Spaß beim Befummeln :lol:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

Old Boy
Posts: 1035
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy » Wed 12. Aug 2015, 17:55

Jaa , danke für die Rückmeldung!

Da kann ich mich erst wieder drum kümmern, wenn meine komplette Hardware wieder am Netz ist...
Kann ja eigentlich nur was CSS spezifisches sein :roll:

Old Boy
Posts: 1035
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy » Tue 3. Nov 2015, 15:34

Kukki, wenn du jetzt noch mal testen würdest, ob mein ONEPAGER mit phpwcms Bordmitteln immer noch "rumzickt" ?

http://bootstrap.pepes-sandbox.de/onepa ... tteln.html

Ich habe immer noch keinen Grund bzw. keine Lösung gefunden, wieso das smooth-scrolling nicht auf meine Overlay Einstellung anspricht, sondern den Wert zur Berücksichtigung des fixen Headers (im FF) einfach ignoriert!

Hat jemand eine Lösung dafür parat???
Dann könnte ich die Beschreibung für den ONEPAGER endlich fertig machen :-)

PS
Im Moment konnte ich mir nur helfen, indem ich vor jeder Section den oberen Rand um den Wert des Overlays vergrössert habe...
das ist natürlich ein workaround und total inakzeptabel.

User avatar
Oliver Georgi
Site Admin
Posts: 9475
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: Bootstrap und die Sache mit den OnePagern

Post by Oliver Georgi » Wed 4. Nov 2015, 06:38

Du brauchst da nach Möglichkeit noch sowas, jetzt nicht auf Deinen Bedarf abgestimmt, aber Prinzip dürfte klar sein.

Code: Select all

// Add OnScroll event
$(window).scroll(function() {
	if ($(this).scrollTop() > 1){
		$('#header').addClass("is-sticked");
	} else{
		$('#header').removeClass("is-sticked");
	}
});
Auch solltest Du den Startlink gleichfalls abfangen, sodass smooth auch auf den Nullpunkt zurückgescrollt und nicht die Seite neu geladen wird.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Kleintierpraxis am Georgengarten

Old Boy
Posts: 1035
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy » Wed 4. Nov 2015, 10:39

Danke für die Reaktion... mal sehen, ob ich's damit in den Griff bekomme.

Komisch/unverständlich ist allerdings, dass mein Script:

Code: Select all

<!-- JS:
$(document).ready(function(){
$('a[href^="onepager-mit-bordmitteln.html#cpid"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({ 
'scrollTop': $target.offset().top - 88 }, 2000, 'swing', function () {
window.location.hash = target;
});
});
});
-->
für alle Browser ausser FF tadellos funktioniert???

Na, ich versuch mal... und melde mich dann wieder, so oder so :wink:

User avatar
update
Moderator
Posts: 6380
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Bootstrap und die Sache mit den OnePagern

Post by update » Sat 7. Nov 2015, 15:20

Für FF funkt es so wie in Chrome. Kein Unterschied.
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

Old Boy
Posts: 1035
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy » Sat 7. Nov 2015, 15:35

Danke für den Test...
kein Wunder, im Moment hatte ich die Sache mit dem offset rausgenommen und den padding-top Wert auf eine "funktionierenden" grösseren Wert gesetzt :lol:

Nur eine simple Verlegenheitslösung natürlich, aber das muss natürlich anders gehen! Ich muss da noch mal ran, wäre doch zu blöd, wenn das nicht ginge, denn der "Rest" meines Ansatz für den phpwcms-Bordmittel-OnePager ist so schön trivial, dass sogar ich es verstanden habe 8)

User avatar
update
Moderator
Posts: 6380
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Bootstrap und die Sache mit den OnePagern

Post by update » Sun 8. Nov 2015, 19:16

Sag mal, wie sortierst Du denn eigentlich die Reihenfolge der Inhalte um? Vorzugsweise, wenn ein paar CPs in einem Container/Row zusammengefasst sind?
Ich würde mir so sehr einen Sortierbutton wie in imagespezial wünschen...
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

Post Reply