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, 11: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, 14: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 15:06 Uhr)
Mit Zitat antworten
  #3 (permalink)  
Alt 07-09-2009, 07: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 18:07
PDF Dateien nicht anzeigen sondern "öffnen" / "speichern" Menü anzeigen dreman BRAINSTORMING PHP/SQL/HTML/JS/CSS 7 12-06-2008 14:31
nächsten Mittwoch? Besth PHP Developer Forum 6 03-07-2007 16:18
Menü zum Ausklappen / Dropdown Menü darki777 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 7 22-08-2006 23:22
die nächsten 90 Tage Citral666 PHP Developer Forum 3 01-03-2004 17: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

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 12:59 Uhr.