Seite auch bei abgeschaltetem JS nutzbar

[Hotte]

Hi,

ich habe ein Tutorial gefunden, daß den Weg zu einer Seite mit "Tabbed Content" beschreibt. Habe es auch ganz gut hinbekommen und der Effekt gefällt mir.
Das Ganze wird mit JQuery gesteuert.
Ist nun JS deaktiviert wird nur der Inhalt des ersten DIV's angezeigt und die Navigation lässt sich nicht weiter nutzen. (restliche DIV stehen auf display:none;)
Das ist natürlich nicht gut.

Ich habe dann ein Hinweis hier aus dem Forum umgesetzt und lasse nun je nach Aktivierungsstand eine entsprechende CSS laden.
Also ist JS an, wird die dazugehörige geladen. Ansonsten die in der die DIV's alle angezeigt werden. Das ist dann zwar eine etwas längere Seite, aber man kann den Content ja scrollen.

Damit die Navi nicht tot ist kann ich ja noch Sprungmarken zu den einzelnen DIV's setzen.

Jetzt habe ich aber leider das unschöne Problem, daß die Sprünge natürlich auch bei aktiviertem JS stattfinden und dabei das Ziel am oberen Fensterrand beginnt. Die Navi (horizontal am Seitenanfang) ist also nach oben rausgescrollt.

Gibt es eine Lösung den Ziel DIV in einem Abstand vom oberen Fensterrand anzeigen zu lassen? Habe grade so gar keine Idee...

Gruß Hotte

[Auge]

Hallo

Jetzt habe ich aber leider das unschöne Problem, daß die Sprünge natürlich auch bei aktiviertem JS stattfinden ...

Wie wäre es mit einem banalen return false;, das hier (richtigerweise) jedem jederzeit anempfohlen wird, wenn ein Link auch ein JavaScript-Event auslösen soll?

... und dabei das Ziel am oberen Fensterrand beginnt. Die Navi (horizontal am Seitenanfang) ist also nach oben rausgescrollt.

Gibt es eine Lösung den Ziel DIV in einem Abstand vom oberen Fensterrand anzeigen zu lassen? Habe grade so gar keine Idee...

Soweit ich weiß, nur mit JavaScript. Die Navigation bleibt (bei entsprechender Position auf der Seite) natürlich dennoch außerhalb des Blickfeldes, außer dur arbeitest mit position:fixed; bzw. dem entsprechenden JS-Workaround.

Tschö, Auge

[molily]

return false;, das hier (richtigerweise) jedem jederzeit anempfohlen wird, wenn ein Link auch ein JavaScript-Event auslösen soll?

Jedem jederzeit ist das sicher nicht zu empfehlen. Es gibt natürlich auch JS-Code, die man zusätzlich zur Standardaktion des Links (Anspringen eines Ankers, Öffnen der verlinkten Seite usw.) ausführen will.

Mathias

[Auge]

Hallo

»» return false;, das hier (richtigerweise) jedem jederzeit anempfohlen wird, wenn ein Link auch ein JavaScript-Event auslösen soll?

Jedem jederzeit ist das sicher nicht zu empfehlen. Es gibt natürlich auch JS-Code, die man zusätzlich zur Standardaktion des Links (Anspringen eines Ankers, Öffnen der verlinkten Seite usw.) ausführen will.

Öhhm ja, hast'e natürlich recht. Ich verstand Hotte aber so, dass das Ausführen des Links die *Alternative* zur Ausführung des javaScript-Codes sei. *Dann* (wenn dem so ist) ist return:false; aba richtig.

Tschö, Auge

[Hotte]

So, return:false; nun auch ausprobiert.
Klappt nun wie gewünscht.
Also wenn JS auf ON ist, wird der JQuery Effekt dargestellt und der Klick auf den Navilink erzeugt nicht den Jump auf den Ziel DIV. Der wird mit dem Slideeffect angezeigt.

Ist JS OFF kann die Navi normal genutzt werden und der entsprechende Abschnitt angejumpt werden.

So hatte ich mir das vorgestellt :-)

Danke für eure Anregungen!

Hotte

[molily]

Jetzt habe ich aber leider das unschöne Problem, daß die Sprünge natürlich auch bei aktiviertem JS stattfinden und dabei das Ziel am oberen Fensterrand beginnt. Die Navi (horizontal am Seitenanfang) ist also nach oben rausgescrollt.

Ich nehme mal an, die Links zu den Tabs (<a href="#sektion1"> o.ä.) sind mit click-Handlern versehen.
Diese Funktion beendest du einfach mit return false;, dann wird die Standardaktion unterdrückt und der Browser springt nicht zusätzlich zum Zeigen des Tabs zu dem entsprechenden Element.

Ansonsten scheint mir dein Vorgehen reichlich kompliziert (verschiedene Stylesheets laden...). Kennst du [http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-Wie-man-Tabs-WIRKLICH-zugaenglich-macht.php@title=jQuery Accessible Tabs]?

Gibt es eine Lösung den Ziel DIV in einem Abstand vom oberen Fensterrand anzeigen zu lassen?

So ganz verstehe ich das Problem nicht. Wie wäre es mit einer Beispielseite?

Mathias

[Hotte]

Hi,

erstmal danke für den Hinweis. Bin ja kein "Profi", suche mir halt die Infos so gut es geht zusammen.
Online zum angucken hab ich noch nichts, probiere halt so herum...

Aber als Info.

Im Head steht das JS:

<script type="text/javascript">  
	  $(document).ready(function(){  
		$("a.tab").click(function () {  
			$(".active").removeClass("active");  
			$(this).addClass("active");  
			$(".content").slideUp();  
			var content_show = $(this).attr("title");  
			$("#"+content_show).slideDown();  
		});  
	  });  
</script>

Die Navi:

<ul class="tabs">  
	<li><a href="#" title="content_1" class="tab active">Home</a></li>  
	<li><a href="#" title="content_2" class="tab">Info</a></li>  
	...  
</ul>

Ein DIV

<div id="content_1" class="content">  
... Inhalt ...  
</div>

Habe im Link dann die ID rangehängt, #content_1
Dann geht der Jump...

OK, werde  also mal schauen was ich aus der Quelle so rausziehen kann...

Danke Hotte

[Gunnar Bittersmann]

@@Hotte:

nuqneH

lasse nun je nach Aktivierungsstand eine entsprechende CSS laden.

?? Es sollte EIN Stylesheet sein.

Per JavaScript dem 'html'-Element [PERFORMANCE-BP2] bzw. 'body'-Element [Cheatah] eine Klasse "js" geben und nur bei aktiviertem JavaScript mit Nachfahrenselektor ausblenden: '.js div {display: none}'

Qapla'

[molily]

bei aktiviertem JavaScript mit Nachfahrenselektor ausblenden: '.js div {display: none}'

Statt display:none sollte man zugängliche Versteck-Methoden wie Off-Left verwenden.

Mathias

[Hotte]

Hi,

habe gleich mal den Tip mit der js-Klasse ausprobiert, klappt super!

So, dann nur noch das mit den Sprungmarken hinbekommen... :-)

Thanks