Announcement

Collapse
No announcement yet.

Javascript für Änderung der Navigation

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Javascript für Änderung der Navigation

    Hallo Leute,

    ich quäle mich nun schon länger mit Frames in HTML umher. Es sind insgesamt drei Frames: Header, Navigation und Hauptteil. Mein Problem ist, dass wenn man in der Navigation einen Menüpunkt anklickt, soll dieser "active" sein, wodurch der Text des Menüpunktes eine andere Farbe bekommt und die divs "spaneins" und "spanzwei" aktiviert werden. Grundsätzlich kann man dieses auch gut in CSS umsetzen, nur leider funktioniert "active" nur so lange, bis man in einem der drei Frames einen neuen Link anklickt. Wie schaffe ich es nun, dass ein Link im Menü active bleibt, bis man einen anderen Menüpunkt anklickt? Erschwerend kommt hinzu, dass im Header-Frame auch noch Links vorhanden sind (z.B. Impressum, Sprache; bei denen sollen keine Effekte beim Anklicken ausgeführt werden). Wenn einer dieser angeklickt wird, muss im Navigations-Frame auch der aktive Link wieder "unaktiv" werden.

    Header-Datei:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>MIS</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="stylesheet_ie.css">
 	<![endif]-->

</head>

<body>

	<div id="header">
    
    	<div id="sprache">
        	<a href="englisch.html" class="linklist">English</a>
        	<a href="englisch.html" class="linklist">Kontakt</a>
            <a href="englisch.html" class="linklist">Impressum</a>
        </div>
    
    	<div id="dropdownmenue">
        
            <div id="dropdownmenuepublikation">
            	<h1 class="headerschrift">Pubklikation:
                    <select class="selectHead" style="width: 150px;" name="mainPublicationId" size="1" onChange="document.mainPublicationId.submit();">
                        <option value="0" selected="selected">Oktober_2009</option>
                        <option value="1">September_2009</option>
                        <option value="2">August_2009</option>
                        <option value="3">Juli_2009</option>
                        <option value="4">Juni_2009</option>
                        <option value="5">Mai_2009</option>
                        <option value="6">April_2009</option>
                        <option value="7">Maerz_2009</option>
                        <option value="8">Februar_2009</option>
                        <option value="9">Januar_2009</option>
                        <option value="10">Dezember_2008</option>
                    </select>
				</h1>
            </div>
    
            <div id="dropdownmenueprofil">
				<h1 class="headerschrift">Profil:
					<select class="selectHead" style="width: 150px;" name="mainProfileId" size="1" onChange="document.mainProfileId.submit();">
                        <option value="156">ISM-Freigabe</option>
                        <option value="157">ISM-Abnahme</option>
                        <option value="155">ISM-Report</option>
                        <option value="151" selected="selected">PM-Report</option>
                        <option value="141">PM-Freigabe</option>
                        <option value="153">PM-Abnahme</option>
                        <option value="154">eQR-Abnahme</option>
                        <option value="100">Admin User</option>
                        <option value="99">Admin Profiles</option>
                        <option value="98">News Erfasser</option>
                        <option value="143">EQR-Produkt</option>
                        <option value="158">eQR-DTGK</option>
                        <option value="159">eQR-DTGK-Freigabe</option>
                        <option value="138">TSBS_gesamt</option>
                        <option value="146">EQR-BS_2008</option>
                	</select>
				</h1>
			</div>
            
      	</div>
		
		<div id="uebersicht" class="headerschrift">
			<p>eQR Process Model (TS PM)</p>
		</div>
        
	</div>

</body>
</html>
    Navigations-Datei:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Diagramm Chooser</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>
	<div id="navigationsseite"> 
	
        <h1>Navigation</h1>
        <ul>
            <li><a class="navnormal" href="dgrm-193-316.html" target="content">eQR</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navnormal" href="test1.html" target="content">Test1</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navnormal" href="test2.html" target="content">Test2</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navnormal" href="test1.html" target="content">Test1</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
        </ul>
        
        <h1>Downloads</h1>
        <ul>
            <li><a class="navdownload" href="test3.html" target="content">Test3</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navdownload" href="Datei2.rar" target="download">Datei2.rar</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navdownload" href="Datei3.jpg" target="download">Datei3.jpg</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navdownload" href="Datei4.7z" target="download">Datei4.7z</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navdownload" href="Datei5.doc" target="download">Datei5.doc</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navdownload" href="Datei6.xls" target="download">Datei6.xls</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
        </ul>
        
        <h1>Information</h1>
        <ul>
            <li><a class="navinfo" href="test3.html" target="content">Test3</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navinfo" href="Datei2.rar" target="download">Datei2.rar</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navinfo" href="Datei3.jpg" target="download">Datei3.jpg</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navinfo" href="Datei4.7z" target="download">Datei4.7z</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navinfo" href="Datei5.doc" target="download">Datei5.doc</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
            <li><a class="navinfo" href="Datei6.xls" target="download">Datei6.xls</a><div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div></li>
        </ul>
    
    </div>

