php.de

Zurück   php.de > Webentwicklung > JavaScript, Ajax und mehr

JavaScript, Ajax und mehr dynamisches Scripten und Interaktion auf Clientebene

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 26.11.2010, 10:17  
Neuer Benutzer
 
Registriert seit: 25.11.2010
Beiträge: 6
PHP-Kenntnisse:
Anfänger
Finvaron befindet sich auf einem aufstrebenden Ast
Standard # aus URL entfernen

Ich habe unter anderem eine Akkordeon Navigation die soweit auch ganz gut funktioniert. Zwei Probleme bestehen jedoch. Klicke ich auf einen fährt sich der Inhalt aus, soweit so gut. Problem, die URL bekommt eine unschöne "#" am Ende und ein er scrollt an den Anfang der Site.

Ich weiß das es Scripts gibt, die genau das Unterbinden, bin leider jedoch nicht fündig geworden und hoffe auf Hilfe Eurerseits.

Würde mich freuen wenn evt. einer eine Codeschnipsel bereit hält der mir weiterhilft.

Vielen Dank im Voraus!
Finvaron ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 26.11.2010, 10:26  
Erfahrener Benutzer
 
Benutzerbild von wolf29
 
Registriert seit: 17.03.2010
Beiträge: 1.833
PHP-Kenntnisse:
Fortgeschritten
wolf29 wird schon bald berühmt werdenwolf29 wird schon bald berühmt werden
Standard

Hä? Zeig mal bitte den Code! Sowas taucht ja nicht überraschend aus dem Nichts auf!

Wolf29
__________________
while (!asleep()) sheep++;

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
wolf29 ist offline   Mit Zitat antworten
Alt 26.11.2010, 10:49  
Neuer Benutzer
 
Registriert seit: 25.11.2010
Beiträge: 6
PHP-Kenntnisse:
Anfänger
Finvaron befindet sich auf einem aufstrebenden Ast
Standard

Hallo Wolf,

vielen Dank für dein Interesse.
Ein Bespiel (meine Akkordeon) auf jQuery basierend:

javascript:
Code:
$(document).ready(function(){
    	$("#ak").hide();
    	$("#ak2").hide();
    	$("#ak3").hide();		
    $("a.open-close").click(function () {
      $("#ak").slideToggle();
    });
    $("a.open-close2").click(function () {
      $("#ak2").slideToggle();
    });	
    $("a.open-close3").click(function () {
      $("#ak3").slideToggle();
    });		
});
HTML dazu:
Code:
<div class="nav_right2">

<a class="open-close" href="#">Letzte Kommentare</a>
<div id="ak">
<p>Inhalt kommt hier rein...</p>
</div>

<a class="open-close2" href="#">Neueste Artikel</a>
<div id="ak2">
<p>Inhalt kommt hier rein...</p>
</div>
<a class="open-close3" href="#">Zuf&auml;lliger Artikel</a>
<div id="ak3">
<p>Inhalt kommt hier rein...</p>
</div>
</div>
Hier treten die genannten Effekte auf, also bei Klick eine "#" in der URL und es wird zum Anfang des Browsers gesrollt.

Dann habe ich eine Smoth-Scroll Funktion eingebaut die zufällig Abhilfe geschafft hat, nun aber zu weiteren Problemen führt weil ich auch noch eine JS-Tabnavigation eingebaut habe.
Code:
// Smooth Scroll to Top
$(document).ready(function() {
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 700);
                return false;
            }
        }
    });
});
Damit habe ich aber auch ein Problem da nun bei meiner Tabnavigation nicht die Tabs sich öffnen sondern auch dort eine Scroll-Funktion eingebaut ist, schuld daran ist die Raute (#) bei internen Verweisen.
Hier meine Tab-Navigation:
Code:
$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
Und der dazugehörige HTML-Code:
Code:
<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        test1<!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       test2<!--Content-->
    </div>
</div>
Ich weiß, großes Kuddelmuddel und ich merke mal wieder ich bin lediglich ein Designer und weit weg ein Entwickler zu sein.
Finvaron ist offline   Mit Zitat antworten
Alt 26.11.2010, 11:06  
Erfahrener Benutzer
 
Benutzerbild von wolf29
 
Registriert seit: 17.03.2010
Beiträge: 1.833
PHP-Kenntnisse:
Fortgeschritten
wolf29 wird schon bald berühmt werdenwolf29 wird schon bald berühmt werden
Standard

Ähm, so auf den ersten Blick hast Du auch in deinen Links überall # drin stehen. Und warum wunderst Du Dich dann jetzt, das es drin steht??

Wolf29
__________________
while (!asleep()) sheep++;

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.
wolf29 ist offline   Mit Zitat antworten
Alt 26.11.2010, 11:10  
Moderator¹
 
Registriert seit: 28.03.2010
Beiträge: 7.470
PHP-Kenntnisse:
Fortgeschritten
ChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Finvaron Beitrag anzeigen
Code:
<div class="nav_right2">

<a class="open-close" href="#">Letzte Kommentare</a>
Da kommt's her ...

Informiere dich, wie man beim Reagieren auf den Klick auf ein Element dessen Default-Aktion unterdrückt. (Stichwort: preventDefault)
__________________
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
ChrisB ist offline   Mit Zitat antworten
Alt 26.11.2010, 12:51  
Neuer Benutzer
 
Registriert seit: 25.11.2010
Beiträge: 6
PHP-Kenntnisse:
Anfänger
Finvaron befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für Eure Hilfe, Stichwort "preventDefault" hat definitiv bei der Akkordeon Sache geholfen. Leider funktioniert meine Tab-Navigation solange die Smoth-Scroll-Funktion aktiv ist immer noch nicht. Abhilfe würde schaffen, die Smoth-Scroll-Funktion wirklich nur den konkreten Textankern mitzugeben. Hierzu noch einmal eine Frage:
Code:
$('a[href*=#]').click(function() {
, wie kann ich mehrere Textanker definieren, gibs da irgend ein Trennzeichen das ich z.B. den Anker #top, #bottom, #kommentare etc. direkt anspreche. Nur eine Suboptimale Lösung, würde mir aber erst einmal reichen.

Vielen Dank im Voraus und noch einmal vielen Dank für Vergangenes!

Alternativ wäre auch ne eigene Klasse denkbar, das alle internen Links die diese Klasse haben Smooth scrollen, wahrscheinlich die sinvollere Lösung. Vielleicht kann mir ja einer verraten wie ich diesem smoothscroll einer klasse mitgeben...

/edit3:

aha einfach
Code:
$('a.klasse[href*=#]').click(function() {
Also nochmal danke für Hilfe zur Selbsthilfe!

Geändert von Finvaron (26.11.2010 um 13:22 Uhr).
Finvaron ist offline   Mit Zitat antworten
Alt 26.11.2010, 13:42  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Dieses Vorgehen ist sowieso Unsinn. Menschen ohne eingeschaltetes JS haben keine NAvigationsmöglichkeit auf Deiner site.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 26.11.2010, 13:51  
Neuer Benutzer
 
Registriert seit: 25.11.2010
Beiträge: 6
PHP-Kenntnisse:
Anfänger
Finvaron befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von nikosch Beitrag anzeigen
Dieses Vorgehen ist sowieso Unsinn. Menschen ohne eingeschaltetes JS haben keine NAvigationsmöglichkeit auf Deiner site.
Hast du recht, das dient lediglich zum Einblenden von Zusatzinformationen die sich der User anzeigen kann oder auch nicht.

Aber seien wir mal ehrlich, 3% der Internetuser haben JS ausgeschaltet, das ist durchaus zu vernachlässigen. Im Gegensatz zu den verdammten 30% die noch IE 6 benutzen :/

P.s. Ich bin als SEO tätig, ich setzt JS nicht für wesentliche Inhalte ein aber für zusätzliche Sachen kann man mit ein- und ausblendbaren Sachen oder einer Tab-Navigation tolle Dinge machen.
Finvaron ist offline   Mit Zitat antworten
Alt 26.11.2010, 14:07  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

Da kann man die Inhalte aber genauso gut hinter einem normalen Link auch Leuten ohne JS zur Verfügung stellen. Und eine Navigation würde ich schon als wesentlichen Inhalt bezeichnen.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 26.11.2010, 14:15  
Neuer Benutzer
 
Registriert seit: 25.11.2010
Beiträge: 6
PHP-Kenntnisse:
Anfänger
Finvaron befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von nikosch Beitrag anzeigen
Da kann man die Inhalte aber genauso gut hinter einem normalen Link auch Leuten ohne JS zur Verfügung stellen. Und eine Navigation würde ich schon als wesentlichen Inhalt bezeichnen.
Wie ich eben gerade gesagt habe, es dient bei meinen Seiten lediglich für Elemente wie Bookmarks, FB-Fans, Tweets etc. dies alles als einzelne Elemente z.B. in die Sidebar gepackt wirkt unübersichtlich und somit aus Usibility-Sicht nicht wünschenswert. Meine Navigation ist Standardmäßig eine Liste. Und was man eben nicht mit normalen Links erreicht ist das verhindert des kompletten Reloads der Seite und da macht der Einsatz von JS, Ajax durchaus Sinn.

Ich gebe zu, dass ich vorher in diesem Zusammenhang von Navigation gesprochen habe, was ja auch nicht unpassend ist, denn es sind Navigationselemente.
Finvaron ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine 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
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[Erledigt] Multidimensionales Array filtern/doppeleintrag entfernen reliC PHP Einsteiger 2 06.12.2010 20:51
modrewrite verzeichnis entfernen anna2o Server, Hosting und Workstations 8 26.10.2009 20:13
[Erledigt] Zeilenumbruch nach preg_replace entfernen obi PHP Tipps 2009 4 15.09.2009 23:02
[Erledigt] Schwarzen Hintergrund entfernen erik001 PHP Tipps 2009 10 06.04.2009 14:39
[Erledigt] \ aus einem String entfernen Shadow-Gamer PHP Tipps 2009 2 01.02.2009 17:45
[Erledigt] Whitespaces entfernen Quecksilber PHP Tipps 2008 8 16.11.2008 13:10
Alles html aus einem String entfernen? BartTheDevil89 PHP Tipps 2008 3 08.10.2007 15:12
Gefährlichen Code entfernen Davido PHP Tipps 2006 3 28.08.2006 13:05
Zeichen \n und \r entfernen madSoul PHP Tipps 2006 7 11.08.2006 07:54
Bestimmte Links entfernen duderino PHP Tipps 2006 6 17.06.2006 13:34
FireFox Suchmaschine entfernen Off-Topic Diskussionen 4 08.12.2005 15:49
\ entfernen Stinger PHP Tipps 2005-2 3 10.07.2005 19:35
leere felder entfernen PHP Tipps 2007 14 04.01.2005 10:59
Variable entfernen Adrenochrom PHP Tipps 2005 2 02.01.2005 01:23
Zeichen aus eine, ".txt" File entfernen PHP Tipps 2004 2 28.06.2004 17:37

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
anker aus url entfernen, jquery raute entfernen, raute aus url entfernen, php raute url wegbekommen, raute entfernen jquery, jquery anker entfernen, js raute entfernen, raute aus url entferenn, javascript raute entfernen, raute in url, location.hash raute entfernen, php anker aus url entfernen, a href=\#\ raute entfernen, jqueryanker links reagieren, javascript href anchor remove raute, jquery verlinkung # raute entfernen, javascript anker aus url entfernen, html sprungmarken aus url entfernen, php url raute entfernen, javascript raute scrollen top verhindern

Alle Zeitangaben in WEZ +2. Es ist jetzt 10:15 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum