ilch Forum » Ilch Clan 1.1 » Allgemein » Dynamisches Menü mir javascript

Geschlossen
  1. #1
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    Hallo!

    Also ich habe ein menü mit Javascript gebastelt, wenn ich jetz auf z.b. "Neuigkeiten oben klicke erscheint das DIV mit dem gewünschten Inhalt, wenn ich jetz aber dort auf nen Link klicke, z.b. News dann komme ich zum Ziel aber mein DIV is wieder weg..jetz weiß ich nicht wo ich noch was nachtragen muss damit die DIVS der verschiedenen Menüs auch noch angezeigt werden, nachdem ich auf ein Link auf eine PHP Datei verwießen habe.("?news" etc.)
    Würd mich über Hilfe freuen!

    tschü...David


    verwendete ilchClan Version: 1.1

    betroffene Homepage: davidfritsch.da.funpic.de/SV/


    Zuletzt modifiziert von darkentik am 01.08.2008 - 08:42:56
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    weiß echt keiner nen Rat?
    würd mich über Hilfe freuen!
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Chapter Hall Of Fame
    Registriert seit
    21.10.2007
    Beiträge
    5.951
    Beitragswertungen
    229 Beitragspunkte
    also bei mir geht alles soweit oder ich hab dich falsch verstanden
    Spamming, sinnlose Beiträge, Pushing, Doppelposting und Werbung sind verboten
    externer Link
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    angenommen du klickst auf den button oben "neuigkeiten" da erscheint das DIV links unter dem menü. dann klickst du in dem DIV auf "news" da kommst du auf die "?news.php" und das DIv verschwindet wieder...

    ich möchte aber dass das DIV für alle Seiten, die in den jeweiligen Menüs stehen zu sehen ist.
    für neuigkeiten z.b. soll es also für :
    -news
    -saisontabelle
    -spielplan
    -events

    sichtbar sein.
    jetzt verständlicher?
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    sCoRpIoN Mitglied
    Registriert seit
    03.03.2005
    Beiträge
    1.883
    Beitragswertungen
    0 Beitragspunkte
    also im grunde etwas ähnliches, wie hier bei einem meiner free-layouts oder?

    ilch.pixelmonster.eu/

    einfach mal auf die navi-links klicken;

    gruss
    michi
    free-design: externer Link

    --## externer Link ##--
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    hhhmmm, sieht ja verrückt aus die Seite, cool!
    kann mich grad nich dahinein veretzen aber könnte es vielelicht so hinkriegen wenn wdu mir jetzt noch verrätst wie du das gemacht hast kann ich es mal probieren...;)

    Gruß Darkentik
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    lordrepha Mitglied
    Registriert seit
    11.03.2006
    Beiträge
    1.362
    Beitragswertungen
    22 Beitragspunkte
    also ich habe das mit cookies speichern gemacht...

    zb...

    document.cookie = 'neuigkeiten'+'=1';

    und dann eben eine javafunktion die cookies ausliest und den div dann wieder setzt...
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    sCoRpIoN Mitglied
    Registriert seit
    03.03.2005
    Beiträge
    1.883
    Beitragswertungen
    0 Beitragspunkte
    seh dir doch einfach mal das *.js-file in meinem template an; dort wirste sehen, dass ich mit js einfach nur die url auslesen, diese bei ? splitte und dann entsprechend den modulen automatisch abarbeite;

    url = document.URL;
    url_split = url.split('?');


    var url_slit ist somit ein array aus dem teil vor dem ? und einem teil nach dem ?.

    beispiel:
    url_split[1] bei index.php?news => news
    url_split[0] bei index.php?news => www.deinedomain.de/index.php oder so ähnlich

    anschließend per js einfach noch if(url_split[1]=='news'){/** news-subnavigation sichtbar bla bla */}

    gruss
    michi
    free-design: externer Link

    --## externer Link ##--
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    ah, ok.
    Ja das problem is, dass ich ja eigentlich mit JS noch nie was am Hut hatte....*g*
    aber danke für dein Tipp, werd das mal probieren.
    bis später meld mich wenn ich was hinbekommen habe oder nich zwinker

    Gruß David
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    @ sCoRpIoN

    also, das is ja die Fuction für die Menüs oder?

    -------------------------------------
    function nav_point_active(){
    	url = document.URL;
    	url_split = url.split('?');
    	if (url_split[1]) {
    		nav_bar = document.getElementsByClassName('nav_point');
    		count_elements = nav_bar.length;
    		url_length = url_split[1].length;
    		for (i = 0; i < count_elements; i++) {
    			href_split = nav_bar[i].href.split('?');
    			href_split2 = href_split[1].split('&');
    			href_length = href_split2[0].length;
    			url_string = url_split[1].substr(0, href_length);
    			if (href_split2[0] == url_string) {
    				nav_bar[i].className = 'nav_point_active';
    			}
    		}
    	}else{
    		nav_bar = document.getElementsByClassName('nav_point');
    		count_elements = nav_bar.length;
    		for (i = 0; i < count_elements; i++) {
    			href_split = nav_bar[i].href.split('?');
    			href_split2 = href_split[1].split('&');
    			if (href_split2[0] == 'news') {
    				nav_bar[i].className = 'nav_point_active';
    			}
    		}
    	}
    }

    -------------------------------------

    wollt mal fragen was einige Sachen bedeuten...
    z.B.
    -nav_bar = document.getElementsByClassName('nav_point');
    --> wo und wie hast du die Klasse "nav_point" deklariert?

    -wär es möglich, dass du die Funktionszeilen mal mit prägnanten Wörter dokumentierst?Weil ich steig grad nich so richtig hinter die Bedeutung einiger Bezeichnungen...:'(
    Wäre dir dankbar wenn du zeit finden würdest mir weiter zu helfen!

    Gruß David


    Zuletzt modifiziert von darkentik am 22.08.2008 - 12:00:09
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    sCoRpIoN Mitglied
    Registriert seit
    03.03.2005
    Beiträge
    1.883
    Beitragswertungen
    0 Beitragspunkte
    hallo darkentik,

    da musste acht geben; die js-funktion ist speziell für mein design geschrieben; "nav_point" ist einfach der name der css-klasse; "nav_point_active" quasi der hover-/active-effekt von "nav_bar";

    achja: die prototype.js - library brauchste auch dazu. gibts auf externer Link
    wennste aber meinen code analysiert hast, dann weißte das ja mittlerweile;

    function nav_point_active(){
        url = document.URL;  /** url erfassen */
        url_split = url.split('?'); /** aus url wird ein array mit zwei teilen erzeugt; teiler ist das fragezeichen */
        if (url_split[1]) { /** falls ein teil nach dem fragezeichen existiert, also etwas wie index.php?wars, dann mach hier weiter; */
            nav_bar = document.getElementsByClassName('nav_point'); /** jetzt wird ein array erzeugt, in dem alle links mit class="nav_point" landen */
            count_elements = nav_bar.length; /** die anzahl der arrayeinträge von count_elements wird gezählt */
            url_length = url_split[1].length; /** die zeichenmenge von url_split[1], also bsp.: wars, forum usw. wird erfasst */
            for (i = 0; i < count_elements; i++) { /** schleife, welche alle einträge mit class="nav_bar" abhandelt */
                href_split = nav_bar[i].href.split('?'); /** hier wird die gerade aktuelle variable, welche aus dem array nav_bar stammt, wie oben beim ? gesplittet */
                href_split2 = href_split[1].split('&'); /** neu erzeugtes array wird nochmals bei & gesplittet */
                href_length = href_split2[0].length; /** länge des endgültig gesplitteten teils des aktuellen links wird erfasst */
                url_string = url_split[1].substr(0, href_length); /** des des teiles der url nach dem ? wird auf die gleiche länge von href_length gebracht */
                if (href_split2[0] == url_string) { /** überprüfung ob beiden strings/modulnamen gleich sind */
                    nav_bar[i].className = 'nav_point_active'; /** wenn gleich, dann wird klasse von nav_point auf nav_point_active geändert */
                }
            }
        }else{ /** wenn keine zeichenkette nach ? existiert bzw. gar kein ? existiert, dann gehts hier weiter */
            nav_bar = document.getElementsByClassName('nav_point'); /** siehe oben */
            count_elements = nav_bar.length; /** siehe oben */
            for (i = 0; i < count_elements; i++) { /** siehe oben */
                href_split = nav_bar[i].href.split('?'); /** siehe oben */
                href_split2 = href_split[1].split('&'); /** siehe oben */
                if (href_split2[0] == 'news') { /** da kein string bzw. zeichenkette in der url nach ? existiert bzw. gar kein ? existiert muss es sich um die startseite handeln und deshalb wird die klasse des links mit "news" nach dem ? und in class="nav_point_active" verändert  */
                    nav_bar[i].className = 'nav_point_active';
                }
            }
        }
    }


    nicht vergessen: am ende des layouts muss auch die entsprechende js-funktion aufgerufen werden, sonst funktionierts natürlich nicht.

    <script type="text/javascript" language="JavaScript">
        //<![CDATA[
            visual_customization();
            nav_point_active();
        //]]>
    </script>


    achja: visual_customization() ist eigentlich ganz ähnlich zu nav_point_active() jedoch sind in der top_navi die punkte verschiedenfarbig und das wird damit realisiert;
    warum ich das so mache? ganz einfach: wenn das menü aus der db generiert wird, dann kann ich dort nur eine klasse angeben und mit dieser funktion kann ich durch simples zählen die klassen verändern und somit die farbe wechseln;


    $ ist dabei auch nur eine funktion der prototype-lib und ist im grunde nichts anderes als getElementById;


    gruss
    michi


    Zuletzt modifiziert von sCoRpIoN am 22.08.2008 - 20:15:48
    free-design: externer Link

    --## externer Link ##--
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    naja so richtig steig ich noch nicht durch....

    das Problem ist, dass ich ja schon ne function habe um die DIV´s einzublenden...

    // Auswahl/Selektieren der Menüpunkte
    var box = new Array();
    box[0] = 'menue1';
    box[1] = 'menue2';
    box[2] = 'menue3';
    box[3] = 'menue4';
    
    var content = new Array();
    content[0] = 'content1';
    content[1] = 'content2';
    content[2] = 'content3';
    content[3] = 'content4';
    
    // Fkt. zum Darstellen des Inhaltes des selektierten Menüpunktes
    function show(id,id2,id3)
    {
       for(i=0;i<box.length;i++) //"length" entspricht dem Index von "box"
                    {
                            document.getElementById(box[i]).style.display="none";
                    }
                    document.getElementById(id).style.display="block";
                    
    for(i=0;i<content.length;i++)
    {                
                    document.getElementById(content[i]).style.display="none";
    }
    document.getElementById(id2).style.display="block";
    document.getElementById(id3).style.display="none";
    }
    function show (id)
    {
        url=document.url;
        url_split=url.split('?');
    	if(url_split)[1])
    	    {
    		    if (url_split[1]='news')
    		        {
    		        
    		        }
    		}
    }


    und dann jeweils die "onclick" events, die eben die obige function ansteuern und da die jeweiligen idßs übergeben...

    <table width="705px" height="32x" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td valign="top" width="20%" height="100%">
    <a href="#" onclick="show('menue1','content1','main_col')">
    <img src="/SV/include/designs/SV-HTML/Bilder/1024px/mbox1.gif" border="0"></a>
    </td>
    
    <td valign="top" width="20%" height="100%">
    <a href="#" onclick="show('menue2','content2','main_col')">
    <img src="/SV/include/designs/SV-HTML/Bilder/1024px/mbox2.gif" border="0" " /></a>
    </td>
    
    <td valign="top" width="20%" height="100%">
    <a href="#" onclick="show('menue3','content3','main_col')">
    <img src="/SV/include/designs/SV-HTML/Bilder/1024px/mbox3.gif" border="0" /></a>
    </td>
                                               
    <td valign="top" width="20%" height="100%">
    <a href="#" onclick="show('menue4','content4','main_col')">
    <img src="/SV/include/designs/SV-HTML/Bilder/1024px/mbox4.gif" border="0" /></a>
    </td>
                                                
    <td valign="top" width="20%" height="100%">
    <a href="?gbook">
    <img src="/SV/include/designs/SV-HTML/Bilder/1024px/mbox5.gif" border="0" /></a>
    </td>
    </tr>
    </tbody>


    tut mir leid, dass ich von JS echt kein plan habe bzw heir grad echt ne Blockade habe....:'(
    ich dachte, dass ich das mit enr ganz einfachen function hinkriege und jetz da wird ne wissenschaft draus...
    ich danke allen, die sich noch zeit für mich nehmen und mir helfen wollen!!
    ich mus erstmal wieder abschalten, komm hier nicht weiter...wir hören uns dann vielleicht die woche wieder..
    Danke schon an alle schlauen Köpfe!
    Schön Abend noch!
    tschü...David


    Zuletzt modifiziert von darkentik am 09.09.2008 - 19:56:29
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    Hallo!

    Ich habe gerade noch mal was ausprobiert was der scorpion mir geraten hat...
    Das is meine function...
    function url()
    {
    url=document.URL;
    urlsplit=url.split('?');
    
    
    if (url_split[1]=='news'){menue1.style.visibility="true";}
    if (url_split[1]=='verein'){menue2.visible="true"}
    }


    und das steht in dem button drin...
    td valign="top" width="20%" height="100%">
    <a href="index.php?neuigkeiten" onclick="url">
    <bildURL..>
    </a>
    ...etc...


    aber die DIv erscheint nicht...warum??:'(

    tschü..David
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    sCoRpIoN Mitglied
    Registriert seit
    03.03.2005
    Beiträge
    1.883
    Beitragswertungen
    0 Beitragspunkte
    an sich steht doch alles einwandfrei in meiner erklärung drin; ich werde hier bestimmt nicht anfangen jedes script-stücklein vorzukauen; ein bisschen eigeninitiative muss schon vorhanden sein;
    free-design: externer Link

    --## externer Link ##--
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    Chapter Hall Of Fame
    Registriert seit
    21.10.2007
    Beiträge
    5.951
    Beitragswertungen
    229 Beitragspunkte
    Auf und zu klappen mit merken:

    hier ist ein schöner codeschnipsel

    externer Link
    Spamming, sinnlose Beiträge, Pushing, Doppelposting und Werbung sind verboten
    externer Link
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Allgemein

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten