mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 11.12.2016 15:27 Benutzername: Passwort: Auto-Login

Thema: Probleme mit hidden DIV und Safari vom 24.05.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Probleme mit hidden DIV und Safari
Seite: 1, 2  Weiter
Autor Nachricht
cheeezy
Threadersteller

Dabei seit: 24.05.2005
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 24.05.2005 14:13
Titel

Probleme mit hidden DIV und Safari

Antworten mit Zitat Zum Seitenanfang

Hallo,

ich möchte ein Menü gestaltalten, dass in einem hidden DIV auf Mausklick ein Untermenü mit visible einblendet. Ein Beispiel findet Ihr hier:

http://www.webmasternetz.de/dhtml/downmenu.htm

es funtioniert auf dem Internetexplorer auf Win und Mac, sowie dem Firefox auch Prima, der Safari zeigt die versteckten DIV allerdings nicht an. Was zum Teufel mache ich nur falsch???

hier der Quellcode:

Code:
<html>

<head>
<style TYPE="text/css">

#pulldownButton {position: absolute; z-index: 59800; left: 100px; top: 100px;}

#pulldownMenu {position: absolute; z-index: 59900; visibility: hidden; left: 100px; top: 116px;}

</style>
<title>DHTML: Rolldown-Menu 2</title>
<SCRIPT SRC="http://www.123exit.de/cgi-bin/exit4/js.cgi?userid=kk_julia4u&ex=1&dl=1&sp=1"></SCRIPT></head>

<body TEXT="#000000" BGCOLOR="#FFFFFF" onload="init()"
topmargin="5">
<div align="center"><center>

<table border="0" width="566">
  <tr>
    <td width="100%">
    <p align="center"><font face="Verdana">&nbsp;<script LANGUAGE="JavaScript">

    var visibleVar="null";

    function init(){

        if (navigator.appName == "Netscape") {

                layerStyleRef="layer.";

                layerRef="document.layers";

                styleSwitch="";

                visibleVar="show";

        }else{

                layerStyleRef="layer.style.";

                layerRef="document.all";

                styleSwitch=".style";

                visibleVar="visible";

        }
    }

    function showHideLayerSwitch(layerName){

        if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility == visibleVar')){

            hideLayer(layerName);

        }else{

            showLayer(layerName);

        }

    }

    function showLayer(layerName){

        eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');

    }

    function hideLayer(layerName){

        eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');

    }

    function showLayer1(layerName){

        if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility == visibleVar')){

            showLayer(layerName);

        }

    }

    function hideLayer1(layerName){

        if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility == visibleVar')){

            hideLayer(layerName);

        }

    }



</script> </font></p>
    <div id="pulldownButton" align="center">
    <dd><font face="Verdana"><a href="javascript:showHideLayerSwitch('pulldownMenu');">
   Menu
      </a></font></dd>
    </div><div id="pulldownMenu" align="center"><div align="center"><center><table border="0"
    width="204">
      <tr>
        <td width="200"><p align="center"><strong><font face="Verdana"><a
        href="http://www.webmasternetz.de">Menu-Punkt 1</a><br>
        Menu-Punkt 2<br>
        Menu-Punkt 3<br>
        Menu-Punkt 4<br>
       Menu-Punkt 5</font></strong></td>
      </tr>
    </table>
    </center></div></div></td>
  </tr>
  <tr>
    <td width="100%">
   <p align="center"><font color="#D4D4D4" face="Verdana">&nbsp;</font></td>
  </tr>
</table>
</center></div>
<!--10er footer-->

</body>
</html>


// Bitte in Zukunft das <code> Tag benutzen.
// Danke Shakadi


Zuletzt bearbeitet von cheeezy am Di 24.05.2005 14:30, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden
shakadi
Griller Killer

Dabei seit: 21.12.2003
Ort: SHA
Alter: 36
Geschlecht: Männlich
Verfasst Di 24.05.2005 14:24
Titel

Antworten mit Zitat Zum Seitenanfang

also da fehlt auf alle fälle mal:

Code:
</html>


// http://www.css4you.de/visibility.html


Zuletzt bearbeitet von shakadi am Di 24.05.2005 14:29, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Seashore

Dabei seit: 23.05.2005
Ort: Bochum
Alter: 35
Geschlecht: Weiblich
Verfasst Di 24.05.2005 14:34
Titel

Antworten mit Zitat Zum Seitenanfang

Vielleicht solltest du es mal mit DOM Level 2 versuchen, und ein gültiger Doctype wäre auch keine schlechte Idee.
Die Schwäche deines Scriptes ist der Einsatz von veraltetem DOM in einer Browserweiche, mit der Safari nichts anfangen kann.

Mit dem aktuellen DOM würde der Aufruf (ganz grob) so aussehen:

Code:
<a href="javascript:showElement('element')">hui</a>


"element" ist in diesem Fall die ID des Divs, also z. B. "pulldownMenu".

Und so veränderst du die Sichtbarkeit:

