JScrollPane in Wordpress einfügen

JesseJames

Ich würde gern in meinen Blog http://www.johnny4ever.com/wordpress/wordpress/

ein JScrollPane einbauen jScrollPane - full body scroll

Geht das? Und wenn ja, wie?

Das Script an sich verwende ich auf normalen HTML Seiten auch. Aber bei dem Wordpress Teil hab ich's noch nicht hinbekommen, bzw. weiß nicht wo ich da was einfügen muss.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

JesseJames

Code

<link rel="stylesheet" type="text/css" media="all" href="styles/jScrollPane.css" />
  <link rel="stylesheet" type="text/css" media="all" href="styles/demoStyles.css" />
  <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
  <script type="text/javascript" src="scripts/jScrollPane.js"></script>
  <style type="text/css">
   html {
    overflow: auto;
    margin: 0;
    padding: 0;
   }
   body {
    margin: 0;
    padding: 0;
   }
   #container {
    overflow: auto;
    padding: 10px 30px 10px 40px;
   }
   #pane1 {
    height: 100px;
   }
   #pane2 {
    height: 150px;
   }
   #pane3 {
    background: #f60;
    width: 150px;
    height: 50px;
   }
  </style>
  <script type="text/javascript">
   
   $(function()
   {
    // this initialises the demo scollpanes on the page.
    $('#pane3').jScrollPane();
    $('#pane1, #pane2').jScrollPane();
    
    var isResizing;
    
    // and the body scrollpane
    var setContainerHeight = function()
    {
     // IE triggers the onResize event internally when you do the stuff in this function
     // so make sure we don't enter an infinite loop and crash the browser
     if (!isResizing) { 
      isResizing = true;
      $w = $(window);
      $c = $('#container');
      var p = (parseInt($c.css('paddingLeft')) || 0) + (parseInt($c.css('paddingRight')) || 0);
      $('body>.jScrollPaneContainer').css({'height': $w.height() + 'px', 'width': $w.width() + 'px'});
      $c.css({'height': ($w.height()-p) + 'px', 'width': ($w.width() - p) + 'px', 'overflow':'auto'});
      $c.jScrollPane();
      isResizing = false; 
     }
    }
    $(window).bind('resize', setContainerHeight);
    setContainerHeight();
    
    // it seems like you need to call this twice to get consistantly correct results cross browser...
    setContainerHeight();
    
   });
   
  </script>
 </head>
 <body>
  <div id="container">

Alles anzeigen

