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

Ganze Seite = Link (also egal wo ich hinklicke)


  • 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

  • Schau's mir heute Abend mal genauer an, werde lokal ein bischen herumspielen und mal sehen, was ich da machen kann. Sollte doch zu schaffen sein.

    Waehrend dessen kannst du noch probieren dem wrapper nicht den hoechsten, sondern den dritthoechsten z-index zu verpassen. Darueber sollte der Link und das Bild liegen, und noch darueber entspr. das Menue. Vllt. ist das sogar schon die Loesung. Ansonsten bis nachher. 😉

    0
  • J

    Ohne mir alles durchgelesen zu haben oder mir das jetzt genauer angesehen zu haben, eben schnell den Standardreflex für IE/FF-Unterschied bzgl. Seite überdecken:

    Beim IE kann man durch ein 100%ig transparentes Irgendwas 'durchklicken', beim FF ist das Irgendwas trotz völliger Unsichtbarkeit da und fängt die Klicks ab.

    Vielleicht hilft das schon um den Fehler zu finden.

    0

  • Vllt. haettest du doch besser alles durchgelesen, denn genau das kam schon auf und genau das ist aktuell die Sache, an der gefummelt wird. z-index wird hier wohl die Loesung sein, vermute ich nach wie vor, und darum werd' ich mich nachher mal kuemmern, herauszufinden, was hier noch verstellt werden muss.

    Meine Ueberlegung waere, schichtmaessig, folgende:

    == BENUTZER ==
[z-index 10] Menue
[z-index 5] Link / Bild
[z-index 0] Wrapper
    0

  • So, ich habe nun folgendes ergruenden koennen: Der wrapper umschliesst das ganze Menue und das laesst sich so leicht nicht trennen (ich muesste an den CSS Dateien herumpfuschen). Aber: Die Div-Objekte, die das Bild anzeigen, kannst du einfach mit in den Wrapper setzen, hinter dem Menue, und dann die Eigenschaft z-index per style="" verteilen: Die Menues und Contents des Menues muessen dabei hoeher liegen als der z-index des Divs, welches das Bild laedt. Eigtl. musst du die Ausgabe der Bilder dann nur ans Ende des Wrappers lenken, statt dahinter. So funktioniert's bei mir.

    Beispiel: Meine lokale Datei, also die Verweise entsprechend anders:

    <html lang="de"><head>

<meta charset="utf-8"><link rel="stylesheet" href="http://www.onemillionflavours.com/Content/StyleSheet.css">
	<script type="text/javascript" src="http://www.onemillionflavours.com/Scripts/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="http://www.onemillionflavours.com/Scripts/jquery.blockUI.js"></script>
	<script type="text/javascript" src="http://www.onemillionflavours.com/Scripts/supersized.3.0.mod.js"></script>
	<title>
	VICTORIA TANCZOS
</title>
	<script type="text/javascript">
        /* Supersized */
		$(function() {
			$.fn.supersized.options = {
				startwidth: 1400,
				startheight: 850,
				vertical_center: 1,
                slideshow: 0,
                navigation: 0,
                thumbnail_navigation: 0,
                transition: 0,
                pause_hover: 0,
                slide_counter: 0,
                slide_captions: 0,
                slide_interval: 3000,
				slides : [
					{image : 'http://www.onemillionflavours.com/Content/ProjectImages/GraphicDesign/g_portfolio_01.jpg', url : '/Project/Portfolio/2'},
                    {image : 'http://www.onemillionflavours.com/Content/ProjectImages/GraphicDesign/g_portfolio_01.jpg', url : '/Project/Portfolio/2'} /*necessary*/
				]
			};
	        $('#supersized').supersized();
	    });

        /* Block UI until image is loaded */
        $(document).ready(function() {
            if(!($('#image').completed)) {
                $.blockUI.defaults.css = {};
                $('div#busy').block({
                    message: '<div><img src="http://www.onemillionflavours.com/Content/Busy.gif" style="width:32px;height:32px"/></div>',
                     showOverlay: false
                });

                /* Unblock UI when image is loaded */
                $('#image').load(function() {
                    $('div#busy').unblock();
                }).each(function() {
                    if(this.complete) {
                        $(this).trigger('load'); /* Firefox doesn't trigger load if image has been in cache */
                    }
                });
            }
        });

        /* Preload next image after loading has been finished */
        $(window).load(function() {
            $('<img/>')[0].src = 'http://www.onemillionflavours.com/Content/ProjectImages/GraphicDesign/g_portfolio_02.jpg';
        });

        /* Next image function for Firefox 3.6 (doesn't work...) */
        $('#wrapper').click(function() {
            window.location = 'http://www.onemillionflavours.com/Project/Portfolio/2';
        });
	</script>

