4. Ganze Seite = Link (also egal wo ich hinklicke)

Ganze Seite = Link (also egal wo ich hinklicke)

  • S

    Ich habe eine Seite die der Bildanzeige dient, dazu verwende ich:

    cvi_busy_lib.js 1.3 um während des Ladens einen "Es lädt"-Kreis anzuzeigen
    supersized 2 um das Bild in voller Größe anzuzeigen
    jquery 1.5 für Events (img load in erster Linie)

    <div id="supersize" style="position:<%= ViewData["CategoryPage"] == null ? "fixed" : "absolute" %>">
  <a href="<%= link %>"><img id="image" src="<%= Url.Content(ViewData["BackgroundImage"].ToString()) %>" alt="Current image"/></a>
</div>

    Wobei link die URL zum nächsten Bild darstellt bzw. falls es das letzte Bild der Kategorie ist zurück auf die Übersicht geht.

    Nun zu meinem Problem:
    - Unter Opera funktioniert alles wie gewünscht
    - Unter IE funktioniert das Verlinken, allerdings liefert mir die cvi_busy_lib folgenden Fehler (sobald das Bild nicht im Browser-Cache ist und geladen werden muss):

    Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Timestamp: Mon, 21 Feb 2011 14:27:32 UTC

Message: Unspecified error.
Line: 101
Char: 13
Code: 0
URI: http://localhost:59178/Scripts/cvi_busy_lib.js

    EDIT: D.h. sobald ein Bild nicht im Browser-Cache liegt hängt die Seite, der Busy-Kreis wird nicht angezeigt, das Bild wird nie angezeigt, Hintergrund bleibt schwarz.

    - Unter Firefox läuft zwar das Busy-Script problemlos, allerdings gibts in der Error console folgenden Error:

    Warning: Unexpected token in attribute selector: '!'.
Source File: http://localhost:59178/
Line: 0

    Was mir unverständlich ist, weil dort eigentlich kein '!' verwendet wird - nehme mal an, das passiert irgendwo in einer Library.

    + Die Verlinkung geht nicht. Im Source steht der Link zwar im href drin, aber wenn ich auf das Bild (= die Seite) klicke, tut sich nichts 😞

    Hat jemand rat? Benötigt es weiterer Informationen?

    MfG SideWinder

    0

  • Alles Gruende, weshalb ich ungerne auf externe Bibliotheken zurueckgreife: Man muss ewig herumfummeln, bis es unter allen gaengigen Browsern funktioniert. Probier sicherheitshalber dann am Ende auch nochmal Chrome. Hab da auch so meine Probleme mit dem Teil.

    Zum Problem:

    1. Ist die Seite lokal oder im Netz?
    2. Ist es moeglich serverseitige dynamische Sprachen zu nutzen, wie PHP o.ae.?
    3. Schonmal ohne dem Ladekreis-Skript probiert?

    Weitere Eingrenzung erfolgt nach Beantwortung.

    0
  • S

    1. Beides probiert
    2. ASP.NET MVC 2 ist im Einsatz, generell ASP.NET möglich, weiß aber nicht inwiefern das hier hilft, wir haben ja ein clientseitiges Problem 🙂
    3. Werd ich probieren, war aber bisher nicht das Problem...

    MfG SideWinder

    0

  • Ah, mir fallen gerade die <% ... %> -Tags auf. Nun, ob clientseitig oder nicht, ist ja gerade die Frage. Kann auch ein Skriptfehler sein, in den Bibliotheken, bzw. eine Inkompatibilitaet selbiger. Und deswegen waere meine Empfehlung, diese recht einfache Angelegenheit durch eigene Entwicklung zu loesen. Aber dafuer waere zunaehcst die Frage: Fuer welchen Bereich ist das? Wozu dient das Projekt?

    Edit: Um der Ursache unter den Umstaenden externer Bibliotheken auf den Grund zu gehen muesste man den kompletten Code einsehen koennen -- einschl. den der ext. Bibliotheken selbst.

    0
  • S
    Mod

    Benutz jQuery BlockUI

    Allein dieses License Agreement bevor man diese komische lib von dir laden kann hat mich abgeschreckt. jquery blockui funktioniert und wird supportet.

    PS:
    @heini: das Rad selber neu erfinden ist fast immer falsch.

    0
  • S

    Vielen Dank, neuer Status:

    Opera: Klappt.
    IE8: Klappt.

    Firefox: Block-UI funktioniert, aber der Link nicht. Folgender Source ist laut Firefox "generated":

    <div id="supersize" style="position: fixed; display: block; width: 1680px; height: 1019.76px;">
    <a class="activeslide" style="width: 1680px; height: 1019.76px; left: 0px; top: -94.5px;" href="/Project/Blubb/2">
        <img id="image" src="/Content/Pic1.jpg" alt="Current image">
    </a>
