Toon posts:

[JS / CSS] IE laadt style niet

Pagina: 1
Acties:

maandag 29 januari 2007 11:28

Acties:
  • BasSpruit
  • Registratie: September 2002
  • Laatst online: 09-04-2022

BasSpruit

Topicstarter
Ik heb in JS een mooi script geschreven (dit script moet nog groter worden, aangezien ik ook nog drag & drop wil ondersteunen):
JavaScript:
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

// JScript File

var boxes = 0;
var closeText = "Close";

function Box(width, height, titleText, name)
{
    if(!document.createTextNode) { return; }
    
    boxes++;
    this.Width = width;
    this.Height = height;
    this.Container = makeNewElement("div");
    this.Container.setAttribute("class", name + "Box");
    this.Container.setAttribute("id", "Box_" + boxes.toString());
    
    var self = this;
    var title = makeNewElement("div");
    var control = makeNewElement("div");
    var link = makeNewElement("a");
    
    title.appendChild(document.createTextNode(titleText));
    title.setAttribute("class", "title");
    
    link.appendChild(document.createTextNode("X"));
    link.setAttribute("href", "#");
    link.setAttribute("title", closeText);
    link.onclick = function() { self.Hide(); }
    
    control.setAttribute("class", "control");
    control.appendChild(link);
    
    this.Container.appendChild(title);
    this.Container.appendChild(control);
    
}

Box.prototype = {
    Show:function()
    {
        if(this.Container)
        {
            this.Container.style.visibility = "visible";
            document.getElementsByTagName("body")[0].appendChild(this.Container);
        }
    },

    Hide:function()
    {
        if(this.Container)
        {
            this.Container.style.visibility = "hidden";
            this.Container = null;
        }
    }
}

function makeNewElement(element)
{
    if(document.createElementNS)
    {
        return document.createElementNS("http://www.w3.org/1999/xhtml", element);
    } 
    else if(document.createElement)
    {
        return document.createElement(element);
    }
}

var b = new Box(200, 200, "Title", "");
b.Show();

Ik heb dit stukje getest in FF, en dit werkt goed met mijn stylesheet
Cascading Stylesheet:
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

.Box
{
    width: 18em;
    background-color: Silver;
    float: left;
    display: inline;
    padding-bottom: 0.5em;
    border: #696969 1px solid;
}

.Box div
{
    margin-left: 2.5%;
    margin-top: 0.5em;
    width: 95%;
    background-color: White;
    display: inline;
    float: left;
    border: silver 1px outset;
}

.Box .title
{
    text-align: center;
    width: 75%;
    font-weight: bold;
}

.Box .control
{
    text-align: center;
    width: 15%;
    float: right;
    margin-right: 1.6%;
}

.Box .control A
{
    color: Red;
    text-decoration: none;
    font-weight: bold;
}

.Box .buttons
{
    text-align: center;
}

.Box .message
{
    height: 8em;
    overflow: auto;
}


IE vertikt het echter om dit goed te doen, terwijl ik met de DOM explorer wel de correcte attribuutwaarden zie. Wat ben ik hier nog vergeten? Op google of MSDN kan ik het niet vinden.

Ik roep de code op deze manier aan:
HTML:
1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <link href="App_Themes/Test/Boxes.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script type="text/javascript" src="JScript.js"></script>
</body>
</html>

[ Voor 0% gewijzigd door BasSpruit op 29-01-2007 12:45 . Reden: toevoeging ]

maandag 29 januari 2007 12:35

Acties:

Verwijderd

Je DOM is niet volledig ok hoor je bent het type vergeten meegeven:
code:
1

<link rel="stylesheet" href="http://www.yourdomain.com/app_themes/test/boxes.css" type="text/css">

Werk altijd lower case met directory's en bestandsnamen... en behoud de volgorde van de attributen en let er ook op dat je de link tag niet afsluit, deze hoeft niet afgesloten te worden.

[ Voor 13% gewijzigd door Verwijderd op 29-01-2007 12:37 ]

maandag 29 januari 2007 12:44

Acties:
  • BasSpruit
  • Registratie: September 2002
  • Laatst online: 09-04-2022

