[HTML/JQUERY] Dynamischer Content durch hashchanges

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Ah tut mir leid, fehler gefunden. Hab etwas im Tutorial vergessen :S

    Ganz am Ende, nachdem das hashchange Event wieder geschlossen wurde, müssen wir es selbst einmal aufrufen. Denn sonst wird es mein ersten besuch der Seite nicht aufgerufen, und damit entsteht der Fehler wie er bei dir kam.

    Also:

    JavaScript-Quellcode

    1. $(window).hashchange( function(){
    3. //dein inhalt
    5. });
    6. $(window).hashchange();

    Ich editiere es sofort in den 1. Post.

    Und als kleiner Tipp, du kannst ja auch mit / im hash arbeiten, so wie es z.b bei Twitter und co. ist.
    Wenn du

    JavaScript-Quellcode

    1. var hash = (location.hash).replace('#page/', '');
    durch

    JavaScript-Quellcode

    1. var hash = (location.hash).replace('#!/', '');
    ersetzt, und dann

    JavaScript-Quellcode

    1. location.hash = '#page/home';
    durch

    JavaScript-Quellcode

    1. location.hash = '#!/home';

    Dann kannst du die Seiten per
    http://secure-trading.org/hp/#!/home, http://secure-trading.org/hp/#!/blabla usw aufrufen. Somit fällt das mit den hashes nicht ganz so auf *g*

  • Danke für das Tutorial, ich habe es mal ein wenig befolgt jedoch sind mir zwei Fragen offen:
    Wenn ich nun z.B. einen Link einfüge mit PHP z.B.:[*]

    PHP-Quellcode

    1. echo '<a> hreft="#login">Login</a>';

    soll er ja auf der Seite ohne diese neu zu laden die Loginseite aufrufen, doch was macht er dann?
    Sucht er dann die Seite login.php oder sucht er die CSS-Deklaration um diese dann anzuzeigen?
    Ich bräuchte evtl. ein Beispiel andem ich mich orientieren könnte ... (sprich PHP und diese .js)

    So ganz hat's noch nicht klick gemacht bei mir ... sorry für die dämliche Frage. ;)

  • NurPech schrieb:

    Ich bin ja ein Fan davon bevor man so etwas mit Frameworks erledigt ersteinmal weiß was man da tut. Und das sehe ich hier leider nicht gegeben. Ich fände es schön wenn man im Anchluss hieran noch ein kleines Tutorial macht in dem es um javascript allgmein bzw Ajax geht.

    Ansonsten finde ich es schön gemacht ;)

    Also ich mach das Ganze ja lieber so:

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5. <link href="style/style.css" rel="stylesheet" type="text/css">
    6. <title>Dragonas's Demoseite</title>
    7. <script type="text/javascript">
    8. var xmlHttpObject = false;
    10. if (typeof XMLHttpRequest != 'undefined') {
    11. xmlHttpObject = new XMLHttpRequest();
    12. }
    13. if (!xmlHttpObject) {
    14. try {
    15. xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
    16. } catch (e) {
    17. try {
    18. xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
    19. } catch (e) {
    20. xmlHttpObject = null;
    21. }
    22. }
    23. }
    25. function loadContent(hash) {
    26. if (arguments.length < 1) hash = "start";
    27. hash = hash.toLowerCase();
    29. xmlHttpObject.open('get', 'pages/' + hash + '.php');
    30. xmlHttpObject.onreadystatechange = handleContent;
    31. xmlHttpObject.send(null);
    32. return false;
    33. }
    35. function handleContent() {
    36. if (xmlHttpObject.readyState == 4) {
    37. document.getElementById('main').innerHTML = xmlHttpObject.responseText;
    38. document.getElementById('main').fadeOut();
    39. }
    40. }
    41. </script>
    42. </head>
    43. <body onload="loadContent()">
    44. <header id='menubar'>
    45. <a href='#' onclick="loadContent('start');">Home</a>
    46. <a href='#' onclick="loadContent('gm');">Gamemodes</a>
    47. <a href='#' onclick="loadContent('ul');">Upload</a>
    48. <a href='#' onclick="loadContent('ticket');">Missbrauch melden</a>
    49. <a href='#' onclick="loadContent('impressum');">Impressum</a>
    50. </header>
    51. <section id="main">
    53. </section>
    54. </body>
    55. </html>
    Alles anzeigen


    Demo (geht nur solange mein Rechner an ist):
    gessinger.dynalias.com:8088/test/ajax_dragonas/
    [tabmenu]
    [tab='Werbung in eigener Sache']
    Du suchst einen Instant Messenger dessen Verbindung voll verschlüsselt ist? Weiterhin soll er mit anderen Instant Massenging Protokollen verknüpfbar sein? Außerdem möchtest du weltweit erreichbar sein (ähnlich icq und msn)? - Dann schick mir Post und erhalte ein unverbindliches, auf alle Fälle kostenloses, Angebot:
    [Blockierte Grafik: http://easy-scripting.net/icon/vCollection/pmEmptyS.png]
    [tab='Vorstellung']
    NurPech
    [tab='meine Tutorials']
    [subtab='C#']

    [subtab='PHP']

    [/tabmenu]

    Meinungen, die ich geäußert habe, sind nicht notwendigerweise meine eigenen. Abweichungen von der deutschen Rechtschreibung unterliegen dem Urheberrecht, dürfen aber unter den Bedingungen von [Blockierte Grafik: http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png] verwendet werden