Ankündigung

Einklappen
Keine Ankündigung bisher.

Kleines Problem mit Menu bzw. dem nachzuladenden Content

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Kleines Problem mit Menu bzw. dem nachzuladenden Content

    Hi Leute,


    ich habe gerade ein kleines Menu geschrieben, welches im Div mit der id content, den jeweiligen Inhalt der Menulinks nachläd. Jedoch habe ich ein kleines Anfängerproblem, clickt man zwei mal auf den Button, wird der Inhalt zwei mal dem Container #content angehangen!

    Ich habe versucht, bei dem jeweiligen Click auf einen Link, den Event via unbind() wieder zu entfernen und so mit den doppelten Content zu verhindern. Jedoch funktioniert dieser Ansatz nicht wirklich, vielleicht habt Ihr ja eine Idee wie ich das realisieren kann?

    Hier mal mein JS..

    Code:
    $(document).ready(function(){
    	
    	// Event jQuery
    	$("#user_menu").find("ul").find("li").bind('mouseenter', SlideOut);
    	$("#user_menu").find("ul").find("li").bind('mouseleave', SlideIn);
    	
    	function SlideOut(evt){
    						
    		$(this).animate({"left": "-=50%" }, 300, function(){
    			$(this).bind('click', loadContent);	
    		}
    	)}
    	
    	function SlideIn(evt){
    		$(this).animate({"left": "+=50%" }, 300, function(){
    			$(this).unbind('click', loadContent);	
    		}
    	)}
    	function loadContent(evt){
    		
    		// die Links im Benutzermenu verfügen über target wert
    		// gibt an welche Ressource geladen werden soll an
    		var link_target = evt.target.target;
    		var data_target = $("#content").find("#user_menu"); // Daten vor #user_menu
    				
    			switch (link_target){
    							
    					case "user_profil":
    						$.get( "page/user_profil.php", function( data ) {
    							data_target.before(data);
    							});
    							
    						console.log("Daten" +build);	
    						break;
    					case "gallery":
    						$.get( "page/gallery.php", function( data ) {
    							data_target.before(data);
    							});
    						break;
    					case "chat":
    						$.get( "page/chat.php", function( data ) {
    							data_target.before(data);
    							});
    						break;
    					case "logout":
    						$.get( "page/logout.php", function( data ) {
    							data_target.before(data);
    							});
    						break;
    							
    			}		
    			// keine Standart Reaktion auf Click
    			if (evt.preventDefault){
    					evt.preventDefault();
    			} else {
    				evt.returnValue = false;
    			}
    	}
    	
    })


  • #2
    wozu das ganze gehampel ? Setz das get-ziel als data-attribut und bau dir einen onclick-mapper.

    Wenn ich das richtig sehe kannst du dein javascript komplett von transitions befreien und nur den onclick-mapper mit jquery bauen -> rest CSS3.
    [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

    Kommentar

    Lädt...
    X