JavaScript Scripts laden nicht richtig

ClocxHD · 1. Juni 2015

Hallo,

ich verwende einen DIV-Container mit Syntax-Highlighting & Custom Scrollbar.
Das sieht so aus:

Davon habe ich zwei auf der Seite.
Da ich mich entschieden habe, die Bootstrap "Tabs" zu verwenden ( http://getbootstrap.com/components/#nav-tabs ), lade ich mit jQuery die entsprechende PHP-Datei in den DIV-Container mit der Klasse "panel-body".
Das mache ich folgendermaßen:

Code:

$(".click-installer").click(function() {
    	$(".panel-body").load("installer.php");
    	$(".li-installer").addClass("active");
    	$(".li-updater").removeClass("active");
});

$(".click-updater").click(function() {	
    	$(".panel-body").load("updater.php");
    	$(".li-updater").addClass("active");
    	$(".li-installer").removeClass("active");	
});

Er lädt diese auch rein.
Jedoch habe ich dann kein Syntax-Highlighting & Custom Scrollbar mehr.
Wenn ich die Seite mit Strg+F5 neu lade, erscheinen Syntax-Highlighting & Custom Scrollbar manchmal.
Wenn ich dann aber z.B. zum zweiten Tab wechsel (und auch wieder zurück), verschwinden die wieder.
Das sieht dann so aus:

Wenn ich die Dateien direkt aufrufe, funktioniert es aber normal.
Woran kann das liegen?
Die ganzen Scripte werden in einer externen Datei eingebunden:

HTML:

<meta charset="utf-8" />

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style/font-awesome.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400">
<link rel="stylesheet" href="style/normalize.css">
<link rel="stylesheet" href="style/highlight.min.css">
<link rel="stylesheet" href="style/animations.css">
<link rel="stylesheet" href="style/jquery.jscrollpane.css">
<link rel="stylesheet" href="style/jquery.mCustomScrollbar.css">
<link rel="stylesheet" href="style/jquery-ui.css">
<link rel="stylesheet" href="style/jquery-ui.structure.css">
<link rel="stylesheet" href="style/jquery-ui.theme.css">
<link rel="stylesheet" href="style/bootstrap.css" type="text/css">
<!--<link rel="stylesheet" href="style/bootstrap-theme.css" type="text/css">-->
<!--// Stylesheets -->

<!-- Scripts -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/normal.js"></script>
<script src="scripts/modernizr.min.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/highlight.min.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script src="src/scripts/bootstrap.js"></script>
<script src="scripts/jquery.viewport.js"></script>
<script src="//use.edgefonts.net/ubuntu-mono.js"></script>
<!-- Scrollbars -->
<script src="scripts/jquery.mousewheel.js"></script>
<script src="scripts/mwheelIntent.js"></script>
<script src="scripts/jquery.jscrollpane.min.js"></script>
<script src="scripts/jquery.mCustomScrollbar.js"></script>
<!--// Scrollbars -->
<script>hljs.initHighlightingOnLoad();</script>
<script>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>
<!--// Scripts -->

Von daher sollte es gehen.

Hat jemand eine Idee?

LG,
ClocxHD

Umbel · 1. Juni 2015

Gibts das irgendwo live zu sehen?

ClocxHD · 1. Juni 2015

Ja, http://dyn.fabian-thielen.ovh/ft-test der dritte "Tab"

Teisi · 1. Juni 2015

servus,

also hab jetzt nur kurz drübergeblickt: (konte ich reproduzieren)
bootstrap.js wird garnicht geladen <- daher wohl auch die lange ladezeit. bzw. manchmal hab ich auch direkt ne weiße seite.

entweder liegts daran, oder es werden scripte geladen die auf funktionen oder objekte zugreifen die im moment des aufrufs noch nicht verfügbar sind (denke ich jetzt mal spontan).

und nachdem der container ausgetauscht wurde, musst du deine costum scrollbar neu initialisieren.

vielleicht liege ich jetzt aber auch ganz falsch... nur n denkanstoß

grüße

ClocxHD · 1. Juni 2015

Hallo,

danke für den Hinweis, der Link zum Script war falsch.
Die lange Ladezeit liegt daran, dass die Seite noch auf meinem Homserver liegt, und ich nur einen geringen Upload habe.

Habe jetzt versucht, die Scrollbar neu zu initialisieren, weiß nicht, ob ich das so richtig gemacht habe, bin nicht gerade der JavaScript-Pro.

Code:

$(".click-installer").click(function() {
	hljs.initHighlightingOnLoad();
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);		
	$(".panel-body").load("installer.php");
	$(".li-installer").addClass("active");
	$(".li-updater").removeClass("active");
});

