Artikel Scroll

[psren]

Hallo, ich habe mehrere Artikel auf einer Seite und will einen Scroller wie diesen (http://www.webdesignerwall.com/demo/scrollto-demo/) einbauen. Gibt es so etwas auch für MooTools? weil dieser hier ist für JQuery.

(hoffe ich habe die richtige Kategorie, aber ich will ja zwischen Artikeln Navigieren, also wäre es schon Navigation. Bin mir aber nicht sicher ob diese Rubrik nur auf die Contao-Navigation bezogen ist.)

Danke für die Antwort

[schman]

Ja gibt es nennt sich mooScroll
Ich denke wir können die Frage hier lassen, wobei ich sie eher bei allgemeinen Inhalten gestellt hätte

[psren]

MooScroll 0.59 beta
MooScroll is a MooTools 1.2 class that allows you to customize how the scrollbar looks on scrollable divs.

Also leider nicht das was ich suche.
Ich meinte dieses nicht lineare heruntersliden zum nächsten artikel

[schman]

sorry, da habe ich den falschen Bookmark erwischt ich meinte
SmoothScroll

[psren]

genau das hatte ich gesucht. Super und Danke :P

[psren]

Falls es noch wen interessiert habe ich mal Spaßeshalber dieses Mootools-Modul eingebunden:
http://mootools.net/forge/p/navsimple

Klappt auch Wunderbar!

<script type="text/javascript">
    ns = new NavSimple({
        sectionLinks:" #header nav a",
        // sectionLinks: $$('.mod_article_nav') // ungetestet, könnte aber klappen
        sections: "#leistungen,#team,#kontakt", // Meine Sektionen die angesprungen werden
        // sections: $$('.mod_article'), // das wären dann alle Artikel
        foldRatio: 0.9, // default 0.6, bei mir war nur ein Element zu kurz
        offset:{
            x: 0,
            y: -68 // Die Höhe eurer Navigation, falls diese fixiert ist (siehe Doku zu SmoothScroll)
        },
        onSectionActive:function(sectionElement, sectionIndex, navSimpleInstance){
            var currentId = '#'+sectionElement.id;
            // Dazu benötigt man den Hostory-Teil von Mootools Powertools (aktualisiert die Links in der Url)
            History.push('/'+currentId);
        }
    });

    window.addEvent('domready',function(){
        ns.activate();
    });
</script>

Vielleicht hilft es ja jemandem.

[psren]

Und immernoch: falls es jemand hilft kann er sich das ganze als kleines modülchen einbinden.
https://github.com/psren/contao-magicArticleList

Falls jemand Interesse oder Anmerkungen hat kann ich das auch mal verbessern oder ins ER stellen oder für Contao3 anpassen.

[Stiwano]

Ich bekomme das bei mir einfach nicht zum laufen. Aber ich will das unbedingt! Wenn weiches scrollen angehäkelt ist, geht kein Link der Artikelliste mehr. Gibt aber keinen Fehler in der Console.

Hier mal ein Link zur Seite: http://www.praxis-dr-lesch.de/index....#sprechstunden

Momentan ist Mootools wieder weggeschaltet. Aber vielleicht siehst du trotzdem was oder hast einen Tip worauf ich achten muss.

Template (mod_article_list des Moduls) "var offsetY" anpassen, hatte ich gemacht zu #left#.

Hoffnungsvolle Grüße
Stiwano

[psren]

Probier mal ein template mit dem Namen "mod_article_list.html5" in dein Theme-Verzeichnis zu legen und gib ihm folgenden Inhalt.

<nav class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<ul>
<?php foreach ($this->articles as $article): ?>
  <li><a href="<?php echo $this->request; ?>#<?php echo $article['id']; ?>" title="<?php echo $article['title']; ?>"><?php echo $article['link']; ?></a></li>
<?php endforeach; ?>
</ul>

</nav>

<?php if($this->anchor_navigation): ?>
<?php $GLOBALS['TL_MOOTOOLS'][] = '<script src="/system/modules/magicArticleList/html/js/NavSimple.js"></script>'; ?>
<script>
window.addEvent('domready',function(){
  
  var ns = new NavSimple({
    sectionLinks: "<?php echo str_replace('"','',str_replace('id="','#',$this->cssID));?> li a",
    sections: '.mod_article',
    hashPathOnLoad: true,
    foldRatio: 0.6,
  }).activate();
});
</script>
<?php endif; ?>

[Stiwano]

Leider nix. Hab es jetzt mal so gelassen. Vielleicht kannst du dann noch mal was diagnostizieren. Das wäre super!

[psren]

Bau mal bitte das hier in dein Template ein und schaue mal was dabei rauskommt.

<?php var_dump($this->cssID); ?>

[Stiwano]

Wo denn? In mod_article_list.html5? In welche Zeile? Kenn mich mit PHP nicht aus.

[psren]

Ja, in dem Template. Am besten am Ende oder am Anfang.

Das gibt die Variable aus die die Css-Id des Artikels enthalten sollte.

[Stiwano]

string(0) ""

[psren]

Okay, dann haben wir da den Grund warum es nicht funktioniert.

Jetzt mal <?php $this->showTemplateVars(); ?> bitte.

[Stiwano]

OK, gemacht. Da steht jetzt ne Menge.

Dass ich die Divs in der fe_page ein wenig umgebaut habe hast du ja sicherlich gesehen. Daran wird es wohl nicht liegen, oder?

[psren]

Daran wird es wohl nicht liegen, oder?

Nein, daran liegt es nicht. Es liegt daran dass $this->cssId leer ist. Das wiederum liegt daran dass das Modul via inserttag eingebunden hast.
Das habe ich bisher noch nicht so gemacht gehabt (hatte das immer im header).

Du kannst manuell eine Id hinzufügen... ist aber nicht optimal.

<nav id="sidenav" class="<?php echo $this->class; ?> block" <?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<ul>
<?php foreach ($this->articles as $article): ?>
  <li><a href="<?php echo $this->request; ?>#<?php echo $article['id']; ?>" title="<?php echo $article['title']; ?>"><?php echo $article['link']; ?></a></li>
<?php endforeach; ?>
</ul>

</nav>

<?php if($this->anchor_navigation): ?>
<?php $GLOBALS['TL_MOOTOOLS'][] = '<script src="/system/modules/magicArticleList/html/js/NavSimple.js"></script>'; ?>
<script>
window.addEvent('domready',function(){
  
  var ns = new NavSimple({
    sectionLinks: "#sidenav li a",
    sections: '.mod_article',
    hashPathOnLoad: true,
    foldRatio: 0.6,
  }).activate();
});
</script>
<?php endif; ?>

[Stiwano]

Tut sich leider nichts. An diese Stelle auch vielen Dank für deine Mühe. Hast du noch eine Idee oder soll ich nach einer anderen Lösung suchen?

Was ist denn mit SmoothScroll aus der jquery_more Erweiterung? Ich habe das installiert, dann gibt es ein moo_smoothscroll oder so ähnlich, und dann?

[Stiwano]

Jetzt hab ich mal jquery scrollto und localscroll eingebunden und es passiert auch nix. Das ist zum verrückt werden. Ich hab jetzt schon so viele Methoden ausprobiert.

[psren]

$(document).ready(
    // Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'
    function () {
        $("#sidenav").localScroll();
    }
); 

Hier wird ein Fehler geworfen

[Stiwano]

Und wo liegt der Fehler? Also woran? Bitte, bitte!

Hab das mal geändert in:
<script type="text/javascript">

jQuery(document).ready(function($) {
$("#sidenav").localScroll();
}
);

</script>

Jetzt geht aber kein Link mehr der Artikelliste. Was stimmt denn hier nicht?

[psren]

Jetzt geht aber kein Link mehr der Artikelliste. Was stimmt denn hier nicht?

Das bedeutet, dass es funktionieren sollte. Zumindest das click-Event scheint zu funktioneren. Aber von jQuery und diesem Script habe ich keine Ahnung :-)

[Stiwano]

Vielen Dank noch mal. Das war der richtige Hinweis. Es liegt gar nicht am javascript. Es ist das CSS. Wenn ich die position:fixed in absolute ändere läufts. Jetzt muss ich das nur noch richtig positioniert bekommen.

[psren]

Ich helfe gerne wenn ich kann.
Viel Erfolg dir noch.

[Stiwano]

Hi Psren,

für dich noch zur Info. Klappt alles mit deinem Modul. Was natürlich viel praktischer ist. Wichtig ist den Artikellisten-Modulen eine ID zu geben und natürlich nicht so hinderliches CSS zu schreiben, wie ich das getan hatte. wrapper: fixed da kann natürlich nichts scrollen. Manchmal ist man blöd.

Gruß
Stiwano

[mj1985]

Und immernoch: falls es jemand hilft kann er sich das ganze als kleines modülchen einbinden.
https://github.com/psren/contao-magicArticleList

Falls jemand Interesse oder Anmerkungen hat kann ich das auch mal verbessern oder ins ER stellen oder für Contao3 anpassen.

Tolles "Modülchen"

Nutzen es gerade ausgiebig auf einer sehr langen Seiten und es funktioniert sehr gut. Das mitscrollende Menü springt manchmal etwas hinterher und manchmal passt es super.
Woran das liegt habe ich noch nicht ausmachen können.

Fände es super wenn das auch für C3 geben würde.

[mj1985]

magicArticle-List funktioniert auch ohne Probleme mit C3.

Hab nur 2 Kleinigkeiten vorgenommen:

1. Über die Autoload-Creator für die Erweiterung entsprechende Dateien erstellt
2. Das Template mod_article_list im javascript-Teil angepasst (da ich mootools & jquery nutze und den mootools noConfict Modus brauche.)

<script>
(function($) {
  window.addEvent('domready',function(){
  
  var ns = new NavSimple({
    sectionLinks: "<?php echo str_replace('"','',str_replace('id="','#',$this->cssID));?> li a",
    sections: '.mod_article',
    hashPathOnLoad: true,
    foldRatio: 0.4,
    offset: {
      x: 0,
      y: $('header').getSize().y
    }
  }).activate();
});
  })(document.id);
</script>

(foldRatio nach Wunsch einstellen, Standard 0.6)

[Steve_0]

Hi,

ich habe folgendes in meinen head bereich eingefügt:

<script type='text/javascript'>

    ns = new NavSimple({
        sectionLinks:" #header top_event_nav ul li a",
        sections: "#Home,#Agenda,#Speaker,#Hotel,#Register", 
        foldRatio: 0.9, 
        offset:{
            x: 0,
            y: -70 // Die Höhe eurer Navigation, falls diese fixiert ist (siehe Doku zu SmoothScroll)
        
        }
    });

    window.addEvent('domready',function(){
        ns.activate();
    });

Wenn ich jetzt auf die einzelnen nav punkte klicke, springe ich nur zu den anckerpunkten, nix wird geslided und die jeweilige nav punkt wird auch nicht als aktiv dargestellt.

[psren]

Hast du einen Link zur Seite, oder JS-Fehler?
Hast du einen schließenden JS-Tag?

[Steve_0]

Link zur seite leider nicht, ist alle lokal.
JS fehler gibt es auch keine und der tag ist natürlich auch geschlossen.

[psren]

Ich sehe gerade dass dein Selektor falsch ist.

sectionLinks:" #header top_event_nav ul li a",

[Steve_0]

Was ist denn daran genau falsch?

[psren]

top_event_nav

Es gibt kein HTML-Element das so heißt. Klasse oder ID.

UND: So muss ein JS-Fehler kommen. Schau mal in deinen dev-Tools nach.

[Steve_0]

top_event_nav

Ist bei mir aber eine css klasse in der die navi drinnen ist.

[psren]

Ist bei mir aber eine css klasse in der die navi drinnen ist.

Eben da liegt der Fehler. Dann musst du in dem Selektor einen Punkt davor machen.

[Steve_0]

Ich habe es jetzt mal so geändert:

<script src="tl_files/default/js/NavSimple.js"></script>
<script type='text/javascript'>

    ns = new NavSimple({
        sectionLinks:"#header .top_event_nav a",
        sections:"#Home,#Agenda,#Speaker,#Hotel,#Register", 
        foldRatio: 0.9, 
        offset:{
            x: 0,
            y: -70 // Die Höhe eurer Navigation, falls diese fixiert ist (siehe Doku zu SmoothScroll)
        
        }
    });

    window.addEvent('domready',function(){
        ns.activate();
    });
</script>

Hier mal das menü:

<header id="header">
<div class="inside">

<div class="event_header">
<a class="logo" href="localhost.de/" target="_top"><img src="/tl_files/default/layout/logo_white.png" ></a>
<div id="nav" class="top_event_nav"><ul>
<li><a href="big-event#Home">Home</a></li>
<li><a href="big-event#Agenda">Agenda</a></li>
<li><a href="big-event#Speaker">Speakers</a></li>
<li><a href="big-event#Hotel">Hotel</a></li>
<li><a href="big-event#Register">Register</a></li>
    </ul></div>
 
</div>

</div>
</header>

Aber er springt immer noch von punkt zu punkt.
Und einen fehler in der firebug console bekomme ich auch nicht.

[Steve_0]

Oder könnte der fehler sonst noch irgend wo anders liegen?

[psren]

Wenn es springt funktioniert das Script nicht.
Wenn das Script nicht funktioniert sollte eine Fehlermeldung in der Konsole kommen.

Wenn es das nicht tut kann ich dir leider auch nicht helfen ohne die Seite zu sehen.

[Steve_0]

Ich habe es gearde im plain html probiert und mir fehlt mootools more:
http://mootools.net/more/
http://jsfiddle.net/4Cfw4/10/embedded/result/

Allerdings im richtigen template funktioniert es noch nicht.

EDIT:
Final habe ich es hinbekommen, lag doch an der reihenfolge -.-

Eine frage habe ich aber noch, der jeweilige nav punkt bekommt ja die klasse "active" aber ich finde bei dem script bekommt der nächste nav punkt die klasse zu früh. Wie kann ich das beeinflussen?