php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 05-09-2009, 12:22
fritzje610
 Registrierter Benutzer
Links : Onlinestatus : fritzje610 ist offline
Registriert seit: Mar 2004
Ort: Nahe der schönen Loreley
Beiträge: 318
fritzje610 ist zur Zeit noch ein unbeschriebenes Blatt
Standard Position im Menü für nächsten Aufruf speichern

Hallo zusammen,

ich bastele seid mehreren Tagen an einem Navigationsskript, dass ich im www gefunden habe und es für meine Bedürfnisse anpassen will.
Soweit funktioniert es auch. Problem ist nur noch, wenn ich einen Link anklicke, klappt das Menü, dadurch das die Seite neu geladen wird, wieder zu. Wie kann ich es realisieren, dass das Menü offen bleibt, wenn ein Link angeklickt wird und es nur auf und zu klappt, wenn mann die Oberpunkte anklickt? Ich habe mal die Menüstruktur und das jquery dazu unten angefügt.

Es wäre toll von euch, wenn mir einer bei der Lösung des Problems helfen könnte. Mittlerweile bin ich dadurch etwas in Zeitnot geraten.


Vielen Dank im voraus ! ! !

Gruß

Michael

HTML-Code:
<div id="navi">
        <ul class="level1">
        	<li><a class="head" href="#">Wir &uuml;ber uns</a>
        		<ul class="level2">
        			<li><a class="header" href="?ziel=wir_ueber_uns">Profil</a></li>
                    <li><a class="header" href="?ziel=struktur">Struktur</a></li>
        			<li><a class="header" href="?ziel=anreise">Anreise</a></li>
				</ul>
        	</li>
            <li><a class="head" href="#">Gesch&auml;ftsfelder</a>
            	<ul class="level2">
            		<li><a class="header" href="?ziel=geschaeftsfelder"></a></li>
                    <li><a class="header" href="?ziel=automatisierung">Automatisierung</a></li>
            		<li><a class="header" href="?ziel=energie">Energie</a></li>
            		<li><a class="header" href="?ziel=engineering">Engineering</a></li>
            		<li><a class="header" href="?ziel=fertigung">Fertigung</a></li>
            		<li><a class="head" href="?ziel=software">Programmierung</a>
            			<ul class="level3">
           					<li><a class="header" href="?ziel=entwicklung">Software</a></li>
                            <li><a class="header" href="?ziel=entwicklung">Entwicklung</a></li>
            				<li><a class="header" href="?ziel=applikationen">Applikationen</a></li>
           				</ul>
                    </li>
            	</ul>
            </li>
            <li><a class="header" href="?ziel=management">Management</a></li>
            <li><a class="header" href="?ziel=prospekte">Prospekte</a></li>
            <li><a class="header" href="?ziel=news">News</a></li>
		</ul>
</div>



HTML-Code:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript">
	jQuery().ready(function(){
	
	var items = $("#meny2 a").click(function(){ items.removeClass("selected"); $(this).addClass("selected"); });
	
	
	        jQuery('.level1').Accordion({
			active: 'a.selected',
			header: 'a.head',
			alwaysOpen: false,
			animated: true,
   			showSpeed: "fast",
			hideSpeed: "fast"
		});
		jQuery('.level2').Accordion({
			active: 'a.selected',
			header: 'a.head',
			alwaysOpen: false,
			animated: true,
   			showSpeed: "fast",
			hideSpeed: "fast"
		});
		jQuery('.level3').Accordion({
			active: 'a.selected',
			header: 'a.head',
			alwaysOpen: false,
			animated: true,
   			showSpeed: "fast",
			hideSpeed: "fast"
		});
		
			});
		</script>
__________________
Gruß

Michael

Mit Zitat antworten
  #2 (permalink)  
Alt 05-09-2009, 15:32
Benutzerbild von mermshaus mermshaus
 Registrierter Benutzer
Links : Onlinestatus : mermshaus ist offline
Registriert seit: Jun 2009
Beiträge: 451
mermshaus wird schon bald berühmt werden
Standard

Dieser Artikel könnte dir helfen: Javascript-Wertübergabe zwischen HTML-Dokumenten

Ich habe die window.name/storage.js-Methode vor einiger Zeit in einem ähnlichen Script implementiert und sie funktioniert prinzipiell. Allerdings habe ich bislang noch nicht den Aufwand betrieben, herauszubekommen, ob sich mehrere Seiten in die Quere kommen, die nacheinander im selben Fenster aufgerufen werden und diese Technik nutzen.