$(".click-updater").click(function() {	
	hljs.initHighlightingOnLoad();
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);		
	$(".panel-body").load("updater.php");
	$(".li-updater").addClass("active");
	$(".li-installer").removeClass("active");	
});

LG,
ClocxHD

Teisi · 1. Juni 2015

servus,

den scrollbar aufruf musst du dann machen, wenn das ajax request fertig ist, nicht bei window.load
soweit ich glaube zu wissen, wird window.load nur einmal aufgerufen und es erkennt nicht ob der ajax request schon erfolgt ist.

also document.ready oder window.load -> ajaxrequest (dein container einfügen oder tauschen) -> wenn der request fertig ist, scrollbar aufrufen

wenn du dann .click machst -> request -> request fertig -> scrollbar aufruf

dafür gibts eine eigene function "ajax.success"...

hoffe ich versteh richtig, was du da machen willst...

Grüße

edit:
hier ab schritt 4, zeile 16 wird so ein aufruf gemacht:
http://advitum.de/2012/05/ajax-onepage-inhalt-richtig-per-ajax-nachladen/

Umbel · 1. Juni 2015

WIe Teisi schon beschrieben hat ist das Problem, dass beide Funktionen auf onLoad reagieren, was hier aber eben nach dem switchen nicht mehr getriggert wird. Bei Highlight.js gibts in der Usage-Section Bespiele wie man das laden selber steuern kann.

ClocxHD · 1. Juni 2015

Vielen Dank für eure Hilfe!

Habe das jetzt so geregelt:

Code:

$(".click-installer").click(function() {
    $(document).ready(function() {
		$(".panel-body").load("installer.php");
		$(".li-installer").addClass("active");
		$(".li-updater").removeClass("active");    	
    });
    $(document).ajaxSuccess(function() {
		$(".content").mCustomScrollbar();
		$('pre code').each(function(i, block) {
			hljs.highlightBlock(block);
		});
    });	
});

$(".click-updater").click(function() {	
    $(document).ready(function() {
		$(".panel-body").load("updater.php");
		$(".li-updater").addClass("active");
		$(".li-installer").removeClass("active");	    	
    });	
    $(document).ajaxSuccess(function() {
		$(".content").mCustomScrollbar();
		$('pre code').each(function(i, block) {
			hljs.highlightBlock(block);
		});
    });
});

LG,
ClocxHD

Teisi · 1. Juni 2015

Sry lappi Akku leer,
Mach mal so..