Also ich weiß, dass ich das hier einfügen muss. Aber ich weiß nicht wo :-(

marX

Zitat von JesseJames

Also ich weiß, dass ich das hier einfügen muss. Aber ich weiß nicht wo :-(

Steht doch da, zwischen <head> und </head>. Also vermutlich in der header.php deines Themes. Und dann musst du evtl. noch den entsprechenden Bereich im Artikel mit der ID auszeichnen. Das machst du am besten über die HTML-Ansicht des Artikeleditors.

JesseJames

ID was? Ich hab keine Ahnung von php und HTML & Co. ...

Und ich hab's ja schon in die header.php versucht. In alle andren auch... geht net...

Das ich das in nem normalen HTML Dokument in den head tag einfügen muss, das weiß ich. Aber bei php weiß ich's net :-(

Aber danke!

marX

Zitat von JesseJames

ID was? Ich hab keine Ahnung von php und HTML & Co. ...

SELFHTML: HTML/XHTML / Referenz /HTML-Attribut-Referenz

Zitat

Und ich hab's ja schon in die header.php versucht. In alle andren auch... geht net...

Dann hast du was falsch gemacht oder vergessen. Hilfreich wäre wen du uns sagst/zeigst was du wie gemacht hast.

Zitat

Das ich das in nem normalen HTML Dokument in den head tag einfügen muss, das weiß ich. Aber bei php weiß ich's net :-(

Am Ende kommt immer "normales HTML" raus, egal ob PHP dahintersteckt oder nicht.

JesseJames

Na ich hab den Code in alle möglichen php Dateien die ich von den Wordpress Teil hab eingefügt. Aber hat nirgends funktioniert.

Dass ich was falsch gemacht hab, is mir auch klar, aber ich weiß eben nicht, wie's richtig geht ;-)

marX

Zitat von JesseJames

Na ich hab den Code in alle möglichen php Dateien die ich von den Wordpress Teil hab eingefügt. Aber hat nirgends funktioniert.

Wo es hingehört hab ich dir geschrieben:

Zitat

zwischen <head> und </head>. Also vermutlich in der header.php deines Themes

Zitat

Dass ich was falsch gemacht hab, is mir auch klar, aber ich weiß eben nicht, wie's richtig geht ;-)

Dann schreib doch mal was du gemacht hast. Das Theme wäre vielleicht auch hilfreich.

JesseJames

Dass ich das in die header.php eingefügt hab und es nicht funktioniert hat, steht bereit's da ;-)
Auch dass ich den Code in alle möglichen php Dateien eingefügt habe..

Ich hab mir des JScrollPane runtergeladen, hab die nötigen Dateien in das "default" Verzeichnis hochgeladen und den Code dann eben in versucht irgendwo einzfügen - ader da tut sich nix :-(

kaiser

aaaalso, wie marx schon 2x gesagt hat, den teil: <link rel="stylesheet bis </script> gehört zwischen <head> und </head> in deine header.php

darunter musst du das script dann in deiner index.php (oder welcher seite auch immer) aufrufen. und dazu meint marx, ob du diese seite hier bitte einmal posten könntest, weil dein fehler sonst wohl ewig ein geheimniss bleiben wird.

marX

Zitat von JesseJames

Dass ich das in die header.php eingefügt hab und es nicht funktioniert hat, steht bereit's da ;-)

Gut, dann ist da wohl der Fehler.

Zitat

Auch dass ich den Code in alle möglichen php Dateien eingefügt habe..

Unnötig. Es gehört in die header.php deines Themes. Wenn du nicht grade ein Theme hast, was massivst umgebaut ist, dann ist genau dort der richtige Platz.

Zitat

Ich hab mir des JScrollPane runtergeladen, hab die nötigen Dateien in das "default" Verzeichnis hochgeladen und den Code dann eben in versucht irgendwo einzfügen

Wie ich schon schrieb: wie genau? <Glaskugel mode="on" /> Vermutlich musst du nur noch die URLs anpassen. Angenommen die JS-Dateien liegen im Theme-Verzeichnis im Unterverzeichnis "scripts", dann muss der Aufruf in der header.php so aussehen:

PHP

<script type="text/javascript" src="<?php bloginfo('template_url') ?>/scripts/jScrollPane.js"></script>

Mit einem Link zu deiner Problemseite könnte ich sowas direkt sehen. ;-)

JesseJames

1. gibt's in meiner header.php keinen head tag nich und
2. is der Blog hier in meinem 1. Beitrag verlinkt :-(

marX

Zitat von JesseJames

1. gibt's in meiner header.php keinen head tag nich und

Glaub ich dir nicht. Unter der oben angegebenen URL sehe ich nämlich <head> und auch </head>. ;-) In welcher Datei hast du denn gesucht? header.php ist klar - aber welche genau?

Zitat

2. is der Blog hier in meinem 1. Beitrag verlinkt :-(

Da ist nichts mit "Scroll" zu finden.

JesseJames

Wie in welcher header.php? Da gibt's doch nur eine!?

marX

Zitat von JesseJames

Wie in welcher header.php? Da gibt's doch nur eine!?

Die im aktuellen Theme-Verzeichnis meine ich. Bei dir also in wp-content/themes/default. Daneben gibts schon noch ein paar, z.B. in weiteren installierten Themes. Ich fragte nach,weil du schriebst, das dort kein <head>/</head> enthalten ist. Ich bin mir aber ziemlich sicher, dass du den <head>-bereich deiner Seite genau dort findest. Also entweder schaust du nicht richtig hin, oder du bist in der falschen Datei...

unkown89

Ich verstehs auch nicht richtig. Hab das plugin installiert und dann soll man den Code ja in den head machen. Das hab ich auch getan aber wie es weiter geht versteh ich denn nicht so.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

JScrollPane in Wordpress einfügen

Jetzt mitmachen!