</body>

</html>
    In der Navigations-Datei soll folgender Code angezeigt werden,w enn man auf die entsprechende Verlinkung klickt:
    HTML Code:
    <div class="spaneins"><img src="navigation_magenta.gif" alt="" /></div><div class="spanzwei"><img src="navigation_magenta.gif" alt="" /></div>
    Der Link selbst soll dann eine andere Farbe erhalten


    Problem ist halt, dass ich einen 10 Jahre alten Unterbau vorgesetzt bekommen habe, der schon damals unter aller Sau war, und den ganzen Kram "oberflächlich" umbauen soll, damit er wieder aufgehübscht ist... schrecklich, wie alt das ist! :/ Need help...

    Gruß,
    Martin
    Tags: None
  • #2
    Hallo,

    nicht umsonst sind Framesets etwas "aus der Mode" gekommen und haben in Zeiten von DSL und CSS2/3 ihre Vorteile und - bis auf wenige Ausnahmen - ihre Existenzberechtigung eingebüßt.

    Dein Problem ist ein grundsätzliches Frameset-Problem, die Synchronisation von Navigation und Inhalt. Jede Inhaltsseite muß dazu beim Laden dem Navigationsframe mitteilen wer sie ist. Dieser entscheidet danach welches Menü er anzeigt deaktiviert. Funktioniert i.a.R. nur durch exzessiven Einsatz von JavaScript. Deaktiviertes JS macht somit meistens die Seite komplett unbrauchbar.
    Zusätzlich muß man aufpassen das es in beide Richtungen funktioniert, also sowohl bei Verweisen aus dem Navigationsframe, als auch aus dem Inhalt. Auch sollte man Vorsorge treffen, daß ein Neuladen des Naviframes nicht ein Neuladen des Inhalts zur Folge hat, welches wieder ein Neuladen des Naviframes auslößt, welches dann zum Neuladen des Inhalts ...
    Alles Dinge, über die ich heutzutage nicht mehr nachdenken möchte und dir deshalb nur raten kann: Das "Aufhübschen" wird teurer - wenn nicht sofort, dann im Zuge der nächsten Änderungen - als ein seriöser Cut zur Abschaffung des Frameset und hin zu strukturiertem, semantisch korrektem HTML und mit CSS fürs Layout.
    Mir ist klar, dass du das jetzt nicht hören wolltest , aber über kurz oder lang führt kein Weg daran vorbei!

    Gruß Falk
    Wenn du denkst du hast alle Bugs gefunden, dann ist das ein Bug in deiner Denksoftware.

    Quellcode ohne ein Mindestmaß an Formatierung sehe ich mir nicht an! Ich leiste keinen Privatsupport per Mail oder PN!

    Comment

    • #3
      Ach f***, genau so etwas hab ich mir schon gedacht! :/ Als ich vor ein paar Monaten in dem Projekt eingestiegen bin und seitdem diverse Arbeiten am Design übernommen habe, sagte ich den Herrschaften bereits, dass ihr System die letzte Grütze ist und ich damit nur Probleme bekommen werde. Und genau das, was du mir hier erklärt hast, hatte ich gehofft, mit CSS umgehen zu können - ohne Erfolg, sonst hätte ich mich hier ja auch nicht zu Worte gemeldet... Und zur Sache mit Javascript, ich sagte ständig zu meinen Kollegen, dass wenn jemand Javascript abgeschaltet hat, manche Funktionen unbrauchbar wären. Jetzt hab ich doch ernsthaft in meinen Überlegungen bei dem Menü selbst vergessen, dass jemand ohne Javascript die Seite gar nicht mehr nutzen könnte! Na so eine Sch**** aber auch!

      Danke für deine Antwort, ich werd den Fall so weiterreichen!

      Comment

      Previous template Next
      Working...
      X