|
||||
DIV "einklappen" [aus dem CSS-Thread]
Hallo,
da mein Vorhaben allein mit CSS nicht umsetzbar ist, "verlagere" ich meine Frage in den JS-Thread. Ich möchte ein Div neben dem Content-DIV quasi "einklappbar" machen. Das Div, wo nur Bilder (evtl. mit Untertitel) drin vorkommen sollen, soll bei Bedarf "ausgeblendet" werden können, so dass sich der Benutzer nur auf den den Content selbst konzentrieren kann. Wie setzt man solch ein Vorhaben am besten (CSS/JS) um? normaler Aufbau: Aufbau mit "Einklappbuttonbereich": Aufbau mit eingeklappten Image-Bereich:
__________________
"Glück entsteht oft durch Aufmerksamkeit in kleinen Dingen." - Wilhelm Busch Geändert von SPMan (17.05.2007 um 00:07 Uhr) |
Sponsored Links |
Sponsored Links |
|
||||
schöner fänd ichs ja wenn der Balken zum ein und ausklappen immer mitgehen würde...sodass er immer links steht und nicht wie jetzt uasen am rand sonsern immer am linken rand des Conent divs...
__________________
Meine Spielwiese: http://blog.kanedo.net Ich bei Flickr? Da: Flickr: Fotostream von kanedo-projekt Für open Source Liebhaber: open Com Auch ich Zwitschere als @kanedo |
|
||||
Zitat:
Vielleicht wäre es ja machbar einen kleinen Verlauf in den "Klickbereich" als zu integrieren, anstatt einer durchgehenden Farbe, der je nach Zustand seine "Richtung" ändert. Ob das möglich ist, zumindest mit der Richtungsänderung, weiß ich nicht. Wenn man den Aufbau in dem Vorschlag aber genau betrachtet, ist dieser leider noch nicht ganz konform zu dem Aufbau wie ich ihn mir vorstelle.
__________________
"Glück entsteht oft durch Aufmerksamkeit in kleinen Dingen." - Wilhelm Busch Geändert von SPMan (19.05.2007 um 01:07 Uhr) |
|
||||
Ich habe jetzt versucht das nötige JavaScript in meinem Aufbau zu implementieren. Hierbei habe ich die Zustände, die sich ändern, in die jeweilige Funktion eingebaut:
Code:
function hideIt() { document.getElementById("container").style.background-image="url(./fcback2.gif)"; document.getElementById("image").style.display="none"; document.getElementById("image").style.width="220px"; document.getElementById("steel").style.float="left"; document.getElementById("steel").style.width="11px"; document.getElementById("hide").onclick = showIt; } function showIt() { document.getElementById("container").style.background-image="url(./fcback3.gif)"; document.getElementById("image").style.display="block"; document.getElementById("image").style.width="210px"; document.getElementById("steel").style.float="right"; document.getElementById("steel").style.width="10px"; document.getElementById("hide").onclick = hideIt; } Zitat:
Was muss geändert werden, damit es funktioniert? Des Weiteren sehe ich das Problem in dem Steel-Div, da dieses praktisch keine Höhe hat, es aber auf der gesamten Höhe der Seite - wo es scheinbar sichtbar ist- , anklickbar sein soll. Dieses Problem habe ich versucht in diesem Thread genauer zu verdeutlichen.
__________________
"Glück entsteht oft durch Aufmerksamkeit in kleinen Dingen." - Wilhelm Busch |
|
|||
Die Eigenschaften des DOM-Objekts style werden nicht genau wie die CSS-Eigenschaften geschrieben: DOM CSS Properties List
|
|
||||
Zitat:
Ich habe die Funktionen jetzt überarbeitet: Code:
<script type='text/javascript'> function hideIt() { document.getElementById("container").style.backgroundImage="url(./fcback2.gif)"; document.getElementById("image").style.display="none"; document.getElementById("text").style.width="712px"; document.getElementById("steel").style.float="left"; document.getElementById("steel").style.width="11px"; document.getElementById("hide").onclick = showIt; } function showIt() { document.getElementById("container").style.backgroundImage="url(./fcback3.gif)"; document.getElementById("image").style.display="block"; document.getElementById("image").style.width="210px"; document.getElementById("text").style.width="495px"; document.getElementById("steel").style.float="right"; document.getElementById("steel").style.width="10px"; document.getElementById("hide").onclick = hideIt; } </script> Es funktioniert jetzt, dass das Div verschwindet, aber das "Erscheinen" funktioniert nicht. Firefox zeigt folgenden Fehler an: Zitat:
Zudem besteht das Problem, dass ich für das Steel-Div die ID aus dem StyleSheet und hinzukommend die ID aus dem JavaScript habe. Ein Div darf aber meines wissens nicht 2 IDs bekommen. Wie kann ich diese Misere lösen? (denn ich brauche ja beide IDs)
__________________
"Glück entsteht oft durch Aufmerksamkeit in kleinen Dingen." - Wilhelm Busch Geändert von SPMan (03.06.2007 um 20:54 Uhr) |
|
|||
Ein Element kann nur eine ID haben (Element identifiers: the id and class attributes).
Ersetz doch einfach das „hide“ durch ein „steel“. Außerdem ist es glaub ich performanter, getElementById() nur einmal aufzurufen: Code:
function hideIt() { document.getElementById("container").style.backgroundImage="url(./fcback2.gif)"; document.getElementById("image").style.display="none"; document.getElementById("text").style.width="712px"; var steelElement = document.getElementById("steel"); steelElement.style.float="left"; steelElement.style.width="11px"; steelElement.onclick = showIt; } |
|
||||
Vielen Dank für die Hilfe!
Ich habe den Code jetzt angepasst: Code:
<script type='text/javascript'> function hideIt() { document.getElementById("container").style.backgroundImage="url(./fcback2.gif)"; document.getElementById("image").style.display="none"; document.getElementById("text").style.width="712px"; var steelElement = document.getElementById("steel"); steelElement.style.float="left"; steelElement.style.width="11px"; steelElement.onclick = showIt; } function showIt() { document.getElementById("container").style.backgroundImage="url(./fcback3.gif)"; document.getElementById("image").style.display="block"; document.getElementById("text").style.width="495px"; document.getElementById("steel").style.float="right"; document.getElementById("steel").style.width="10px"; document.getElementById("hide").onclick = hideIt; } </script> Es scheint so, als ob das Ganze nur einmal ausführbar ist, sprich "wegklicken/herklicken" und Schluss. Der Fehler im FireFox taucht noch immer auf: Zitat:
Ist es evtl. ratsam die "Schmuckgrafiken" in einem Array vorzuladen? Das Problem mit der Hohe des Stahl-Divs besteht leider auch noch.
__________________
"Glück entsteht oft durch Aufmerksamkeit in kleinen Dingen." - Wilhelm Busch |
Sponsored Links |
|
|||
Du musst die showIt()-Funktion natürlich entsprechend anpassen. Da steht ja noch „hide“ als ID drin.
Der Mauszeiger lässt sich per CSS festlegen: Code:
#steel { cursor: pointer; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Jquery Load Div Problem / Css Style wird nicht erkannt | mastaa | Javascript & Ajax | 5 | 16.03.2011 18:50 |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Css Div Boxen relativ untereinander ausrichten | heinbloed | CSS | 1 | 24.01.2011 00:06 |
joomla template entschlüsseln | nieselfriem | CSS | 2 | 18.03.2008 14:12 |
Div + css in jedem Browser anders | Skittles | CSS | 5 | 29.06.2004 23:59 |