Tag im body

Post by **Oliver Georgi** » Wed 15. Jul 2015, 19:49

wozu? Doppel gemoppelt an der Stelle, das Script, dass dann dieses data-Attribut ausliest, muss das dann wieder suchen. Macht keinen Sinn. Das kann man sicher auch direkt anweisen, jetzt den Scroll auf den Body-Bereich anzuwenden.

photojo · Post by **photojo** » Thu 16. Jul 2015, 06:38

Und wie könnte das dann aussehen?
Es geht konkret darum, dass die Menüpunkte beim Scrollen gehighlightet werden.
Ich bin ja für alles offen, wenn es nachher geht.

Post by **Oliver Georgi** » Thu 16. Jul 2015, 07:09

Da ich Deine Lösung nicht kenne, habe ich da auch keinen Ansatz. Da musst Du Dir die Doku des JavaScript anschauen, das dafür zuständig ist. Das kann sicher auch so initialisiert werden:

Code: Select all

$(function() {
    $('body').los();
});

photojo · Post by **photojo** » Thu 16. Jul 2015, 07:32

Ok, danke, das probiere ich mal.

photojo · Post by **photojo** » Thu 16. Jul 2015, 16:50

Also so gehts es nicht. Keine Ahnung wie ich da ran soll?

photojo · Post by **photojo** » Fri 17. Jul 2015, 19:26

So, ich frage jetzt nochmal nach:

Wie bekomme ich "zusätzlichen Text" in den body-Tag?

<body> soll zu <body das="gut"> werden.

Old Boy · Post by **Old Boy** » Fri 17. Jul 2015, 21:16

In der conf.inc.php:

Code: Select all

$template_default['body']['class'] = 'ist gut';

führt zu:

Code: Select all

<body class="ist gut">

Vielleicht reicht das ja schon ???

Post by **Oliver Georgi** » Fri 17. Jul 2015, 22:41

Dein Problem war trotzdem ein anderes.

Old Boy · Post by **Old Boy** » Fri 17. Jul 2015, 23:25

Oha, allerding, da hätte ich wohl von Beginn an nachlesen sollen

photojo · Post by **photojo** » Sat 18. Jul 2015, 09:30

Es muss doch irgendeine Lösung geben, oder?

Jensensen · Post by **Jensensen** » Wed 9. Mar 2016, 03:30

photojo wrote:...Ich bekomme es nicht hin, dass ich om body-Tag z.b. folgendes stehen habe:
<body data-spy="scroll">

Sollte das mit
<script>
$(function() {
$('body').attr(data-spy="scroll", 'true')
});
</script>
in <head> im Template im BE funktionieren? ...

Nein, so funktioniert es nicht!
Wenn ich es richtig verstanden habe möchtest du ScrollSpy von Bootstrap einbauen, nicht wahr?
Wie es funktioniert, erkläre ich weiter unten...

Ich habe jedenfalls keine Hinweise hier im Forum gefunden, dass es jemandem gelungen wäre, das "sauber" einzubauen. In den meisten Fällen werden alternative jQuery PlugIn's aus dem Themenbereich "parallax" eingebaut.
Und das, obwohl inzwischen vermutlich meist bootstrap geladen wird. Wir, inklusive der Entwickler sind ja seit längerer Zeit auf dem Weg nach bootstrap city http://forum.phpwcms.org/viewtopic.php?f=2&t=24407

Ursächlich ist m.E. tatsächlich eine eingeschränkte Flexibilität in der Hinsicht, den body oder html tag dediziert editieren zu können.
Schaut man sich den Quelltext moderner, populärer WebSites an, so findet man dort sehr oft einen html-tag mit unzähligen Klassen, bspw. in der Form:

Code: Select all

<html class="die das so oderso mach dies oderdas wenn dann gestern heute nice pretty prettynice verynice sehrvery sehrverynice sehrveryprettynice undsoweiter usw">

Fraglich ist, ob Kode in dieser recht ausufernden Schreibweise überhaupt zwingend notwendig sein kann. Als Entwickler jedoch, der brav mit phpwcms arbeitet, steht man dann regelmäßig vor dem Dilemma, sämtlichen Code extra umbiegen zu müssen - das Rad dann doch wieder neu erfinden zu müssen! Warum? Weil's da klemmt!
Bootstrap oder ANDERES MATERIAL (wir wissen ja, dass der Entwickler dieses Framework nicht zwangsläufig als Krönung der Schöpfung bezeichnet) verlangt ganz oft Code, den wir mit phpwcms nicht immer easy, out of the box realisieren können. Das bedeutet: extra friemel, fummel.

DIESEN VORSCHLAG FINDE ICH SEHR GUT!

update wrote:...
Dann braucht es in der conf.template.default.inc.php nur noch
Code: Select all
$template_default['body']['text']= ' data-ajaxloading';
und schon rollt der Käse.
Aber bevor Oliver mich haut, gehe ich lieber wieder hinter meine Bildschirme. [...]

Nein, in diesem Punkt hole ich update hinter seinen Bildschirmen hervor und stelle mich mit ihm zu vorderst in die erste Reihe! Denn genau dort gäbe es die Möglichkeit, das System noch flexibler zu gestalten! Warum? Weil's auf modernen, populären, ausgezeichneten! WebSites alternativ ja auch klappt.

Nun also folgt hier skizzenhaft ein Lösungsvorschlag für bootstrap ScrollSpy in phpwcms!
Oliver hat bereits weiter oben bereits hingewiesen:

Oliver Georgi wrote:...
Code: Select all
$(function() {
   $('body').attr('data-ajaxloading', 'true')
});
...

Auch nicht exakt das, was du benötigst, aber prinzipiell richtig und vor allem ==> wegweisend. Genau das hatte ich gesucht und hatte mir geholfen!

ScrollSpy [bootstrap] funktioniert nur mit JavaScript bzw. nur mit eingeschaltetem Javacript. Insofern ist es tasächlich unnötig, den erforderlichen code im body-tag hartkodiert einzutragen. [Für alle anderen Fälle wäre es dennoch schön, wenn es klappte!] Denn JS schraubt den Code eben einfach dran!

Du verwendest bestimmt JS auf deiner Site oder in den Templates. Der Aufruf lautet bspw.

Code: Select all

<script src="/path/to/js/myscript.js"></script>

In diesem Beispiel ist es die Datei 'myscript.js'.
Darin ergänzt du folgenden Code:

Code: Select all

$(function() {
   $('body').attr('data-spy', 'scroll');
   $('body').attr('data-target', '#THIS_IS_MY-navbar');
   $('body').attr('data-offset-top', '85');
})

Wenn du dir den Quelltext im Browser anschaust, siehst du dort nur den blanken, hartkodierten tag <body>.
Wenn du aber über --> rechte maustaste // web developer ODER inspect element ODER element untersuchen o.ä den Quellcode betrachtest, siehst du dort

Code: Select all

<body data-offset-top="85" data-target="#THIS_IS_MY-navbar" data-spy="scroll">

Aha, siehe da, da hat JS den code eben an den Tag sozusagen "drangebaut".
Nun funktioniert bootstrap ScrollSpy, WENN
du auf deiner Seite bspw. eine --> section id="DORTHIN" eingebaut hast UND in der --> Navigation --> weiterleitest auf --> #DORTHIN bzw. /index.php?ONEPAGER#DORTHIN

Vgl.:
http://forum.phpwcms.org/viewtopic.php?f=2&t=24749
http://forum.phpwcms.org/viewtopic.php? ... er#p145776

PS: zum Anschauen/Verifikation || klappt --> http://www.ulis-schneidbar.de/index.php

PS #2: ich habe dieses thema, diese seite seit über einem halben jahr in einem fast verlorenen tab im browser geöffnet, will sagen mitgeschleift, und heute endlich zeit gehabt, meinen senf dazu zu schreiben. --> bootstrap scrollspy <-- in --> phpwcms <--
↓
tab closed

Post by **Oliver Georgi** » Wed 9. Mar 2016, 06:15

Jensensen wrote:<html class="die das so oderso mach dies oderdas wenn dann gestern heute nice pretty prettynice verynice sehrvery sehrverynice sehrveryprettynice undsoweiter usw">

Dafür zeichnet in aller Regel Modernizr verantwortlich. Der testet auf die Browswerfähigkeiten. Dann gibt es noch unzählige Polyfills, http://cdn.polyfill.io/v2/docs/, http://html5please.com/#polyfill…

So bitte

Code: Select all

$(function() {
   //var $body = $('body');
   //$body
   $('body')
       .data('spy', 'scroll')
       .data('target', '#THIS_IS_MY-navbar')
       .data('offset-top', '85');
});

alternativ geht natürlich auch attr(); aber dann kombinieren, nicht 3x

Code: Select all

$(function() {
   $('body').attr({
       'data-spy': 'scroll',
       'data-target': '#THIS_IS_MY-navbar',
       'data-offset-top': '85'
   });
});

Aber Bootstrap ScrollSpy geht auch OHNE data Attribute, das ist besser, weil nicht doppelt gemoppelt:

Code: Select all

$(function() {
    $('body').scrollspy({
        target: '#THIS_IS_MY-navbar',
        offset: 85
    });
});

Tag im body

Re: Tag im body

Re: Tag im body

Re: Tag im body

Re: Tag im body

Re: Tag im body

Re: Tag im body

Re: Tag im body

Re: Tag im body

Re: Tag im body

Re: Tag im body

Re: Tag im body

Re: Tag im body