</div>

    Also der Link müsste eigentlich so groß wie die Seite sein, die style-Werte kommen wohl von supersized.js.

    MfG SideWinder

    0

  • Firefox: Block-UI funktioniert, aber der Link nicht.

    Und was passiert, wenn du auf das Bild klickst? Kommt 'ne Fehlerseite, passiert gar nichts, ist der Link nur so gross wie das Bild und geht nicht ueber die komplette Seite, ...?

    @Shade Of Mine: Ja, das alte leidige Thema. Ich denke, das ist mehr Geschmackssache als pauschalisieren zu koennen, es waere falsch. Meine Meinung basiert auf meine Erfahrungen mit externen Bibliotheken, die mich einfach nicht ueberzeugt haben. Da ich ohnehin eher mit Kleinprojekten zu tun habe, stoert's mich nicht, das Rad an einigen Stellen neu zu erfinden. Und da es sich hier auch bisweilen eher um ein kleines Skript handelt, waere eine Neuentwicklung u.U. sogar einfacher als die Bibliotheken nach Fehlern abzusuchen. Aber das ist nat. Geschmackssache.

    0
  • S

    Es passiert nichts, Firefox tut auch nicht so als wäre das Bild "clickable".

    Das Bild ist so groß wie die gesamte Seite, die <a>-Tags sind außen rum, dementsprechend müsste alles ein Link sein - wie es auch beim IE8 und bei Opera der Fall ist.

    MfG SideWinder

    0
  • S
    Mod

    SideWinder schrieb:

    Firefox: Block-UI funktioniert, aber der Link nicht.
    [...]
    Also der Link müsste eigentlich so groß wie die Seite sein, die style-Werte kommen wohl von supersized.js.

    Ist er es auch wenn du firebug befragst - da kannst du dir ja rahmen um die elemente anzeigen lassen. ansonsten die einfache variante nehmen mit einem onclick im div?

    0
  • S

    Ja, "Computed" sind folgende Werte für das a-Tag:

    width	1680px
height	1020px
top	-234px
right	0
bottom	234px
left	0

    MfG SideWinder

    0

  • Firefox unterstuetzt eine Groessenaenderung von <a> -Tags nicht. Projiziere diese Styles bitte auf das <img> -Tag. Und versuch' mal auf position: fixed; zu verzichten. Probier's stattdessen mit position: absolute; und dann auch ohne display: block; . Dafuer musst du dann nat. left und top setzen.

    0

  • Mal als Beispiel eines 100% skalierten Bildes mit Link, statisch:

    <body style="width:100%;height:100%;margin:0px 0px 0px 0px;overflow:hidden;">
<div style="position:absolute;top:0px;left:0px;width:100%;height:100%;margin:0px 0px 0px 0px;">
<a href="seite2.htm"><img style="border:none;width:100%;height:100%;margin:0px 0px 0px 0px;" src="bild.jpg"></a>
</div>
</body>

    Das Div ist hier als Zwischenelement, aus Kompatibilitaetsgruenden.

    0
  • S

    Kann das aber nicht ans img binden, da sonst das img ja je nach Auflösung des Users verzerrt wird - deswegen nutze ich ja supersized...

    MfG SideWinder

    0
  • S
    Mod

    Was spricht nochmal gegen onclick?

    0

  • SideWinder schrieb:

    Kann das aber nicht ans img binden, da sonst das img ja je nach Auflösung des Users verzerrt wird - deswegen nutze ich ja supersized...

    Alternativ kannst du auch das hier probieren, um Firefoxkonform zu bleiben:

    • GIF-Bild mit nur Transparenz anlegen (transparent.gif)
    • Eigentliches Bild ohne Link
    • Als letzte Ebene / letztes Element folgendenden Code:
    <div style="position:absolute;left:0px;top:0px;margin:0px 0px 0px 0px;width:100%;height:100%;">
<a href="seite2.htm">
<img style="border:none;width:100%;height:100%;" src="transparent.gif" alt="">
</a>
</div>

    Ich empfehle dann auch im Body-Tag style="width:100%;height:100%;" einzusetzen, da das sonst wiederum z.B. unter Opera Probleme bereiten koennte.

    0
  • S

    Shade Of Mine schrieb:

    Was spricht nochmal gegen onclick?

    onclick wirkt auch nicht, weder im div noch im img. Seht's euch mal online an:
    http://www.onemillionflavours.com/ Evtl. seht ihr einen anderen Fehler...

    Wenn ihr links oben eine der drei Kategorien auswählt und dann ein Projekt öffnet geht es in jedem Browser, dass man klickt und auf das nächste Bild bzw. am Ende wieder zur Kategorienübersicht kommt. Einzig und allein im FireFox will's nicht klappen...

    @heini: Ein Bild, dass ich über alles drüber lege verhindert dann wieder einen Klick im Menü 😞

    MfG SideWinder

    0

  • Nunja, aber nach wie vor unterstuetzt Firefox keine Groessenaenderung von <a> -Tags. Noch dazu stoert sich Firefox des oefteren an position:fixed; bei Objekten. Bin daran selbst schonmal verzweifelt. Also evtl. Mein besagtes Element nicht ganz hinten dran, sondern sozusagen als zweite Schicht, jedenfalls ueber dem Bild, aber hinter dem Menue. Du kannst hierbei auch ein bischen mit z-index (CSS) herumspielen. Setz' z.B. das Div-Objekt des Menues auf 10 und das des Bildes auf 0 (oder umgekehrt?); mein Teil bekaeme dann z.B. die 5.

    0
  • S
    Mod

    wrapper liegt ueber supersized und verhindert dass der click durch geht.

    Wenn du wrapper kleiner machst und dafuer overflow:visible dann hats der firefox geschluckt bei mir.
    oder eben du setzt onclick auf den wrapper 😉

    PS:
    wrapper sieht auf den 1. Blick komisch aus - aber ich habe mich damit nicht weiter befasst im moment. wozu genau brauchst du denn wrapper ueber die ganze seite?

    0
  • S

    wrapper ist so in den supersized.js-Demos ( http://buildinternet.com/project/supersized/ ) enthalten.

    Wenn ich wrapper die 100% height/width nehme und overflow:visible mache geht bei mir ein Klick immer noch nicht. Im IE und im Opera geht alles weiterhin perfekt, im Firefox wandert mein Busy-Anzeiger nach links-oben und die Klicks wollen immer noch nicht 😞

    @heini: Das klingt mir zu sehr nach "hacking". Ich dachte eigentlich immer FireFox ist der "clenste" Browser. Was ist da los? 😞

    MfG SideWinder

    0

  • Tja, die HTML-Standards werden von so vielen Browsern unterschiedlich unterstuetzt, und die clientseitigen Skriptsprachen sowieso. Das ist da los. Sowie IE und Opera auf ihre Weise die Standards nicht erfuellen, tut's auch Firefox an einigen Stellen.

    Das mit dem z-index ist allerdings keineswegs Hacking oder etwas aehnliches. Das dient viel mehr dazu, Objekte auch dann in korrekter Reihenfolge zu behalten, wenn sie evtl. an unpassender Stelle im HTML-Code stehen. Das wuerde in dem Moment helfen, wo du sagst, dass dein Menue dann nicht bedienbar waere. Setzt du dein Menue auf den hoechsten (oder niedrigsten; wie rum weiss ich im Moment nicht) Wert, bleibt es immer an erster Stelle stehen.

    0
  • S

    @heini: Hättest du Lust es noch einmal anzusehen? Das wrapper-DIV ist jetzt mit dem höchsten z-index ausgerüstet und in Zeile 58 habe ich noch ein onclick eingebaut. Verstehe nicht warum das nicht geht 😞

    Habe entdeckt, dass es im Safari auch nicht funktioniert.

    MfG SideWinder

    0
Anmelden zum Antworten