(Function($){
...deine functionen...
Document.ready(){
...deine click Events (ohne erneut document.ready ab Zu fragen...
}
Window.load(){}
})(jQuery);

Macht sonst irgendwie keinen großen sinn... Bringt n bisschen strucktur rein...

Sry schreib grad vom Handy...

ClocxHD · 1. Juni 2015

Meinst du so?:

Code:

(function($) {
    	$(document).ready(function() {
        		$(".click-installer").click(function() {
            			$(".panel-body").load("installer.php");
            			$(".li-installer").addClass("active");
            			$(".li-updater").removeClass("active");
        		});

        		$(".click-updater").click(function() {
            			$(".panel-body").load("updater.php");
            			$(".li-updater").addClass("active");
            			$(".li-installer").removeClass("active");
        		});

        		$(document).ajaxSuccess(function() {
            			$(".content").mCustomScrollbar();
            			$('pre code').each(function(i, block) {
                				hljs.highlightBlock(block);
            			});
        		});
    	});
})(jQuery);

trialgod · 2. Juni 2015

Sei dir aber bewusst, dass "ajaxSuccess" jetzt bei jedem erfolgreichen AJAX Call aufgerufen wird und deine Scrollbar und dein Syntax Highlighting neu initialisiert.

Finde ich unschön. Weiß jetzt nicht, ob du noch andere AJAX Calls hast, die mit diesen Beiden nichts zu tun haben. Aber auch wenn nicht und du die Seite später vielleicht erweiterst, könntest du auf unerwartetes Verhalten stoßen (weil du es bis dahin wahrscheinlich vergessen hast).

Ich würde die Sachen in eine Funktion auslagern und diese dem "load" Event mit übergeben: http://api.jquery.com/load/

ClocxHD · 2. Juni 2015

Hallo,

habe es jetzt so versucht, aber mir wird dann nur eine weiße Seite angezeigt:

Code:

(function($) {
    	$(document).ready(function() {

        		function ajsuccess() {
            			$(document).ajaxSuccess(function() {
                				$(".content").mCustomScrollbar();
                				$('pre code').each(function(i, block) {
                					hljs.highlightBlock(block);
            				});
        			});
    		}

    		$(".click-installer").click(function() {
        			$(".panel-body").load("installer.php", function(ajsuccess));
        			$(".li-installer").addClass("active");
        			$(".li-updater").removeClass("active");
    		});

    		$(".click-updater").click(function() {
        			$(".panel-body").load("updater.php", function(ajsuccess));
        			$(".li-updater").addClass("active");
        			$(".li-installer").removeClass("active");
    		});
	});
})(jQuery);

r15ch13 · 2. Juni 2015

Oeffne mal bitte die Entwicklerkonsole deines Browsers (meistens durch F12).
Dann klickst du auf "Console" und laedst die Seite neu. Dort sollte ein Fehler angezeigt werden.

ClocxHD · 2. Juni 2015

Anscheinend kann ich die Funktion nicht so aufrufen, der hat mir gesagt, dass die Klammer ")" in Zeile 14 falsch wäre.
Habe es jetzt so gemacht:

Code:

(function($) {
	$(document).ready(function() {

		$(".click-installer").click(function() {
			$(".panel-body").load("installer.php", function(ajsuccess) {
				$(document).ajaxSuccess(function() {
					$(".content").mCustomScrollbar();
					$('pre code').each(function(i, block) {
						hljs.highlightBlock(block);
					});
				});
			});
			$(".li-installer").addClass("active");
			$(".li-updater").removeClass("active");
		});

		$(".click-updater").click(function() {
			$(".panel-body").load("updater.php", function(ajsuccess) {
				$(document).ajaxSuccess(function() {
					$(".content").mCustomScrollbar();
					$('pre code').each(function(i, block) {
						hljs.highlightBlock(block);
					});
				});				
			});
			$(".li-updater").addClass("active");
			$(".li-installer").removeClass("active");
		});
	});
})(jQuery);

r15ch13 · 2. Juni 2015

So ich habe dein Chaos mal aufgeraeumt:

In der style.css habe ich nur folgendes geaendert:

CSS:

body {
  font-family: 'Lato';
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  background-color: #123456;
  overflow: hidden;
}

...

.com__content {
  position: relative;
  -webkit-box-flex: 8;
  -webkit-flex: 8;
      -ms-flex: 8;
          flex: 8;
  padding: 10vh 10vw;
}

...

.programme h1 {
  text-align: center;
  font-family: ubuntu-mono, sans-serif;
}

Die style.css sollte auch nach dem ganzen anderen CSS Kram von Bootstrap usw. geladen werden. Dann hat man die Moeglichkeit Styleinformationen aus Bootstrap zu ueberschreiben.

Die Javascript Dateien habe ich nach unten verschoben. Die normal.js entfernt, da sie fast das gleiche enthaelt wie die main.js.
Ausserdem habe ich die in der Navigation die Singlequotes zu Doublequotes geaendert.
Die CSS Klassen "h1_programme", "versteckt" und "body" habe ich entfernt, da ueberfluessig.
Bei den Programmen habe ich die Links angepasst. Diese haben nun das Attribut "data-page", woraus ich mit Javascript den Namen fuer der Programmseite hernehme.

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Fabian-Thielen.de</title>
    <meta charset="utf-8" />

    <!-- Stylesheets -->
    <link rel="stylesheet" href="style/font-awesome.min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700">
    <link rel="stylesheet" href="style/normalize.css">
    <link rel="stylesheet" href="style/highlight.min.css">
    <link rel="stylesheet" href="style/animations.css">
    <link rel="stylesheet" href="style/jquery.jscrollpane.css">
    <link rel="stylesheet" href="style/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="style/jquery-ui.css">
    <link rel="stylesheet" href="style/jquery-ui.structure.css">
    <link rel="stylesheet" href="style/jquery-ui.theme.css">
    <link rel="stylesheet" href="style/bootstrap.css">
    <link rel="stylesheet" href="style/bootstrap-theme.css">
    <link rel="stylesheet" href="style/style.css">
    <!--// Stylesheets -->
</head>
<body>

  <noscript>
    Um diese Website nutzen zu können, benötigen Sie JavaScript.<br />
    Eine Anleitung, wie Sie JavaScript in Ihrem Browser einschalten, finden Sie
    <a href="http://www.enable-javascript.com/de/" target="_blank">hier</a>.
  </noscript>

  <div class="com">
    <div class="com__content pullDown">
      <section class="com__section com__section--text">
        <h1 class="animate slideInLeft ">Über mich</h1>
        <p class="animate slideInLeft delay-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui deleniti illum eveniet quod, omnis recusandae quis possimus reprehenderit laboriosam sapiente quibusdam tenetur soluta! Minima doloremque, repudiandae officiis nemo amet quos.
        </p>
      </section>

      <section class="com__section com__section--text">
        <h1 class="animate slideInLeft">Projekte</h1>
        <p class="animate slideInLeft delay-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quisquam consequuntur inventore suscipit, placeat illo unde laborum amet reiciendis alias nam excepturi, neque consequatur praesentium quae? Sapiente saepe praesentium animi.</p>
      </section>

      <section class="com__section com__section--text programme">
        <div class="programs">
          <h1 class="animate scaleIn">Programme</h1>
          <div class="container">
            <ul class="nav nav-tabs nav-tabelle">
              <li role="presentation" class="active"><a class="programm" data-page="installer.php">Installer</a></li>
              <li role="presentation"><a class="programm" data-page="updater.php">Updater</a></li>
            </ul>
            <div class="panel-body"></div>
          </div>
        </div>
      </section>

      <section class="com__section com__section--text">
        <h1 class="animate slideInLeft ">Test</h1>
        <p class="animate slideInLeft delay-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit commodi adipisci inventore qui laboriosam sapiente, velit aspernatur error fuga earum in excepturi repellendus modi obcaecati perferendis repudiandae aut voluptas nihil.</p>
      </section>

      <section class="com__section com__section--text">
        <h1 class="animate slideInLeft">Test</h1>
        <p class="animate slideInLeft delay-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptate doloremque, possimus commodi cupiditate ratione illum impedit architecto necessitatibus distinctio recusandae eveniet debitis, sunt iste reiciendis aliquam minus est aliquid?</p>
      </section>

      <section class="com__section com__section--text">
        <h1 class="animate slideInLeft" align="center">Impressum/Disclaimer</h1>
        <div class="recht">
          <div class="impressum">
            <h1>Impressum</h1>
            <h2>Angaben gemäß § 5 TMG:</h2>
            <p>Fabian Thielen<br />
            Erhard-Fischer-Str. 35a<br />
            53343 Wachtberg<br />
            </p>
            <h2>Kontakt:</h2>
            <table><tr>
            <td>Telefon:</td>
            <td>015165142367</td></tr>
            <tr><td>E-Mail:</td>
            <td><a href="mailto:server@fabian-thielen.de" title="server@fabian-thielen.de" target="_blank">server@fabian-thielen.de</a></td>
            </tr></table><br />
            <p>Quelle: <em><a rel="nofollow" href="http://www.e-recht24.de/impressum-generator.html" target="_blank">http://www.e-recht24.de</a></em></p>
          </div>

          <div class="disclaimer mCustomScrollbar" data-mcs-theme="3d-thick-dark">
            <h1>Haftungsausschluss (Disclaimer)</h1>
            <p><strong>Haftung für Inhalte</strong></p>
            <p>Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
            <p><strong>Haftung für Links</strong></p>
            <p>Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p>
            <p><strong>Urheberrecht</strong></p>
            <p>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p><p></p>
          </div>
        </div>
      </section>

      <section class="com__section com__section--text datsch">
        <h1 class="animate scaleIn" align="center">Datenschutzerklärung</h1>
        <div class="animate slideInLeft delay-3 datenschutz mCustomScrollbar" data-mcs-theme="3d-thick-dark">
            <p><strong>Datenschutz</strong></p>
            <p>Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. </p>
            <p>Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich. </p>
            <p>Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.</p>
            <p> </p>
            <p><strong>Datenschutzerklärung für die Nutzung von Google Analytics</strong></p>
            <p>Diese Website benutzt Google Analytics, einen Webanalysedienst der Google Inc. ("Google"). Google Analytics verwendet sog. "Cookies", Textdateien, die auf Ihrem Computer gespeichert werden und die eine Analyse der Benutzung der Website durch Sie ermöglichen. Die durch den Cookie erzeugten Informationen über Ihre Benutzung dieser Website werden in der Regel an einen Server von Google in den USA übertragen und dort gespeichert. Im Falle der Aktivierung der IP-Anonymisierung auf dieser Webseite wird Ihre IP-Adresse von Google jedoch innerhalb von Mitgliedstaaten der Europäischen Union oder in anderen Vertragsstaaten des Abkommens über den Europäischen Wirtschaftsraum zuvor gekürzt.</p>
            <p>Nur in Ausnahmefällen wird die volle IP-Adresse an einen Server von Google in den USA übertragen und dort gekürzt. Im Auftrag des Betreibers dieser Website wird Google diese Informationen benutzen, um Ihre Nutzung der Website auszuwerten, um Reports über die Websiteaktivitäten zusammenzustellen und um weitere mit der Websitenutzung und der Internetnutzung verbundene Dienstleistungen gegenüber dem Websitebetreiber zu erbringen. Die im Rahmen von Google Analytics von Ihrem Browser übermittelte IP-Adresse wird nicht mit anderen Daten von Google zusammengeführt.</p>
            <p>Sie können die Speicherung der Cookies durch eine entsprechende Einstellung Ihrer Browser-Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website vollumfänglich werden nutzen können. Sie können darüber hinaus die Erfassung der durch das Cookie erzeugten und auf Ihre Nutzung der Website bezogenen Daten (inkl. Ihrer IP-Adresse) an Google sowie die Verarbeitung dieser Daten durch Google verhindern, indem sie das unter dem folgenden Link verfügbare Browser-Plugin herunterladen und installieren: <a href="http://tools.google.com/dlpage/gaoptout?hl=de" target="_blank">http://tools.google.com/dlpage/gaoptout?hl=de</a>.</p>
            <p><strong>Auskunft, Löschung, Sperrung</strong></p>
            <p>Sie haben jederzeit das Recht auf unentgeltliche Auskunft über Ihre gespeicherten personenbezogenen Daten, deren Herkunft und Empfänger und den Zweck der Datenverarbeitung sowie ein Recht auf Berichtigung, Sperrung oder Löschung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten können Sie sich jederzeit über die im Impressum angegeben Adresse des Webseitenbetreibers an uns wenden.</p>
        </div>
      </section>
    </div>

    <nav class="com__nav slideLeft">
      <ul class="com__nav-list">

        <li class="com__nav-item fadeIn bildl">
          <center><img class="bild" src="data/me.png" width="64px" height="64px"></center>
          <a href="" class="com__nav-link">
            <span class="text animate scaleInLeft delay-2">Über mich</span>
          </a>
        </li>

        <li class="com__nav-item fadeIn bildl">
          <center><img class="bild" src="data/projects.png" width="64px" height="64px"></center>
          <a href="" class="com__nav-link">
            <span class="text animate scaleInLeft delay-2">Projekte</span>
          </a>
        </li>

        <li class="com__nav-item fadeIn bildl">
          <center><img class="bild" src="data/app.png" width="64px" height="64px"></center>
          <a href="" class="com__nav-link">
            <span class="text animate scaleInLeft delay-2">Programme</span>
          </a>
        </li>

        <li class="com__nav-item fadeIn bildl">
          <center><img class="bild" src="data/builder.png" width="64px" height="64px"></center>
          <a href="" class="com__nav-link">
            <span class="text animate scaleInLeft delay-2">Test</span>
          </a>
        </li>

        <li class="com__nav-item fadeIn bildl">
          <center><img class="bild" src="data/builder.png" width="64px" height="64px"></center>
          <a href="" class="com__nav-link">
            <span class="text animate scaleInLeft delay-2">Test</span>
          </a>
        </li>

        <li class="com__nav-item fadeIn bildl">
          <center><img class="bild" src="data/imprint.png" width="64px" height="64px"></center>
          <a href="" class="com__nav-link">
            <span class="text animate scaleInLeft delay-2">Impressum</span>
          </a>
        </li>

        <li class="com__nav-item fadeIn bildl">
          <center><img class="bild" src="data/data.png" width="64px" height="64px"></center>
          <a href="" class="com__nav-link">
            <span class="text animate scaleInLeft delay-2">Datenschutz</span>
          </a>
        </li>
      </ul>

    </nav>
  </div>

    <!-- jQuery-Popups -->
    <div id="beschr-installer" class="jqpop" title="Verwendung Installer" style="color: #fff;">
      <p class="chmod">chmod +x install</p>
      <p>./install paketname</p>
      <p>(paketname durch den Namen des Paketes ersetzen)</p>
    </div>

    <div id="beschr-updater" class="jqpop" title="Verwendung Updater" style="color: #fff;">
      <p class="chmod">chmod +x update</p>
      <p>./update</p>
    </div>
    <!--// jQuery-Popups -->

    <!-- Scripts -->
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/modernizr.min.js"></script>
    <script src="scripts/main.js"></script>
    <script src="scripts/highlight.min.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script src="scripts/bootstrap.js"></script>
    <script src="scripts/jquery.viewport.js"></script>
    <script src="scripts/ubuntu-mono.js"></script>
    <!-- Scrollbars -->
    <script src="scripts/jquery.mousewheel.js"></script>
    <script src="scripts/mwheelIntent.js"></script>
    <script src="scripts/jquery.jscrollpane.min.js"></script>
    <script src="scripts/jquery.mCustomScrollbar.js"></script>
    <!--// Scrollbars -->
    <script src="scripts/script.js"></script>
    <!--// Scripts -->
  </body>
</html>

Und nun kommen wir zum Javascript. Ich habe deinen Code mal so angepasst das er die ".on"-Funktion fuer die meisten Click-Events verwendet. Bei dynamisch geladenen Inhalten ist diese ganz praktisch. Man haengt sie an einen statischen Teil der Seite (".programme") und sie reagiert dann auf Events an den dynamischen Inhalten (".verwendung", ".download").

Aus den Data-Attributen in der index.htm hole ich mir die Seiten die bei den Programme-Tabs geladen werden soll.
Nach dem laden des Seiteninhalts (Programme) wird nun immer pageLoadSuccess() aufgerufen um das Code Highlighting zu aktiveren.

MouseOver und MouseLeave fuer die Bilder in der Navigation funktionieren jetzt auch richtig denke ich.

Code:

(function($) {

    function pageLoadSuccess()
    {
        // Scrollbars initialisieren
        $(".content").mCustomScrollbar();

        // Code Hightlight laden
        $("pre code").each(function(i, block) {
            hljs.highlightBlock(block);
        });
    }

    // Bild in der Navigation anzeigen bei mouseleave
    $(".bildl").mouseleave(function(e) {
        $(this).find(".bild").show();
    });

    // Bild in der Navigation ausblenden bei mouseover
    $(".bildl").mouseover(function(e) {
        $(this).find(".bild").hide();
    });

    // Dialog fuer die Verwendung oeffnen
    $(".programme").on("click", ".verwendung", function(e) {
        var name = $(this).data("name");
        $("#beschr-" + name).dialog();
    });

    // Download des Programms starten
    $(".programme").on("click", ".download", function(e) {
        var file = $(this).data("file");
        location.href = "data/download/" + file;
    });

    // Programm Tabs
    $(".programme").on("click", ".programm", function(e) {

        // Seiten Inhalt laden
        var page = $(this).data("page");
        $(".programme").find(".panel-body").load(page, pageLoadSuccess);

        // Bei allen Tabs die "active" Klasse entfernen
        $(this).parents("ul").find("li").removeClass("active");

        // Richtigen Tab auf "active" setzen
        $(this).parents("li").addClass("active");
    });

    $(document).ready(function() {

        // Highlight initialisieren
        hljs.initHighlightingOnLoad();

        // Scrollbars initialisieren
        $(".content").mCustomScrollbar();

        // Code des ersten Programms laden
        $(".programme").find(".programm").first().click();
    });

})(jQuery);

Den Output deiner "installer.php" und "updater.php" habe ich mir zum testen nur kopiert und abgeaendert. Beachte bei den Buttons wieder die Data-Attribute.

Code:

<html>
<head>
  <title>Updater</title>
</head>
<body>
  <div class="dupdater">
  <h2 class="progh pullDown">Updater</h2>
<pre class="fadeIn mCustomScrollbar updater" data-mcs-theme="inset-2-dark">
<code class="bash">
#!/bin/sh
clear
echo "------------------------------------------"
echo ""
echo "UpdateTool by Fabian Thielen"
echo ""
echo "------------------------------------------"
echo ""
echo ""
apt-get update -y
echo ""
echo "------------------------------------------"
echo ""
echo "Update der Paketlisten abgeschlossen"
echo ""
echo "------------------------------------------"
sleep 1
clear
echo "------------------------------------------"
echo ""
echo "UpdateTool by Fabian Thielen"
echo ""
echo "------------------------------------------"
echo ""
echo ""
apt-get upgrade -y && apt-get dist-upgrade -y
echo ""
echo "------------------------------------------"
echo ""
echo "Upgrade abgeschlossen"
echo ""
echo "------------------------------------------"
echo ""
echo ""
</code>
</pre>
      <button class="hvw slideUp verwendung" data-name="updater">Verwendung</button>
      <button class="hvw slideUp download" data-file="update">Download</button>
    </div>
  </body>
</html>

Code:

<html>
<head>
  <title>Installer</title>
</head>
<body>
  <div class="dupdater">
  <h2 class="progh pullDown">Installer</h2>
<pre class="fadeIn mCustomScrollbar installer" data-mcs-theme="inset-2-dark">
<code class="bash">
#!/bin/sh
clear
echo "------------------------------------------"
echo ""
echo "Pr0gramm installer by Fabian Thielen"
echo ""
echo "------------------------------------------"
echo ""
readcmd() {
    for var in $*
    do
        apt-get install $var -y
        echo ""
        echo "##########"
        echo ""
    done
}
readcmd $*
</code>
</pre>
      <button class="hvw slideUp verwendung" data-name="installer">Verwendung</button>
      <button class="hvw slideUp download" data-file="install">Download</button>
    </div>
  </body>
</html>

ClocxHD · 2. Juni 2015

Hallo r15ch13,

vielen Dank

Echt nice von dir!

Jetzt besteht nur noch ein Problem:
Die Custom-Scrollbars werden nicht geladen.

Mit freundlichen Grüßen
Fabian Thielen

r15ch13 · 2. Juni 2015

Ah jo, aendere mal Zeile 6 im Javascript zu: $(".content").mCustomScrollbar();

ClocxHD · 2. Juni 2015

Ah danke

Suche

JavaScript Scripts laden nicht richtig

ClocxHD

Lt. Junior Grade

Umbel

Lt. Commander

ClocxHD

Lt. Junior Grade

Teisi

Lt. Junior Grade

ClocxHD

Lt. Junior Grade

Teisi

Lt. Junior Grade

Umbel

Lt. Commander

ClocxHD

Lt. Junior Grade

Teisi

Lt. Junior Grade

ClocxHD

Lt. Junior Grade

trialgod

Lt. Commander

ClocxHD

Lt. Junior Grade

r15ch13

Lieutenant

ClocxHD

Lt. Junior Grade

r15ch13

Lieutenant

ClocxHD

Lt. Junior Grade

r15ch13

Lieutenant

ClocxHD

Lt. Junior Grade

Ähnliche Themen