zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden DIV "einklappen" [aus dem CSS-Thread]

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.05.2007, 17:06
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Frage 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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.05.2007, 09:25
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard

Leider habe ich hier bis heute keinen Vorschlag bekommen, weswegen ich meine Frage in einem JavaScript-Fachforum noch einmal zur Disposition gestellt habe.

Hier kam folgende Lösung, die auch gut zu funktieren scheint. Wie findet ihr Sie?

Code:
<html><head>
<script type='text/javascript'>
function hideIt()
{
 document.getElementById("imgDiv").style.display="none";
 document.getElementById("content").style.width="98%";
 document.getElementById("hide").onclick = showIt;
}
function showIt()
{
 document.getElementById("content").style.width="70%";
 document.getElementById("imgDiv").style.display="block";
 document.getElementById("hide").onclick = hideIt;
}
</script>
<body>
<div id='outer' style='width:600px;border:2px dashed red;float:left;'>
 <div id='content' style='border:1px solid green;width:69%;float:left;'>
  Hier ist Content der sehr lang sein kann... Dann kommt hier zum Bsp. noch mehr Text!<br>
  Hier ist Content der sehr lang sein kann...<br>
  Hier ist Content der sehr lang sein kann...<br>
  Hier ist Content der sehr lang sein kann...<br>
  Hier ist Content der sehr lang sein kann...<br>
  Hier ist Content der sehr lang sein kann...<br>
 </div>
 <div id='imgDiv' style='width:25%;border:1px solid blue;float:left;margin-right:15px;'>
  <img src='./img/something.jpg' width='50' height='100' style='border:1px solid yellow;float:left;'>
 </div>
 <div id='hide' onclick='hideIt();' style='height:100px;width:5px;background-color:#00CCFF;float:right;'></div>
 </div>
</div>
</body>
</html>
__________________
"Glück entsteht oft durch Aufmerksamkeit in kleinen Dingen."
- Wilhelm Busch
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.05.2007, 18:42
Benutzerbild von kampfgnom
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 22.11.2006
Ort: Radebeul
Beiträge: 1.808
kampfgnom befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 18.05.2007, 18:53
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard

Zitat:
Zitat von kampfgnom Beitrag anzeigen
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...
Ich dachte rechts wäre es komfortabler, da man dort evtl. nicht "aus versehen" draufklickt.
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)
Mit Zitat antworten
  #5 (permalink)  
Alt 03.06.2007, 19:14
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard

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;
 }
Allerdings zeigt mir der Firefox folgende Fehlermeldung:
Zitat:
invalid assignment left-hand side (line 14)
Die Seite, nebst eingebauten Script, ist hier einzusehen.

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
Mit Zitat antworten
  #6 (permalink)  
Alt 03.06.2007, 19:31
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.03.2007
Beiträge: 178
Thorben befindet sich auf einem aufstrebenden Ast
Standard

Die Eigenschaften des DOM-Objekts style werden nicht genau wie die CSS-Eigenschaften geschrieben: DOM CSS Properties List
Mit Zitat antworten
  #7 (permalink)  
Alt 03.06.2007, 20:48
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard

Zitat:
Zitat von Thorben Beitrag anzeigen
Die Eigenschaften des DOM-Objekts style werden nicht genau wie die CSS-Eigenschaften geschrieben: DOM CSS Properties List
Danke für den Hinweis!
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>
Um die Funktion zu testen, habe ich dem "Steel-Div" eine geste Größe mitgegeben, was o.g. Problem aber nicht löst.

Es funktioniert jetzt, dass das Div verschwindet, aber das "Erscheinen" funktioniert nicht. Firefox zeigt folgenden Fehler an:

Zitat:
document.getElementById("hide") has no properties (Line 19)

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)
Mit Zitat antworten
  #8 (permalink)  
Alt 03.06.2007, 21:11
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.03.2007
Beiträge: 178
Thorben befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
  #9 (permalink)  
Alt 03.06.2007, 21:32
Benutzerbild von SPMan
The Oncoming Storm
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 23.05.2004
Ort: Metropolis
Beiträge: 1.243
SPMan wird schon bald berühmt werden
Standard

Zitat:
Zitat von Thorben Beitrag anzeigen
[...]
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>
LINK

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:
document.getElementById("hide") has no properties
showIt()
Ist es zudem möglich einen "Mauszeiger" über dem Stahl-Div erscheinen zu lassen, damit der Nutzer überhaupt merkt, dass etwas "anklickbar" ist.
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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.06.2007, 21:40
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.03.2007
Beiträge: 178
Thorben befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Zitat:
Zitat von SPMan Beitrag anzeigen
Ist es evtl. ratsam die "Schmuckgrafiken" in einem Array vorzuladen?
Ich denke nicht, nein. Die Dateien sind ja nicht so groß; außerdem müsste das dazugehörige JavaScript ja auch erst geladen werden.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

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


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:53 Uhr.