(Edit: Der Vollständigkeit halber (Schleichwerbung): trunk/php/menubuilder - dockyard - Project Hosting on Google Code. Code ist größtenteils ein namespace experiment gone wrong.)

Geändert von mermshaus (05-09-2009 um 16:06 Uhr)
Mit Zitat antworten
  #3 (permalink)  
Alt 07-09-2009, 08:49
fritzje610
 Registrierter Benutzer
Links : Onlinestatus : fritzje610 ist offline
Registriert seit: Mar 2004
Ort: Nahe der schönen Loreley
Beiträge: 318
fritzje610 ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Guten Morgen,

nachdem ich mich nun den ganzen Samstag mit diesem Menü abgeplagt habe und zu keinem Ergebnis kam, hab ich nochmal verschärft gegoogelt und was anderes gefunden. Das passt von Hause aus sogar noch besser, hat aber auch einen kleinen Schönheitsfehler. Zumindest für den von mir beabsichtigten Gebrauch. Hier erstmal der Link zu dem Originalmenü.

Hier der Code der Menüstruktur:
HTML-Code:
echo "<ul id='containerul'>";

	if ($akt == "wir_ueber_uns")
	{
		echo "<li><span>Wir &uuml;ber uns</span>";
	}
	else
	{
		echo "<li><a href='?ziel=wir_ueber_uns'>Wir &uuml;ber uns</a>";
	}
		echo "<ul>";
    		if ($akt == "struktur")
			{
				echo "<li><span>Struktur</span></li>";
			}
			else
			{	
				echo "<li><a href='?ziel=struktur'>Struktur</a></li>";
    		}
			if ($akt == "anreise")
			{
				echo "<li><span>Anreise</span></li>";
			}
			else
			{
				echo "<li><a href='?ziel=anreise'>Anreise</a></li>";
    		}
		echo "</ul>";
	echo "</li>";
	if ($akt == "geschaeftsfelder")
	{
		echo "<li><span>Gesch&auml;ftsfelder</span>";
	}
	else
	{
		echo "<li><a href='?ziel=geschaeftsfelder'>Gesch&auml;ftsfelder</a>";
    }
		echo "<ul>";
    		if ($akt == "automatisierung")
			{
				echo "<li><span>Automatisierung</span></li>";
			}
			else
			{
				echo "<li><a href='?ziel=automatisierung'>Automatisierung</a></li>";
    		}
			if ($akt == "energie")
			{
				echo "<li><span>Energie</span></li>";
			}
			else
			{
				echo "<li><a href='?ziel=energie'>Energie</a></li>";
    		}
			if ($akt == "engineering")
			{
				echo "<li><span>Engineering</span></li>";
			}
			else
			{
				echo "<li><a href='?ziel=engineering'>Engineering</a></li>";
    		}
			if ($akt == "fertigung")
			{
				echo "<li><span>Fertigung</span></li>";
			}
			else
			{
				echo "<li><a href='?ziel=fertigung'>Fertigung</a></li>";
    		}
			if ($akt == "software")
			{
				echo "<li><span>Software</span>";
			}
			else
			{
				echo "<li><a href='?ziel=software'>Software</a>";
           	}
			echo "<ul>";
       			if ($akt == "entwicklung")
				{	
					echo "<li><span>Entwicklung</span></li>";
				}
				else
				{
					echo "<li><a href='?ziel=entwicklung'>Entwicklung</a></li>";
       			}
				if ($akt == "applikationen")
				{
					echo "<li><span>Applikationen</span></li>";
				}
				else
				{
					echo "<li><a href='?ziel=applikationen'>Applikationen</a></li>";
       			}
			echo "</ul>";
    		echo "</li>";
    	echo "</ul>";
	echo "</li>";
	if ($akt == "management")
	{
		echo "<li><span>Management</span></li>";
	}
	else
	{
		echo "<li><a href='?ziel=management'>Management</a></li>";
    }
	if ($akt == "prospekte")
	{
		echo "<li><span>Prospekte</span></li>";
	}
	else
	{
		echo "<li><a href='?ziel=prospekte'>Prospekte</a></li>";
    }
	if ($akt == "news")
	{
		echo "<li><span>News</span></li>";
	}
	else
	{
		echo "<li><a href='?ziel=news'>News</a></li>";
	}