BasSpruit

Topicstarter
Verwijderd schreef op maandag 29 januari 2007 @ 12:35:
Je DOM is niet volledig ok hoor je bent het type vergeten meegeven:
code:
1

<link rel="stylesheet" href="http://www.yourdomain.com/app_themes/test/boxes.css" type="text/css">

Werk altijd lower case met directory's en bestandsnamen... en behoud de volgorde van de attributen en let er ook op dat je de link tag niet afsluit, deze hoeft niet afgesloten te worden.
Je hebt gelijk, ik was idd het type vergeten. Ik hoor echter wel de link tag af te sluiten. het toevoegen van "type" had echter geen effect.

maandag 29 januari 2007 12:57

Acties:

Verwijderd

Post es een link, dat maakt het wat makkelijker...

maandag 29 januari 2007 13:05

Acties:
  • BasSpruit
  • Registratie: September 2002
  • Laatst online: 09-04-2022

BasSpruit

Topicstarter
Dat gaat niet, want het staat niet online.

het makkelijkste is om notepad te openen, copy/pasten en de 3 bestandjes aan te maken.

Ik heb het opgelost. in plaats van
JavaScript:
1

this.Container.setAttribute("class", className);

te gebruiken, gebruik ik nu:
JavaScript:
1

this.Container.className = className;


de code
JavaScript:
1
2
3
4
5
6
7
8
9

if(this.Container.className)
    {
        this.Container.className = className;
    }
    else
    {
        this.Container.setAttribute("class", className);
        alert(this.Container.className);
    }


werkt echter niet. (ik heb wel de naam van de parameter "className" veranderd)

[ Voor 73% gewijzigd door BasSpruit op 29-01-2007 13:32 ]

maandag 29 januari 2007 15:37

Acties:

Verwijderd

IE heeft blijkbaar problemen met setAttribute: link

dinsdag 30 januari 2007 10:12

Acties:
  • BasSpruit
  • Registratie: September 2002
  • Laatst online: 09-04-2022

BasSpruit

Topicstarter
Verwijderd schreef op maandag 29 januari 2007 @ 15:37:
IE heeft blijkbaar problemen met setAttribute: link
vandaar dat het dus niet werkt...

met het attribuut "className" werkt het echter wel. ff een try / catch omheen gezet. Ik heb van de drag n drop functionaliteit ook al de drag geimplementeerd. nu alleen de drop nog :). Dit lukt dus niet! ik heb eigenlijk veel te weinig verstand van javascript...
JavaScript:
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270

// JScript File

var boxes = 0;
var closeText = "Close";

function Box(width, height, titleText, CSSclassName)
{
    if(!document.createTextNode) { return; }
    
    boxes++;
    this.Width = width;
    this.Height = height;
    this.Container = makeNewElement("div");
    this.title = makeNewElement("div");
    this.deltaX = null;
    this.deltaY = null;
    
    var self = this;
    var title2 = makeNewElement("span");
    var control = makeNewElement("div");
    var link = makeNewElement("a");
    
    /* Events */
    this.onShow = new function(){};
    this.onHide = new function(){};
    this.onClose = new function(){};
    this.onAppend = new function(element){};
            
    title2.appendChild(document.createTextNode(titleText));
    this.title.appendChild(title2);
    this.title.onmousedown = function(e) { self.StartDrag(e); }
    
    /* Close button (link) */
    link.appendChild(document.createTextNode("X"));
    link.setAttribute("href", "#");
    link.setAttribute("title", closeText);
    link.onclick = function() { self.Hide(); return false; }
    
    /* Add close button to control box */
    control.appendChild(link);
    
    try
    {
        /* Control Box */
        control.className = "control";
        
        /* title */
        this.title.className = "title";
        
        /* Set box`s positioning + style & id property */
        this.Container.className = CSSclassName;
        this.Container.id = "Box_" + boxes.toString();
        this.Container.style.position = "absolute";
        this.Container.style.left = "100px";
        this.Container.style.top = "100px";
    }
    catch (e)
    {
        this.Container.setAttribute("class", CSSclassName);
        this.Container.setAttribute("id", "Box_" + boxes.toString());
        control.setAttribute("class", "control");
        this.title.setAttribute("class", "title");
    }
    
    this.Container.appendChild(this.title);
    this.Container.appendChild(control);
}

