Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Div ausblenden wenn anderes eingeblendet wird“

garugc

Nicht mehr ganz neu hier

Hi Communtiy,

ich bräuchte nur kurz den Befehl, um einen <div> auszublenden, wenn über onClick ein anderer eingeblendet wird.

hier mein Code:

Code:
<script language="JavaScript" type="text/javascript">
<!--
function einblenden(div) {
  with(document.getElementById(div).style){
    if(display=="none"){
      display="inline";
    }
    else{
      display="none";
    }
  }
}
//-->
</script>
im Body liegen zwei Divs:

Code:
<div id="ebene1" style="display:none;" valign="right">
 hier kommt kontaktbild rein
</div>  
<div id="ebene2" style="display:none;" valign="right">
  hier kommt anfahrtsbild rein
</div>
aktiviert werden sie über:
Code:
<a href="kontaktinfo.html" onClick="einblenden('ebene1');" class="kontakt" target="fensterlein" title= "Kontakt"></a>

<a href="link2.html" onClick="einblenden('ebene2');" class="anfahrt" target="fensterlein" title= "So finden Sie uns"></a>
 

Tim

Hutträger

AW: Div ausblenden wenn anderes eingeblendet wird

Soll es dynamisch bleiben oder reicht eine Lösung genau dafür?
 

Tim

Hutträger

AW: Div ausblenden wenn anderes eingeblendet wird

Also ich kann kein Javascript, aber vom Ansatz her könntest du einfach noch abfragen welchen Wert display bei deinem anderen div hat. Wenn da nicht none steht, setzt du es auf none, ansonsten blendest du einfach das andere ein.
 

garugc

Nicht mehr ganz neu hier

AW: Div ausblenden wenn anderes eingeblendet wird

Ich habs jetzt endlich hinbekommen.. ist etwas umständlich, aber wenigstens funktioniert es.

habe im Head:

Code:
<script type=text/javascript>
function home() {
 if(document.getElementById('home').style.visibility=='hidden') {
  document.getElementById('home').style.visibility='visible';
  document.getElementById('kontakt').style.visibility='hidden';
  document.getElementById('anfahrt').style.visibility='hidden';
  document.getElementById('infos').style.visibility='hidden';
  document.getElementById('linkz').style.visibility='hidden';
  document.getElementById('impressum').style.visibility='hidden';
 }
}
function kontakt() {
 if(document.getElementById('kontakt').style.visibility=='hidden') {
  document.getElementById('home').style.visibility='hidden';
  document.getElementById('kontakt').style.visibility='visible';
  document.getElementById('anfahrt').style.visibility='hidden';
  document.getElementById('infos').style.visibility='hidden';
  document.getElementById('linkz').style.visibility='hidden';
  document.getElementById('impressum').style.visibility='hidden';
 }
}
etc...

und somit wird immer der eine div eingeblendet, die anderen ausgeblendet
 

garugc

Nicht mehr ganz neu hier

AW: Div ausblenden wenn anderes eingeblendet wird

Merci für den Code.

Jetzt isses nur so, dass ich beim Klick auf den Button nicht nur den Div einblenden will (hatte ich vergessen zu erwähnen). Es soll primär im iFrame ein anderes Dokument geöffnet werden, und sekundär ein Div eingeblendet werden. Was müsste ich bei Deinem Lösungsvorschlag denn ändern?
 

garugc

Nicht mehr ganz neu hier

AW: Div ausblenden wenn anderes eingeblendet wird

hatte ich testweise probiert.. hat nicht geklappt. Aber langsam verzweifel ich sowieso an diesen bescheuerten Divs.. ich brauch ne relativ-positionierung um den Div an ner Tabelle auszurichten. Dabei wird aber die Tabelle gesprengt, obwohl der Div ne feste Größe hat, die kleiner ist als der table.

ich werd Deinen Vorschlag gleich nochmal ausprobieren
 

garugc