</head><body style="background-color: rgb(0, 0, 0);">
	<div id="wrapper" style="z-index:1;">
        <div id="abovemenu" style="z-index:10;"><img src="http://www.onemillionflavours.com/Content/WhiteEdge.png" alt="White edge"></div>
		<div id="menu" style="z-index:9;">

<ul>

        <li><a href="http://www.onemillionflavours.com/Project/Portfolio/Illustration">Illustration</a></li>

        <li class="active"><a href="http://www.onemillionflavours.com/Project/Portfolio/GraphicDesign">Grafik Design</a></li>

        <li><a href="http://www.onemillionflavours.com/Project/Portfolio/Photography">Fotografie</a></li>

</ul>
<a href="http://www.onemillionflavours.com/Project/Portfolio/About"><img src="http://www.onemillionflavours.com/Content/Logo.jpg" alt="Logo"></a>
<h2>Portfolio</h2>
<h3></h3>
<p>Aufgeteilt in analog und digital erstellte Projekte bietet das zweiseitige Portfolio nicht nur einen Überblick, sondern stellt auch selbst ein Konzept mit künstlerischem Anspruch dar.</p>

<div id="nav_previous" style="z-index:8;">
&lt; <span style="text-decoration: line-through;">previous</span>
</div>
<div id="nav_next" style="z-index:7;">
<a href="http://www.onemillionflavours.com/Project/Portfolio/2">next &gt;</a>

</div>
		</div>
        <div id="content" style="z-index:6;">

        </div>
        <div id="busy" style="z-index:5;">
        </div>
    <div style="z-index:4; display: block; width: 1920px; height: 1165.71px;" id="supersized">
<a style="width: 1920px; height: 1165.71px; left: 0px; top: -131.5px;" href="http://www.onemillionflavours.com/Project/Portfolio/2">
<img src="http://www.onemillionflavours.com/Content/ProjectImages/GraphicDesign/g_portfolio_01.jpg"></a></div>
    </div>
</body></html>
    0
  • S

    Danke heini, vielen Dank.

    Ich muss jetzt aber zugeben noch eine wesentlich einfachere Möglichkeit gefunden zu haben 😞

    Ich musste das Attachen des Listeners:

    /* Next image function for Firefox 3.6 */
            $('#wrapper').click(function() {
                window.location = '<%= ViewData["NextUrl"] %>';
            });

    schlichtweg in ein document.ready packen, vorher scheint das DIV bei FireFox noch nicht im DOM zu sein 😞

    Tut mir jetzt sehr leid, dass es da so eine einfache Lösung gibt und du dich so lange gespielt hast. Trotzdem vielen Dank! Du stehst auf meiner Top-List 🙂

    MfG SideWinder

    0
  • P

    Hallo,

    das ist sinn und zweck der ready() funktion :). Wenn das DOM-Baum noch nicht aufgebaut ist aber deine Event-Registierung schon greifen soll, kann das einfach ziemlich in die Hose gehen.

    Aber wenn es jetzt funktioniert passt ja alles ;).

    Hab dir mal was rausgekramt: http://www.mediaevent.de/javascript/event_listener.html

    0
Anmelden zum Antworten