Bootstrap und die Sache mit den OnePagern
Bootstrap und die Sache mit den OnePagern
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
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
Re: Bootstrap und die Sache mit den OnePagern
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ß
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ß
Re: Bootstrap und die Sache mit den OnePagern
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!
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!
Re: Bootstrap und die Sache mit den OnePagern
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
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
Re: Bootstrap und die Sache mit den OnePagern
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!
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!
Re: Bootstrap und die Sache mit den OnePagern
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!
super Sache. Mit welchem Script hast du das Scrollen realisiert?
Gruß
Jo
P.S.: Der nächste Onepager wird sicher einer nach deiner Methode!
Re: Bootstrap und die Sache mit den OnePagern
Na, das hört sich ja gut an
Hier das Sriptlet für das smooth scrolling:
Lässt man den grün markierten Teil weg, werden ALLE Anker "gemütlich" angefahren! Z.B. auch der TOP-Link.
Hier das Sriptlet für das smooth scrolling:
Der rot markierte Bereich ist natürlich der eigenen Situation anzupassen!<!-- 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;
});
});
});
-->
Lässt man den grün markierten Teil weg, werden ALLE Anker "gemütlich" angefahren! Z.B. auch der TOP-Link.
Re: Bootstrap und die Sache mit den OnePagern
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
Und beim manuellen Verkleinern des Desktop reagiert das Bootstrap nicht korrekt! Viel Spaß beim Befummeln
Lieber arm dran als Arm ab!
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
Re: Bootstrap und die Sache mit den OnePagern
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
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
Re: Bootstrap und die Sache mit den OnePagern
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.
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
- Site Admin
- Posts: 9892
- Joined: Fri 3. Oct 2003, 22:22
- Contact:
Re: Bootstrap und die Sache mit den OnePagern
Du brauchst da nach Möglichkeit noch sowas, jetzt nicht auf Deinen Bedarf abgestimmt, aber Prinzip dürfte klar sein.
Auch solltest Du den Startlink gleichfalls abfangen, sodass smooth auch auf den Nullpunkt zurückgescrollt und nicht die Seite neu geladen wird.
Code: Select all
// Add OnScroll event
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('#header').addClass("is-sticked");
} else{
$('#header').removeClass("is-sticked");
}
});
Re: Bootstrap und die Sache mit den OnePagern
Danke für die Reaktion... mal sehen, ob ich's damit in den Griff bekomme.
Komisch/unverständlich ist allerdings, dass mein Script:
für alle Browser ausser FF tadellos funktioniert???
Na, ich versuch mal... und melde mich dann wieder, so oder so
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;
});
});
});
-->
Na, ich versuch mal... und melde mich dann wieder, so oder so
Re: Bootstrap und die Sache mit den OnePagern
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.
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.
Re: Bootstrap und die Sache mit den OnePagern
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
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
Re: Bootstrap und die Sache mit den OnePagern
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...
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.
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.