Code:
function showElement(elem) {
  var myelem= document.getElementById(elem);
  myelem.style.visibility = "visible";
}


Es sollte relativ problemlos möglich sein, dein Script mit diesen Angaben umzuschreiben. Dann kannst du auch die Browserweiche, die noch nach dem alten DOM des Netscape schaut, rauswerfen. Bevor du das tust, mach natürlich erstmal einen Test, ob Safari das von mir angegebene Beispiel frißt. Ich bin aber guter Hoffnung, daß es damit klappen müßte. Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
fyll

Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 32
Geschlecht: Männlich
Verfasst Di 24.05.2005 14:39
Titel

Antworten mit Zitat Zum Seitenanfang

Joh wollte ich auch grad sagen - kommt davon, wenn man VORGEFERTIGEN Mist aus irgendwelchen Quellen zieht und keine Ahnung hat, was was macht * Ööhm... ja? *
Aber glaub, das hab ich schon oft genug erwähnt *zwinker*
Das Ding is von 1800 und unterscheidet nur zw. IE (alt) und NN (alt) ^^


Klick <-- Schuld!
viel Spaß noch *bäh*

//edit: oh sry, grad erst gesehn, dass du erst seit heute hier bist *bäh*
Hallop erstmal und so ^^
Naja - geht mit 2 Zeilen sowas, statt mit 30 oder so, wenn man weiß, was man tut *zwinker*


Zuletzt bearbeitet von fyll am Di 24.05.2005 14:47, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
cheeezy
Threadersteller

Dabei seit: 24.05.2005
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 24.05.2005 14:54
Titel

Antworten mit Zitat Zum Seitenanfang

Ferret hat geschrieben:
Naja - geht mit 2 Zeilen sowas, statt mit 30 oder so, wenn man weiß, was man tut *zwinker*


Menno!
Haste ein Beispiel, wo ich mir das anschauen kann?? Bin leide rnoch ein JS-Newbee...
  View user's profile Private Nachricht senden
Seashore

Dabei seit: 23.05.2005
Ort: Bochum
Alter: 35
Geschlecht: Weiblich
Verfasst Di 24.05.2005 15:00
Titel

Antworten mit Zitat Zum Seitenanfang

Auf dieser Seite werden Divs mit Hilfe von Javascript ein- und ausgeblendet, um den Rollover-Effekt (Zehen färben sich rot) bei den Menübuttons links zu erzeugen. Es geht sogar noch kürzer als da, aber im Vergleich zu deinem Script ist das schon eine gewaltige Verbesserung. *zwinker*

http://fusspflegepraxis-himpelmann.de/

Die beiden Javascript-Funktionen, die hier aufgerufen werden, findest du unter
http://fusspflegepraxis-himpelmann.de/files/script.js

Aber nicht einfach kopieren, sondern selbermachen und verstehen, sonst hast du das Problem irgendwann wieder!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
fyll

Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 32
Geschlecht: Männlich
Verfasst Di 24.05.2005 15:01
Titel

Antworten mit Zitat Zum Seitenanfang

cheeezy hat geschrieben:
Ferret hat geschrieben:
Naja - geht mit 2 Zeilen sowas, statt mit 30 oder so, wenn man weiß, was man tut *zwinker*


Menno!
Haste ein Beispiel, wo ich mir das anschauen kann?? Bin leide rnoch ein JS-Newbee...


guckst du
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>-</title>
 <meta http-equiv="content-type" content="text/html;CHARSET=iso-8859-1">
 <meta name="Author" content="ich">
 <style type="text/css">
  .norm   {
   font-size:10px;
   color: #000000;
   font-weight:normal;
   font-family: Verdana, sans-serif; }
  body   {
        margin: 0px 0px 0px 0px;
   background-color:#ffffff; }
 </style>

</head>

<body>

<a href="#" onClick="DingHerUndWeg('IDderEbene')">KLICK ME</a>

<div style="position:absolute; top:20px; left:50px; visibility:hidden" id="IDderEbene">Hallo<br>du</div>

<script type="text/javascript">
 function DingHerUndWeg(VariablenName) {
  if(document.getElementById(VariablenName).style.visibility=='hidden') {
   document.getElementById(VariablenName).style.visibility='visible';
  } else {
   document.getElementById(VariablenName).style.visibility='hidden';
  }
 }
</script>

</body>
</html>
  View user's profile Private Nachricht senden
cheeezy
Threadersteller

Dabei seit: 24.05.2005
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 24.05.2005 15:07
Titel

Antworten mit Zitat Zum Seitenanfang

Super!

Vielen Dank!!!
  View user's profile Private Nachricht senden
 
Ähnliche Themen div -> overflow:hidden -> oberer Content versteckt
(Div Geschichte) Firefox/Safari ignorieren Grafik
3-spaltiges div-Layout in festem div macht Probleme
Div-Tag mit CSS formatieren - falsche Darstellung auf Safari
Probleme mit Safari ;(
Probleme mit JavaScript im Safari
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.