Box.prototype = {
    Show:function()
    {
        if(this.Container)
        {
            var self = this;
            try
            {
                self.onShow();
            }
            catch (ex)
            {
            }
            finally
            {
                this.Container.style.visibility = "visible";
                document.getElementsByTagName("body")[0].appendChild(this.Container);
            }
        }
    },
    
    Hide:function()
    {
        if(this.Container)
        {
            var self = this;
            try
            {
                self.onHide();
            }
            catch (ex)
            {
            }
            finally
            {
                this.Container.style.visibility = "hidden";
            }
        }
    },
    
    Close:function()
    {
        if(this.Container && this.Container.parentNode && document.removeChild)
        {
            var self = this;
            try
            {
                self.onClose();
            }
            catch (ex)
            {
            }
            finally
            {
                this.Container.parentNode.removeChild(this.Container);
            }
        }
    },
    
    appendChild:function(element)
    {
        if(this.Container)
        {
            var self = this;
            try
            {
                self.onAppend(element);
            }
            catch (ex)
            {
            }
            finally
            {
                this.Container.appendChild(element);
            }
        }
    },
    
    StartDrag:function(e)
    {
        var x;
        var y;
        var self = this;
        
        if(e == null)
        {
            e = window.event;
        }
        x = parseInt(this.Container.style.left);
        y = parseInt(this.Container.style.top);
        
        this.deltaX = e.clientX - x;
        this.deltaY = e.clientY - y;
        
        this.title.onmousemove = function(e) { self.MouseMove(e); }
        this.title.onmouseup = function(e) { self.StopDrag(e); }
        
        if(window.event)
        {           
            window.event.cancelBubble = true;
        }
        else
        {
            e.stopPropagation();
        }
    },
    
    MouseMove:function(e)
    {
        if(e == null)
        {
            e = window.event;
            e.cancelBubble = true;
        }
        else
        {
            e.stopPropagation();
        }
        this.Container.style.left = (e.clientX - this.deltaX) + "px";
        this.Container.style.top = (e.clientY - this.deltaY) + "px";
        
        return true;
    },
    
    StopDrag:function(e)
    {
        this.title.onmouseup = null;
        this.title.onmouseover = null;
        
        if(e == null)
        {
            e = window.event;
            e.cancelBubble = true;
        }
        else
        {
            e.stopPropagation();
        }
        return false;
    }
}

function MessageBox(message)
{
    this.Message = message;
    this.Container = new Box(200, 200, "Message", "Box");
    
    var m = makeNewElement("div");
    m.className = "message";
    m.appendChild(document.createTextNode(message));
    
    this.Container.appendChild(m);
}

MessageBox.prototype = 
{
    Show:function()
    {
        if(this.Container)
        {
            this.Container.Show();
        }
    }
}

function makeNewElement(element)
{
    if(document.createElementNS)
    {
        return document.createElementNS("http://www.w3.org/1999/xhtml", element);
    } 
    else if(document.createElement)
    {
        return document.createElement(element);
    }
}

function addLoadEvent(func) 
{
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    } 
    else 
    {
        window.onload = function()
        {
            if (oldonload) 
            {
                oldonload();
            }
            func();
        }
    }
}

//var b = new Box(200, 200, "Title", "Box");
//b.Show();

var c = new MessageBox("This is a test message");
c.Show();

[ Voor 83% gewijzigd door BasSpruit op 30-01-2007 10:48 . Reden: Drop lukt me niet ]

dinsdag 30 januari 2007 11:08

Acties:
  • BasSpruit
  • Registratie: September 2002
  • Laatst online: 09-04-2022

BasSpruit

Topicstarter
loopt er iemand voorbij mn werkstation... zegt ie: "je mist dat en dat nog in StopDrag:function(e)"

JavaScript:
1

this.title.onmousemove = null;


waarom denk ik daar dan niet aan? het werkt nu in ieder geval onder FF en IE. (IE iets minder, maar daar valt mee te leven).
Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq