Bootstrap und die Sache mit den OnePagern

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

[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]

OK, wenn du mich sooo auf Knien anbettelst

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]

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

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

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

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]

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]

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]

Na, das hört sich ja gut an

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.

[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

[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

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

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

[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

[update]

Für FF funkt es so wie in Chrome. Kein Unterschied.

[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

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

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