Nicht mehr ganz neu hier

AW: Div ausblenden wenn anderes eingeblendet wird

EDIT:
@DOcUhu: Hab Deinen Code eingebaut, und jetzt funzt er! Danke!!

ok, für alle, die sich mit CSS auskennen:

ich möchte beim Klick auf einen Link versch. div`s ein- bzw. ausblenden. Wie das geht hab ich bereits hinbekommen. die div`s enthalten Grafiken und sollen pixelgenau platziert werden. Wenn ich position: absolute verwende, verschiebt sich die Grafik je nach Browsergröße. Also hab ich relative eingesetzt. Hie bleibt die Grafik zwar an ihrem Platz, aber dafür sprengt sie die Tabelle..
kann mir da jemand helfen?

Hier der Code:

Code:
<table cellspacing="0" cellpadding="0" width="1017" height="619" align="center">
  <tr>
 <td colspan="3" width="1017" height="124" style="background-image: url('images/head.gif'); background-repeat: no-repeat; background-position: 0px 0px;">
<div id="kontakt" style="visibility:hidden; position:relative; top:8px; left:977px;">
  <img src="http://www.psd-tutorials.de/modules/Forum/images/kontakt_bild.gif" border="0" height="124" width="250" alt="Kontakt" />
</div>
<div id="anfahrt" style="visibility: hidden;">
  hier kommt anfahrt rein
</div>
      </td>
 </tr>
Dies ist nur der Head der HP. Und dieser wird vom unteren Teil der Homepage abgetrennt. Die betroffene Grafik ist die rechte obere Kante. Es hat auch definitiv was mit der Grafik zu tun.. wenn nur Text drin ist, geht`s. Die Testhomepage findet Ihr hier:


ich bin wenigstens froh, dass im IE und im Firefox die Position ohne Hack identisch ist (warum auch immer).
 
Zuletzt bearbeitet:

garugc

Nicht mehr ganz neu hier

AW: Div ausblenden wenn anderes eingeblendet wird

ich habs hinbekommen..
wenn es jemanden interessiert, kann er nachfragen. Hab jetzt nur nach 6 Stunden Gebastel nimmer den Nerv es zu erklären :)
 

jackprince

xHTML & CSS Junkie

AW: Div ausblenden wenn anderes eingeblendet wird

EDIT:
ok, für alle, die sich mit CSS auskennen:

ich möchte beim Klick auf einen Link versch. div`s ein- bzw. ausblenden. Wie das geht hab ich bereits hinbekommen. die div`s enthalten Grafiken und sollen pixelgenau platziert werden. Wenn ich position: absolute verwende, verschiebt sich die Grafik je nach Browsergröße. Also hab ich relative eingesetzt. Hie bleibt die Grafik zwar an ihrem Platz, aber dafür sprengt sie die Tabelle..
kann mir da jemand helfen?

Hier der Code:

Code:
...
 <td colspan="3" width="1017" height="124" style="background-image: url('images/head.gif'); background-repeat: no-repeat; background-position: 0px 0px;">
<div id="kontakt" style="visibility:hidden; position:relative; top:8px; left:977px;">
  <img src="http://www.psd-tutorials.de/modules/Forum/images/kontakt_bild.gif" border="0" height="124" width="250" alt="Kontakt" />
</div>
...
  • Also die Zelle ist 1017px Breit !? (800x600/1024x768 !?)
  • darin ist ein Bild was 250pixel breit ist und sich in einem div befinden
  • nix weiter definiert also kuschelt der rand des divs mit dem rand des bildes
  • das div beginnt relativ zu beginn der zelle ... vertikal bei 8pixeln und horizontal bei 977pixel
  • (zelle)1017 - 977(abstand nach links, also platz der nicht genutzt wird) = 40 (pixel noch platz)
  • div ist aufgrund des inhalts 250pixel breit
  • 250(benötigt) - 40(vorhanden) = 210(differenz)
Kurz gesagt ich würde vermuten das dein div genau um 210pixel die Tabelle gesprengt hat. Hab das jetzt nicht überprüft, aber so würde ich das mal vermuten.

Mal ne Frage warum der aufbau?

HTML:
...
<td>
 <div style="hier die style angaben mit rand nach link usw."> 
   <img />
 </div>
</td>
...

Warum nicht?
HTML:
...
<td>
   <img style="hier die style angaben mit rand, größe usw." />
</td>
...

Nicht böse gemeint aber man hat kein "div" layout wenn man
divs in tabellen setzt. An der Stelle ist das div recht Sinnbefreit.

Würde sogar behaupten wollen das es keinen guten Grund gibt,
Divisions (div, Bereiche) in Tabellenzellen zu setzen.
Da Tabellenzellen vom Sinn her nur ganz spezifische Tabelarische
Daten enthalten sollten. Und einen ganze Bereich (Divison) halte ich
für sehr unspezifisch. ^_^
 

garugc

Nicht mehr ganz neu hier

AW: Div ausblenden wenn anderes eingeblendet wird

klingt alles logisch. Werd später nochmal drüber gucken und testen.
Zunächst mal merci für die Kritik!

Ich hatte divs verwendet, weil ich etwas brauchte, das ein- bzw. ausgeblendet werden soll. aber mittlerweile hab ich`s gepeilt bekommen, dass man dem img auch ne id zuweisen kann und somit ausblenden kann.
 

jackprince

xHTML & CSS Junkie

AW: Div ausblenden wenn anderes eingeblendet wird

Ich hatte divs verwendet, weil ich etwas brauchte, das ein- bzw. ausgeblendet werden soll. aber mittlerweile hab ich`s gepeilt bekommen, dass man dem img auch ne id zuweisen kann und somit ausblenden kann.

[humor on]
Die kleinen Racker werde so schnell groß =)
Ich seh es schon vor mir ... nicht all zu lang
und er kann allein "floaten" und macht keine
layout bilder mehr ins markup sondern brav
in die css datei.

*wie eine liebende mutter wein*
[humor off]

... was ich sagen möchte man lernt immer dazu
und gewinnt an wissen. Mit der zeit sucht man
dann von allein elegante und valid Lösungen ...

nicht böse sein wenn ich ab und an mal etwas
Ironie walten lasse ... aber andes machts manchmal
keinen spaß *g*
 

jackprince

xHTML & CSS Junkie

AW: Div ausblenden wenn anderes eingeblendet wird

Servus ...
da ich für ein Website ebenfalls einen solchen Effekt
benötig(t)e hab ich bis eben gebastelt.

Ist nicht ganz das gleiche wie das vom Thread Ersteller benötigte,
aber vielleicht hat ja trotzdem wer Verwendung dafür.

Das ganze ist eine simple HTML Datei in der der JavaScript-code und
das Css direkt enthalten sind.

Der Code ist nicht optimiert (also von unnötigen tags und/oder
IDs/Klassen bereinigt).

Ein Bild sagt mehr als Tausend Worte ...



:)

Beim "hover" über eines der tabs wird der Inhalt des selbigen angezeigt.
Jedoch wird wieder der zuletzt aktivierte Tab angezeigt wenn kein
anderer Tab ausgewählt (angeklickt) wird/wurde.

(Inhalte sind reine Platzhalter)

Optisch natürlich noch nicht "state of the art". Aber das ist im
Endeffekt CSS fein tuning. Wichtig ist ... es funktioniert.

Die Hintergrundbilder für die Tabs.
(Abspeichern mit den angegebenen Namen)

hbbg.gif (nur 1px breit, aber auffindbar) --> <--
hblb.gif --> <--
hbrb.gif --> <--

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>littleBoxSwitch example</title>
<script language="JavaScript" type="text/javascript">
<!--
sdiv='box1'; //Startcontent festlegen
sspan='tab1';
function clickshow(div)
         {         
         var obj=document.getElementById(div);
         var sobj=document.getElementById(sdiv);
         sobj.style.display="none";
         obj.style.display="block";
         sdiv=div;
}
function hovershow(div)
         {
         var obj=document.getElementById(div);
         var sobj=document.getElementById(sdiv);
         sobj.style.display="none";
         obj.style.display="block";
}
function hoverhide(div)
         {
         var obj=document.getElementById(div);
         var sobj=document.getElementById(sdiv);
         obj.style.display="none";
         sobj.style.display="block";
}
function clickspan(span)
         {         
         var tab=document.getElementById(span);
         var stab=document.getElementById(sspan);
         stab.className="unselected";
         tab.className="selected";
         sspan=span;
}

//-->
</script>
<style type="text/css">
<!--
* {margin: 0px; padding: 0px;}
body {
    padding: 20px;
}
#head_box {border: 0; width: 220px; height: 80px; font-family:Verdana, Arial, Helvetica, sans-serif;}
#head_box legend {padding-left: 10px; padding-right: 10px;}
#head_box legend span {display: block; height: 14px; font-size: 10px;}
#head_box legend span span {padding:0px; float:left; display: block; background-image:url(hbbg.gif); background-repeat:repeat-x;}
#head_box legend span span .lb {width: 4px; height: 14px; background-image:url(hblb.gif); background-repeat: no-repeat;}
#head_box legend span span .rb {width: 4px; height: 14px; background-image:url(hbrb.gif); background-repeat: no-repeat;}
#head_box #box2 label {font-size: 10px;}
.unselected {
    font-weight:400;
}
.selected {
    font-weight:700;
    border-bottom: 1px solid #CCCCCC;
    background-color: #CCCCCC;
    }
.head_box_content {
    margin-top: -1px;
    border: 1px solid grey;
    background-color: #CCCCCC;
    height: 60px;
    padding: 5px;
}

-->
</style>
</head>
<body>
<fieldset id="head_box">
<legend><span>
<span id="tab1" class="selected" onclick="clickshow('box1'); clickspan('tab1');" onmouseover="hovershow('box1')" onmouseout="hoverhide('box1')"><span class="lb">&nbsp;</span><span>Search</span><span class="rb">&nbsp;</span></span>
<span id="tab2" class="unselected" onclick="clickshow('box2'); clickspan('tab2');" onmouseover="hovershow('box2')" onmouseout="hoverhide('box2')"><span class="lb">&nbsp;</span><span>Login</span><span class="rb">&nbsp;</span></span>
<span id="tab3" class="unselected" onclick="clickshow('box3'); clickspan('tab3');" onmouseover="hovershow('box3')" onmouseout="hoverhide('box3')"><span class="lb">&nbsp;</span><span>Links</span><span class="rb">&nbsp;</span></span>
<span id="tab4" class="unselected" onclick="clickshow('box4'); clickspan('tab4');" onmouseover="hovershow('box4')" onmouseout="hoverhide('box4')"><span class="lb">&nbsp;</span><span>Stuff ...</span><span class="rb">&nbsp;</span></span>
</span></legend>
<div id="box1" class="head_box_content" style="display:block;">
    <form id="head_search" action="Untitled-1.html">
    <label style="display: block;">Search</label><input id="head_box_searchfield" type="text" />
    <input type="submit" value="Go" />
    </form>
</div>
<div id="box2" class="head_box_content" style="display:none;">
     <form id="head_login" action="Untitled-1.html">
    <label style="display: block;">User</label><input id="head_box_loginuser" type="text" />
    <label style="display: block;">Passwort</label><input id="head_box_loginpw" type="text" />
    <input type="submit" value="Go" />
    </form>
</div>
<div id="box3" class="head_box_content" style="display:none;">your links here</div>
<div id="box4" class="head_box_content" style="display:none;">random stuff</div>
</fieldset></body>
</html>
In diesem Sinne, raus mit eurer Kritik und/oder Vorschlägen.

Edith sagt: Hab die CSS Definitionen noch nicht auf den IE abgestimmt. Kommt noch ...
 
Zuletzt bearbeitet:

Lethian

Kaffeetrinker

AW: Div ausblenden wenn anderes eingeblendet wird

Servus jackprince,

ich war einfach mal so frech und habe deine css etwas erweitert.

#head_box { - bekommt noch ein - cursor:pointer;
.selected { - bekommt noch - border: 1px solid grey; vor dem border-bottom!

und die .head_box_content sieht so aus:
.head_box_content {
margin-top: 1px;
border: 1px solid grey;
background-color: #CCCCCC;
height: 70px;
padding: 5px;
}

für den ie7 bekommt die .head_box_content { margin-top: -1px; ergo bleibt gleich...

Hoffe du gehst mit den Änderungen konform :)
Grüße Lethian

PS: Hab's nur für FF und IE 7 geändert.

--------------------------------------------------------------------------
Edit: Sry, hab deine grafiken garnicht beachtet. bleibt also nur noch der part:
#head_box { - bekommt noch ein - cursor:pointer;

es sei denn möglicher Benutzer möchte die klassische Variante ohne abgerundete Ecken haben, dann Grafiken raus und Änderungen rein.
 
Zuletzt bearbeitet:

jackprince

xHTML & CSS Junkie

AW: Div ausblenden wenn anderes eingeblendet wird

#head_box { - bekommt noch ein - cursor:pointer;
Etwas spezifischer und wir haben nen deal ;)
HTML:
#head_box legend span {display: block; height: 14px; font-size: 10px; cursor:pointer;}
.selected { - bekommt noch - border: 1px solid grey; vor dem border-bottom!
Eigentlich nicht ... Die border-bottom ist in dem fall um den farblichen Übergang der box zum inhalt
zu bekommen. Würde ich den vorgeschlagenen border einfügen, würde der Effekt mit den
runden Ecken der tabs verschwinden. (falls es probleme mit den bildern gibt, da sieht man abgerundete ecken bei den tabs.)

und die .head_box_content sieht so aus:
.head_box_content {
margin-top: 1px;
border: 1px solid grey;
background-color: #CCCCCC;
height: 70px;
padding: 5px;
}

fasst ...

HTML:
und die .head_box_content sieht so aus:
.head_box_content {  
    margin-top: 1px;
    border: 1px solid grey;
    background-color: #CCCCCC;
    height: 60px;
   *height: 70px;
    padding: 5px;
}

ich brauche die 60px für den FF da ich sonst über
eine gesamthöhe von 90px komme. Aber ja die änderung
ist an sich richtig für den IE um die gleiche höhe zu erreichen.
Aber eben mit vorrangestelltem "*"

Im Endeffekt fast identisch zu den Änderungen die ich mittlerweile
integriert habe.

Derzeit überleg ich nur noch wie ich möglichst ohne noch all zu
viel Boxen hinzufügen zu müssen einen von den ausmassen her variablen Hintergrund in die Box bekomme.

Derzeit ist das ganze ja auf meine Anforderungen angepasst.
Und da darf es nicht größer als hier gecoded.
Aber wenn man es schon zu Verfügung stellt.
Sollte es auch ein möglichst vielseitig einsetzbares "Produkt" sein.

Für Vorschläge bin ich offen.

Auch wenn ich deine Änderungen doch wieder etwas zerrupft hab, bzw.
sie abgeändert hab, danke für die Gedanken dazu.

Solltest du weitere Vorschläge haben, oder auf einer Änderung
aus einem bestimmten Grund beharren wollen, so würde ich mich freuen
davon zu lesen. Man lernt ja nie aus und vielleicht hab ich etwas übersehen.

gruß,

jack
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.853
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben