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: 1203
Joined: Fri 23. Nov 2012, 13:52

Bootstrap und die Sache mit den OnePagern

Post by Old Boy »

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: 713
Joined: Wed 15. Nov 2006, 20:02
Location: Regensburg, Germany
Contact:

Re: Bootstrap und die Sache mit den OnePagern

Post by photojo »

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: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy »

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: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy »

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: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy »

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: 713
Joined: Wed 15. Nov 2006, 20:02
Location: Regensburg, Germany
Contact:

Re: Bootstrap und die Sache mit den OnePagern

Post by photojo »

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: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy »

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: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Bootstrap und die Sache mit den OnePagern

Post by kukki »

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.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
Old Boy
Posts: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy »

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: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy »

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: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Bootstrap und die Sache mit den OnePagern

Post by Oliver Georgi »

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 | Систрон
Old Boy
Posts: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy »

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: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Bootstrap und die Sache mit den OnePagern

Post by update »

Für FF funkt es so wie in Chrome. Kein Unterschied.
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Old Boy
Posts: 1203
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap und die Sache mit den OnePagern

Post by Old Boy »

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: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Bootstrap und die Sache mit den OnePagern

Post by update »

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 maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Post Reply