tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
1201
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 28.02.10 14:24 #1
    Wilde Wilde ist offline Rookie
    Registriert seit
    Mar 2007
    Beiträge
    5
    Hallo zusammen,

    habe gerade folgendes Szenario, bei welchem ich nicht weiterkomme:

    Es existiert ein Div mit irgendeinem Inhalt. Über diesem Div liegt ein weiteres Div (z-index), welches über einen Link (onclick) ein weiteres Div zeigen bzw ausblenden kann. Das vom Event abhängige Div soll zwischen den beiden anderen genannten Divs liegen und außerdem transparent sein. Bis hierhin ist alles iO.

    Wenn ich jetzt jedoch in FF den Event auslöse, dann erhalte ich immer ein transparentes Div, welches genau die Höhe des bodys (> parent) hat. In IE6 wird nach auslösen des Links, das transparente Div über den kompletten Inhalt gelegt. FF verhält sich im Gegensatz zum IE hier CSS-konform, jedoch hätte ich gerne, dass auch im FF das transparente Div über den ganzen Inhalt gelegt wird. Der Effekt, welchen ich erreichen möchte, geht in Richtung Lightbox

    Übrigens bevor ich´s vergesse, dass Div mit dem Link hat eine fixe Position. D.h. es steht immer an der gleichen Stelle. Hier gibt es im unten aufgeführten Code einen kleinen Workaround für den IE... Die fixe Position des Divs hat jedoch nichts mit dem "zu kleinen" transparenten Div im FF zu tun.


    Hier der Beispielcode, welcher das Szenario abbildet:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 
    <meta http-equiv="cache-control" content="no-cache"> 
    <meta http-equiv="pragma" content="no-cache"> 
 
    <title>Content</title>
 
    <style type="text/css">
 
        * {
            margin:0;
            padding:0;
        }
 
        html, body {
            height:100%;
        }
        
        #content {
            width:800px; 
            height:1000px;
            background-color:yellow;
        }
 
        #link {
            top:100px;
            left:100px;
            height:100px;
            width:100px;
            z-index: 2;
            position: fixed;
            background-color:red;
        }
 
         #transparentLayer {
            position:absolute;
            background: black;
            
            margin:0;
            padding:0;
 
            top: 0;
            left: 0;
            
            width:100%;
            height:100%;
            
            filter:alpha(opacity=50);
            -moz-opacity:0.5;
            -khtml-opacity: 0.5;
            opacity: 0.5;
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        }  
    </style>
 
    <script type="text/javascript">
    
        var isShown = false;
 
        function showTransparentLayer()
        {
            var div = document.getElementById('transparentLayer');
            if (!isShown)
            {
                div.style.visibility = 'visible';
                isShown = true;
            }
            else
            {
                div.style.visibility = 'hidden';
                isShown = false;
            }
        }
        
        /* Workaround position:fixed im IE */
        function move_box() {  
            var offset = 100;
            var element = document.getElementById('link');  
            element.style.top = (document.documentElement.scrollTop + offset) + 'px';  
        } 
    </script>
 
</head>
 
<body>
 
    <div id="content"></div>
 
    <div id="link"><a href="#" onclick="showTransparentLayer();">Link</a></div>
 
    <div id="transparentLayer" style="visibility:hidden"></div>
    
    <!-- Workaround position:fixed im IE  -->
    <!--[if lt IE 7]>  
    <style type="text/css">  
             #link {  
                 position: absolute;  
            }     
        </style>  
        <script type="text/javascript">  
        window.setInterval(move_box, 20);  
    </script>  
    <![endif]-->
 
</body>
</html>

    Über eure Hilfe würde ich mich freuen!

    Viele Grüße
    Wilde
     
    Zitieren Zitieren
  2. 28.02.10 14:27 #2
    Maik Tutorials.de Gastzugang
    Hi,

    positioner #transparentLayer fixed, denn seine Höhe wird im Viewport nie zunehmen bzw. bis zum unteren Fensterrand reichen, wenn sich die Seite nach unten scrollen lässt.

    mfg Maik
     
    Zitieren Zitieren
  3. 28.02.10 14:36 #3
    Wilde Wilde ist offline Rookie
    Registriert seit
    Mar 2007
    Beiträge
    5
    Hi Maik,

    Mensch vielen Dank für den Tip!! Mal wieder vor lauter Bäumen den Wald nicht mehr gesehen...

    Also ich habe den Code jetzt wie folgt angepasst:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 
    <meta http-equiv="cache-control" content="no-cache"> 
    <meta http-equiv="pragma" content="no-cache"> 
 
    <title>Content</title>
 
    <style type="text/css">
 
        * {
            margin:0;
            padding:0;
        }
 
        html, body {
            height:100%;
        }
        
        #content {
            width:800px; 
            height:1000px;
            background-color:yellow;
        }
 
        #link {
            top:100px;
            left:100px;
            height:100px;
            width:100px;
            z-index: 2;
            position: fixed;
            background-color:red;
        }
 
         #transparentLayer {
            position:fixed;  [COLOR="Red"]/* <- NEU */[/COLOR]
            background: black;
            
            margin:0;
            padding:0;
 
            top: 0;
            left: 0;
            
            width:100%;
            height:100%;
            
            filter:alpha(opacity=50);
            -moz-opacity:0.5;
            -khtml-opacity: 0.5;
            opacity: 0.5;
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        }  
    </style>
 
    <script type="text/javascript">
    
        var isShown = false;
 
        function showTransparentLayer()
        {
            var div = document.getElementById('transparentLayer');
            if (!isShown)
            {
                div.style.visibility = 'visible';
                isShown = true;
            }
            else
            {
                div.style.visibility = 'hidden';
                isShown = false;
            }
        }
        
        /* Workaround position:fixed im IE */
        function move_box() {  
            var offset = 100;
            var element = document.getElementById('link');  
            element.style.top = (document.documentElement.scrollTop + offset) + 'px';  
        } 
    </script>
 
</head>
 
<body>
 
    <div id="content"></div>
 
    <div id="link"><a href="#" onclick="showTransparentLayer();">Link</a></div>
 
    <div id="transparentLayer" style="visibility:hidden"></div>
    
    <!-- Workaround position:fixed im IE  -->
    <!--[if lt IE 7]>  
    <style type="text/css">  
               #link {  
                  position: absolute;  
               }
        #transparentLayer {  [COLOR="Red"]/* <- NEU */[/COLOR]
                  position: absolute;  
            }
    </style>  
        <script type="text/javascript">  
        window.setInterval(move_box, 20);  
    </script>  
    <![endif]-->
 
</body>
</html>

    Jetzt geht´s im FF und IE6.

    Viele Grüße
    Wilde
     
    Zitieren Zitieren
  4. 28.02.10 14:40 #4
    Maik Tutorials.de Gastzugang
    Den position:fixed-Hack für IE6 würde ich so lösen:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-28" />
 
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="pragma" content="no-cache" />
 
        <title>Content</title>
 
        <style type="text/css">
 
                * {
                        margin:0;
                        padding:0;
                }
 
                html, body {
                        height:100%;
                }
 
                #content {
                        width:800px;
                        height:1000px;
                        background-color:yellow;
                }
 
                #link {
                        top:100px;
                        left:100px;
                        height:100px;
                        width:100px;
                        z-index: 2;
                        position: fixed;
                        background-color:red;
                }
 
                 #transparentLayer {
                        position:fixed;
                        background: black;
 
                        margin:0;
                        padding:0;
 
                        top: 0;
                        left: 0;
 
                        width:100%;
                        height:100%;
 
                        filter:alpha(opacity=50);
                        -moz-opacity:0.5;
                        -khtml-opacity: 0.5;
                        opacity: 0.5;
                        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
                }
        </style>
 
        <script type="text/javascript">
 
                var isShown = false;
 
                function showTransparentLayer()
                {
                        var div = document.getElementById('transparentLayer');
                        if (!isShown)
                        {
                                div.style.visibility = 'visible';
                                isShown = true;
                        }
                        else
                        {
                                div.style.visibility = 'hidden';
                                isShown = false;
                        }
                }
        </script>
 
[B]<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE7.js"></script>
<![endif]-->[/B]
 
</head>
 
<body>
 
        <div id="content"></div>
 
         <div id="link"><a href="#" onclick="showTransparentLayer();">Link</a></div>
 
         <div id="transparentLayer" style="visibility:hidden"></div>
 
</body>
</html>

    Quelle: http://code.google.com/p/ie7-js/

    Vorteil: Das Script fixt noch weitere bekannte Bugs im IE6

    mfg Maik
     
    Zitieren Zitieren
« Padding soll sich nur auf den Text beziehen. | Textgröße ändert sich nicht. »

Ähnliche Themen

  1. Word, Text verschiebt den ganzen Inhalt
    Von ziriander im Forum Office-Anwendungen
    Antworten: 3
    Letzter Beitrag: 10.12.06, 19:07
  2. Vertikaler Background über ganzen Bildschirm
    Von emonem im Forum CSS
    Antworten: 2
    Letzter Beitrag: 26.07.06, 12:21
  3. Transparentes Control über DirectX Video legen
    Von Christian Kusmanow im Forum .NET Windows Forms
    Antworten: 15
    Letzter Beitrag: 10.02.06, 10:05
  4. Inhalt einer ganzen Szene verschieben
    Von Schwarzer Riese im Forum Flash Plattform
    Antworten: 9
    Letzter Beitrag: 13.01.05, 13:41
  5. <tds> über den ganzen bildschrim?
    Von Benedikt im Forum HTML & XHTML
    Antworten: 16
    Letzter Beitrag: 13.04.03, 14:01

Stichworte