echo "</ul>";
?>

<script type="text/javascript">
initiate();                // This must be placed immediately after the menu in order to format it properly.
</script>


Das ist das JS dazu:
HTML-Code:
var temp, temp2, cookieArray, cookieArray2, cookieCount;

function initiate(){

  cookieCount=0;

  if(document.cookie){

    cookieArray=document.cookie.split(";");
    cookieArray2=new Array();

    for(i in cookieArray){
      cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
    }

  }

  cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();

  temp=document.getElementById("containerul");

  for(var o=0;o<temp.getElementsByTagName("li").length;o++){

    if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){

      temp2                                = document.createElement("span");
      temp2.className                        = "symbols";
      temp2.style.backgroundImage        = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(minus01.gif)":"url(plus01.gif)"):"url(plus01.gif)";
      temp2.onclick=function(){
        showhide(this.parentNode);
        writeCookie();
      }

      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)

      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";

      if(cookieArray[cookieCount]=="true"){
        showhide(temp.getElementsByTagName("li")[o]);
      }

      cookieCount++;

    }
    else{

      temp2                                = document.createElement("span");
      temp2.className                        = "symbols";
      temp2.style.backgroundImage        = "url(page01.gif)";

      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);

    }

  }

}



function showhide(el){

  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";

  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus01.gif)":"url(plus01.gif)";

}



function writeCookie(){                // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.

  cookieArray=new Array()

  for(var q=0;q<temp.getElementsByTagName("li").length;q++){

    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
      if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){

        cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");

      }
    }

  }

  document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();

}

Schick wäre es nun, wenn vor den einzelnen Links dieses Symbol nicht mehr angezeigt würde. Momentan habe ich die Bilddatei einfach umbenannt, so das es zumindest nicht mehr angezeigt wird.
Wie man aber im Menücode sehen kann, werden ausgewählte Links per <span>-Tag anders dargestellt.

Hier der Auszug aus der css-Datei
HTML-Code:
#containerul li
	{                
		color: #00fff0;
		font-size:12px;
		padding: 3px 3px 3px 20px;   
		display: block;
		text-decoration: none;                        
	}
	
#containerul .symbols
	{             
	 	float:left;
 		width:12px;
  		height:1em;
  		background-position:0 50%;
  		background-repeat:no-repeat;
		text-decoration: none;
	}

#containerul a
	{
		padding-left: 20px;
		color: #232323;
		text-decoration: none;
		background-image: url(../images/pfeil_sw.gif);
		background-repeat: no-repeat;
		background-position: 5px;
		
	}

#containerul a:hover
	{
		
		color: #f00;
		text-decoration: none;
		background-image: url(../images/pfeil_rot.gif);
		background-repeat: no-repeat;
		
	}

#containerul span
	{
		color: #00f;
		text-decoration: none;
		font-size:1.2em;
		border: 1px solid #00f;
		font-weight: bold;
	}
Beim span wird dann, um alle Objekte ein Border gemacht. Ich brauche diesen aber nur um Links. Sprich weder um die Plus und Minus Bildchen, die vom Menü zur Anzeige der evtl. Untermenüs genommen werden, noch um die momentan ausgeblendeten Seitensymbole.

Momentan hab eich Tomaten auf den Augen. Ich habe dann gestern Abend spät aufgegeben und mir gedacht schlaf erstmal drüber, vielleicht sieht du es ja morgen früh. Aber was soll ich sagen, ich seh's immer noch nicht.
Ich bin nicht so der js-Könner, ich vermute hier das Problem, so dass ich micht über konkrete Hilfe von euch freuen würde.


Vielen Dank ! ! !



Gruß

Michael
__________________
Gruß

Michael

Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DIV von feste Position A nach feste Position B verschieben Nordin Apps und PHP Script Gesuche 4 19-04-2009 19:07
PDF Dateien nicht anzeigen sondern "öffnen" / "speichern" Menü anzeigen dreman BRAINSTORMING PHP/SQL/HTML/JS/CSS 7 12-06-2008 15:31
nächsten Mittwoch? Besth PHP Developer Forum 6 03-07-2007 17:18
Menü zum Ausklappen / Dropdown Menü darki777 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 7 23-08-2006 00:22
die nächsten 90 Tage Citral666 PHP Developer Forum 3 01-03-2004 18:06

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 22:40 Uhr.