nicht angemeldet
Navigation
1 
Gunnar Bittersmann
1 0 0
Navigation
Hallo! =)
Ich möchte über eine Navigation den Content meiner Seite steuern, der sich auch nur auf dieser einen Seite befinden soll.
Also per Klick sollen quasi alle Elemente (bilder, texte, etc.) der kategorien typography, graphic design, photography, etc... ein- und ausgeblendet werden...
Die Navigation steht bereits:
http://dl.dropbox.com/u/25710505/neu/neu.html
bei click auf "photography" soll z.b. das eulenbild ausgeblendet (display: none, nicht hidden) werden.
Mache ich das über booleans? (Habe diese bereits angelegt, einige haben einen false-wert als default, da sie bei öffnen der seite zunächst ausgeblendet sein sollten)
Wenn ja, wie steuer ich das, über eine function?
wie muss diese eingefügt werden?
Ich freue mich sehr über jede Hilfe!
vielen Dank!
=)
nina
----------------------------------------------------------------------
<html>
<head>
<script language="JavaScript" version="1.4">
typo = new Boolean (true);
graphic = new Boolean (true);
photo = new Boolean (true);
inter = new Boolean (true);
illu = new Boolean (true);
about = new Boolean (true);
contact = new Boolean (false);
impress = new Boolean (false);
blog = new Boolean (false);
function swap(imgId, pId, boolean) {
var p = document.getElementById(pId);
p.className = (p.className == "menu_unselected") ? "menu_selected" : "menu_unselected";
var img = document.getElementById(imgId);
//img.src = (img.src == "buttons/Checkbox_unchecked.jpg") ? "buttons/Checkbox_checked.jpg" : "buttons/Checkbox_unchecked.jpg";
if (p.className == "menu_unselected") {
img.src = "buttons/Checkbox_unchecked.jpg";
boolean = false;
}else{
img.src = "buttons/Checkbox_checked.jpg";
boolean = true;
}
}
</head>
<body>
<header>
<nav>
<ul id="ul_one">
<li>
<div onClick="swap('imgTypo', 'pTypo', 'typo')">
<img id="imgTypo" style="float:left; width:15px; " src="buttons/Checkbox_checked.jpg" width="15" height="15" />
<p id="pTypo" class="menu_selected" style="width: 130px; margin-left: 22px;">typo/editorial</p>
</div>
...
...
...
<img class="Photography" src="images/eulen.jpg" width="278" height="150" />
...
-
@@NinaNeu:
nuqneH
Ich möchte über eine Navigation den Content meiner Seite steuern, der sich auch nur auf dieser einen Seite befinden soll.
Das ist keine gute Idee. Wie soll man sich einen bestimmten Inhalt auf deiner Webseite als Bookmark speichern? Wie soll man anderne einen bestimmten Inhalt auf deiner Webseite empfehlen?
Es ist unsinnig, die Nachteile von Frames mit anderen Techniken nachzubauen. http://forum.de.selfhtml.org/archiv/2010/5/t197975/#m1328534, http://ajaxpatterns.org/Unique_URLs
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Qapla',
danke für die schnelle Nachricht... bookmarken und verlinkungen sind mir eigentlich nicht wichtig, das würde mich nicht stören...
Kannst du mir vielleicht trotzdem einen tipp geben, wie ich das am besten lösen könnte?
danke für die links, werde mir die morgen mal genauer ansehen...
NinaNeu@@NinaNeu:
nuqneH
Ich möchte über eine Navigation den Content meiner Seite steuern, der sich auch nur auf dieser einen Seite befinden soll.
Das ist keine gute Idee. Wie soll man sich einen bestimmten Inhalt auf deiner Webseite als Bookmark speichern? Wie soll man anderne einen bestimmten Inhalt auf deiner Webseite empfehlen?
Es ist unsinnig, die Nachteile von Frames mit anderen Techniken nachzubauen. http://forum.de.selfhtml.org/archiv/2010/5/t197975/#m1328534, http://ajaxpatterns.org/Unique_URLs
Qapla'
-
@@NinaNeu:
nuqneH
Hallo Qapla'
??
bookmarken und verlinkungen sind mir eigentlich nicht wichtig,
Dir vielleict nicht.
das würde mich nicht stören...
Dich vielleict nicht. Aber denkst du auch mal an die Nutzer deiner Seite(n)? Oder für wen machst du die?
Qapla'
PS: Bitte kein TOFU!
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Hallo,
Mache ich das über booleans? (Habe diese bereits angelegt, einige haben einen false-wert als default, da sie bei öffnen der seite zunächst ausgeblendet sein sollten)
Die Boolean-Variablen brauchst du eigentlich nicht, da du über die Klassen menu_unselected/menu_selected bereits herausfindest, ob der Menüpunkt angeschaltet ist.
Davon abgesehen funktioniert das Setzen der Booleans nicht so, wie du dir das vorstellst. Du übergibst einen String mit dem Variablennamen und schreibst dann einen Boolean-Wert in die lokale Funktionsvariable. Das ändert am Wert der globalen Boolean-Variable nichts. Dazu müsstest du
window[boolean] = true/falseschreiben, aber wie gesagt sollte das nicht nötig sein.typo = new Boolean (true);
»new Boolean« ist hier unnötig (der Unterschied ist klein, aber fein), man könnte auch einfach
typo = trueschreiben.Für das Ein- und Ausblenden der zugehörigen Elemente kannst du
document.getElementsByClassName
verwenden. Dazu müssen die Elemente die übergebene Klasse besitzen, z.B. class="typo".Diese Funktion gibt eine Liste mit Elementen zurück, die man mit einer for-Schleife durchlaufen kann und jedes Element ein- oder ausblenden kann.
function swap(imgId, pId, elementClass) { … var displayValue = p.className == "menu_selected" ? 'block' : 'none'; var elements = document.getElementsByClassName(elementClass); // Durchlaufe Liste for (var i = 0, l = elements.length; i < l; i++) { elements[i].style.display = displayValue; } }Aufruf weiterhin mit:
swap('imgTypo', 'pTypo', 'typo');Eine Alternativlösung wäre, die Ein- und Ausblendlogik im CSS zu notieren, sodass du nur eine Klasse beim body-Element ändern hinzufügen oder löschen musst und dann automatisch alle Nachfahrenelemente mit der jeweiligen Klasse gezeigt bzw. versteckt werden.
Mathias
-
Hallo Mathias,
vielen Dank für deine Tips. Ich hab auch schon gedacht es mit document.getElementsByClassName zu lösen, allerdings ist diese Funktion, wie ich es verstanden habe, relativ neu und wird deshalb von vielen älteren Browsern noch nicht interpretiert, oder?...
Die Alternativlösung funktioniert dann aber nur, wenn alle Elemente in einem Container sind, den ich per TagName selektiere? Geplant ist aber, abwechselnd Elemente der verschiedenen Bereiche untereinander zu plazieren...
Momentan habe ich es etwas unschön über eine eigene swapContent()-Funktion gelöst, die bei onClick des jeweiligen Buttons für jedes Element (per id, also hier das bild 'din' und 'michael') aufgerufen wird. (Es werden wohl nie mehr als 5 Elemente pro Kategorie sein)<div onClick="swap('imgTypo', 'pTypo'); swapContent('din'); swapContent('michael');"><p>typo</p><div>
Die funktion:
function swapContent(elementId)
{
var obj = document.getElementById(elementId);
obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
}funktioniert, ist aber sicher etwas unsauber. =)
ein weiteres Problem: um javaScript-Blockern den Zugang zum content zu ermöglichen, setze ich alle Elemente zunächst im css auf 'block', dann aber Einzelne durch die Funktion hideByDefault() im onLoad auf 'none'.
<body onLoad="hideByDefault()">
Kann ich das onLoad auch früher schon starten, wenn ja, wo? im moment sieht man es nämlich kurz, bevor es dann verschwindet...
Vielen Dank!
Gruß,
NinaNeu-
Hi,
ein weiteres Problem: um javaScript-Blockern den Zugang zum content zu ermöglichen, setze ich alle Elemente zunächst im css auf 'block', dann aber Einzelne durch die Funktion hideByDefault() im onLoad auf 'none'.
<body onLoad="hideByDefault()">
Kann ich das onLoad auch früher schon starten, wenn ja, wo? im moment sieht man es nämlich kurz, bevor es dann verschwindet...
Die Funktion "hideByDefault()" schon früher aufzurufen wird keinen Sinn machen, da auf Objekte zugegriffen wird, die erst im body definiert werden.
Das gibt dann JS-Fehler.Andere Möglichkeit:
<head>
<style type="text/css">
.meineKlasse {display:block;}
</style><script type="text/javascript">
document.write('<style type="text/css">');
document.write('.meineKlasse{display:none;}');
document.write('</style>');
</script>
</head><body onload="benoetigteEinblenden();">
...Gruß
-
Ah, super...
das geht natürlich auch...
vielen Dank!-
@@NinaNeu:
nuqneH
Ah, super...
Nein.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
@@peter:
nuqneH
Andere Möglichkeit:
Keine gute. Es ist 2012 und es verwendet noch jemand
document.write()??Wie man’s vernünftig macht, steht im Abschnitt „Javascript mehrstufig zünden“ in [PERFORMANCE-BP2].
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo,
Es ist 2012 und es verwendet noch jemand
document.write()??Warum nicht?
Gruß
peter
-
-
-
-