1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Safari und Javascript

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Jaqueline, 14.08.05.

  1. Jaqueline

    Jaqueline Gast

    Hallo,

    Ich habe folgendes, mir unerklärliches Problem:
    Ich habe ein javascript in einer html-Datei, das Folgendes bewirken soll: Ein gif soll ohne erneutes Laden der html-Datei durch klicken auf den "next"-button ausgetauscht werden. Beginnend mit 01.gif, dann 02.gif, dann 03.gif, und dann weiter als Schleife, wieder mit 01.gif beginnend. Oder das gleiche Prinzip umgekehrt mit dem "prvious"-button.
    Also eine einfacher Durchlauf durch eine Galerie.

    Funktioniert auch auf allen von mir getesteten Browsern, aber leider nicht auf Safari. Da funktioniert bei der älteren Version gerade mal ein Durchlauf (01->02->03->01), dann geht es nicht weiter, bei der aktuellen Version funktioniert gerade mal ein oder zwei Klicks, dann ist schon alles taub.

    Bitte schreibt mir jetzt nicht, dass Safari sowieso doof ist und kein Mensch Safari verwendet - mein Auftraggeber verwendet Ihn.

    Ich wäre sehr dankbar, wenn jemand das Problem oder besser dessen Lösung kennt, denn ich weiss nicht mehr weiter.

    Folgend der link, falls jemand probieren möchte:

    http://www.momproductions.de/123/123.html


    Vielen Dank für die Mühen,

    Per
     
  2. creative7even

    creative7even Jerseymac

    Dabei seit:
    23.02.05
    Beiträge:
    454
    Hallo!

    habe mal den code ein wenig verändert. Änderungen sind mit CHANGED kommentiert.

    Code:
    ...
    <html>
    <head>
    <title>...1-2-3-1-2-3-1-2-3-1-2-3...</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javascript" type="text/javascript">
    <!--
    var current_index = 1;
    // HIER DIE ANZAHL DER BILDER IN EINER GALLERIE AENDERN
    var max_image = 3;
    var displayImages = new Array();
    for(var i = 1; i <= max_image; i++) {
       displayImages[i] = 0;
    }	
    var menuNormal = new Array();
    // MENUE NORMAL
    // Portfolio
    menuNormal[0] = new Image();
    menuNormal[0].src="pohg.gif";
    // Hauptbild
    menuNormal[1] = new Image();
    // Leergifs
    menuNormal[2] = new Image();
    // Previous
    menuNormal[3] = new Image();
    menuNormal[3].src="prhg.gif";
    // Next
    menuNormal[4] = new Image();
    menuNormal[4].src="nehg.gif";
    // Leergifs
    menuNormal[5] = new Image();
    menuNormal[6] = new Image();	
    
    // MENUE HIGHLIGHT
    var menuHighlight = new Array();
    // Portfolio
    menuHighlight[0] = new Image();
    menuHighlight[0].src="podg.gif";
    // Hauptbild
    menuHighlight[1] = new Image();
    // Leergif
    menuHighlight[2] = new Image();
    // Previous
    menuHighlight[3] = new Image();
    menuHighlight[3].src="prdg.gif";
    // Next
    menuHighlight[4] = new Image();
    menuHighlight[4].src="nedg.gif";
    // Leergifs
    menuHighlight[5] = new Image();
    menuHighlight[6] = new Image();
    
    function menuOver(index) {
      document.images[index].src = menuHighlight[index].src;
    }
    
    function menuOut(index) {
      document.images[index].src = menuNormal[index].src;
    }	
    
    function switchImage(direction) {
       // next
       if(direction == true){
          current_index++;
          if(current_index > max_image || current_index == 0) {
             current_index = 1;
          }
       }
       // previous
       else{
          current_index--;
          if(current_index < 1) {
             current_index = max_image;
          }
       }
    
       // index changed. swap image to given index.
       if(displayImages[current_index].src == null){		//CHANGED property "src".
          displayImages[current_index] = new Image;
          var name = "";
          if(current_index < 10){
             name = "0" + current_index + ".gif";
          }
          else{
             name = current_index + ".gif";
          }
          displayImages[current_index].src = name;
          document.swapimg.src = name;							// CHANGED displayImages[current_index].src;
       }
       else{
       	document.swapimg.src = name = "0" + current_index + ".gif";
       }
    }
    
    function linie(x) {}
    {   if (document.all) x.blur(); }
    
    function preloadImages() {
      var d=document; if(d.images){ if(!d.p) d.p=new Array();
        var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a[i];}}
    }
    //-->
    </script>
    </head>
    
    <body bgcolor="#FFFFFF" onLoad="preloadImages('nedg.gif','prdg.gif','podg.gif')">
    <table width="800" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
      <tr>
        <td>
          <table width="800" border="0" cellspacing="0" cellpadding="0" align="center" height="525">
            <tr> 
              <td valign="top" height="20">
              	<!-- portfolio -->
              	<a href="#" onClick="linie(this);" onMouseOver="menuOver(0)" onMouseOut="menuOut(0)"> 
                	<img name="po" border="0" src="podg.gif" width="75" height="20"></a>
              </td>
              <!-- image to swap -->
              <td rowspan="3"><img name="swapimg" src="01.gif" width="650" height="525"></td>
              <td valign="top"><img src="l.gif" width="75" height="20"></td>
            </tr>
            <tr> 
              <td valign="middle" height="485">
              	<!-- previous -->
              	<a href="javascript:switchImage(false)" onClick="linie(this);" onMouseOver="menuOver(3)" onMouseOut="menuOut(3)"> 
                	<img name="pr" border="0" src="prhg.gif" width="75" height="14"></a>
              </td>
              <td valign="middle">
              	<!-- next -->
              	<a href="javascript:switchImage(true)" onClick="linie(this);" onMouseOver="menuOver(4)" onMouseOut="menuOut(4)"> 
                	<img name="n1" border="0" src="nehg.gif" width="75" height="14"></a>
              </td>
            </tr>
            <tr> 
              <td valign="bottom" height="20"><img src="l.gif" width="75" height="20"></td>
              <td height="20" valign="bottom"><img src="l.gif" width="75" height="20"></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    
    </body>
    </html>
    
    
    funktioniert auf Safari 1.3 (Panther 10.3.9)

    creative7.
     
    1 Person gefällt das.
  3. Jaqueline

    Jaqueline Gast

    ... ich bin beeindruckt. Danke !
    Ich bin in zwei Tagen nicht dahinter gekommen.

    Im Vergleich zu Deiner Problemlösung ist es vielleicht unerheblich, aber vielleicht weisst Du ja trotzdem Rat: Wenn ich die Datei nun im IE aufrufe erscheint nach dem ersten klicken penetrant der "linkrahmen", also der Rand um "previous" bzw. "next", den ich versuche mit

    function linie(x) {}
    { if (document.all) x.blur(); }

    zu vermeiden:

    http://www.momproductions.de/123/neu.html
     
  4. creative7even

    creative7even Jerseymac

    Dabei seit:
    23.02.05
    Beiträge:
    454
    hier kann etwas css helfen!

    zb.:

    Code:
    <style type="text/css">
    <!--
    .anchor, .anchor:hover {
      text-decoration:none;
    }
    -->
    </style>
    
    <a href="foo.html" class="anchor" >klick</a>
    
    
    gruesse.creative7
     
  5. Jaqueline

    Jaqueline Gast

    Guten Morgen creative7,

    erst nochmals Danke, denn Dein Vorschlag hat mir sehr geholfen und funktioniert wunderbar. Aber die css-Sache hatte nicht den erhofften Effekt:

    http://www.momproductions.de/123/klick.htm

    ... der klick-Rand bleibt im Explorer und will gar nicht mehr weggehen, ausser ich klicke irgendwo anderes hin.
    Vielleicht hast Du ja noch nen heissen Tip, wenn nicht, danke ich Dir wirklich sehr für Deine Mühen.

    j.
     
  6. creative7even

    creative7even Jerseymac

    Dabei seit:
    23.02.05
    Beiträge:
    454
    Hi!

    da habe ich offenbar was missverstanden:
    das hier müsste gehen (ie for mac):

    Code:
    ...
    <a href="foo.html" onclick="this.blur();" >foo</a>
    ...
    
    creative7.
     
  7. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    schade nur, das alles vollkommen vergebene Liebesmüh ist, wenn der Benutzer JS (aus gutem Grund) abschaltet :oops:.

    Wie wär's mit der Anwendung von <noscript> oder dem Versuch das in ähnlicher Form als CSS-only (als hint: "visibility: hidden") zu realisieren?

    Gruß Stefan
     
  8. creative7even

    creative7even Jerseymac

    Dabei seit:
    23.02.05
    Beiträge:
    454
    ...in diesem Falle würde er dann gar keinen Zugang zum Inhalt der Seite bekommen, und womöglich auf 90% der Seiten im www etwas benachteiligt sein.

    Habe jetze keine Ahnung was das bringen sollte... sorry :innocent:

    creative7
     
  9. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    <loriot>Ahhh ja</loriot>Also etwa "Zu Risiken und Nebenwirkungen fragen Sie Bill Gates oder wechseln den Browser" - oder wie? "WebDesigner" (sagen wir lieber: die Schmalspurausgaben die sich dafür halten) sind im Allgemeinen schon beschränkt, aber das ist erfreulichweise keine 90 % Mehrheit. Nebenbei: Tendenz abnehmend.

    Dann empfehle ich dringlich mal die Auseinandersetzung mit Begrifflichkeiten wie "accessibility" (Zugänglichkeit), "usability" (Nutzbarkeit) und "validity" (Validität) im konkreten Fall jeweils im Kontext von Webdesign/Webanwendungen.*

    Gruß Stefan
     
  10. creative7even

    creative7even Jerseymac

    Dabei seit:
    23.02.05
    Beiträge:
    454
    wie auch immer...

    das grundlegende Problem war das Umrahmen von aktiven Links im Internetexplorer für mac. Da hilft kein valid css oder xhtml, oder auch keine barrierefreiheit.
     
  11. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    Nein, das grundlegede Problem war/ist das ein Portfolio über eine JS-Methode präsentiert werden soll. Kann man machen, muß man aber nicht. Wenn man es dennoch tut, muß man auch die Randbedingungen dazu beachten. Und da gehören die von mir genannten Begrifflichkeiten sehr wohl dazu.

    Gruß Stefan
     
  12. supermario

    supermario Gast

    ich denke man kann js einbinden ohne das d e i n e randbedingungen darunter leiden oder glaubst du, dass annähernd 50% im www überhaupt wissen, wie man es abschaltet!? solange der ie von microsuft noch den größten marktanteil hat, sind noch ne menge ahnungslose unterwegs...;)
     
  13. Jaqueline

    Jaqueline Gast

    Hallo,
    erst mal grossen Dank für die kompetente Hilfe von creative7!
    Funktioniert hat letztlich Browserübergreifend (hoffentlich):

    onFocus="if(this.blur) this.blur()"

    Also nochmals vielen Dank für die Mühen.

    Ansonsten scheint mir die Diskussion etwas zu akademisch zu werden, da kann ich ja als Schmalspurwebdesignerin nicht mehr mithalten und sollte mich lieber raushalten.
    Vielleicht soviel: der css-Vorschlag hat keine Chancen auf Ns 4.x und nur teilweise beim IE 5.x. Insofern finde ich die JS-Variante durchaus legitim und derjenige der es abschaltet kann es ja anmachen. Ich muss ja auch erst mal den Monitor einschalten, bevor ich was sehe.
    Aber eigentlich wollte ich mich ja raushalten...

    Danke nochmals,
    J.
     

Diese Seite empfehlen