[JS] HTMLElement prototype

Pagina: 1
Acties:

  • r0bert
  • Registratie: September 2001
  • Laatst online: 26-04 17:38
Zoef!


Ik wou voor het gemak even een functie aan HTMLElement hangen, maar nu kan ik het niet aanroepen:

js
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
HTMLElement.prototype.getSibling = function (iIndex)
{
    if (iIndex == 0) return this;
    
    iDir    = (iIndex > 0) ? -1 : 1;
    oEl     = this;
    
    do
    {
        if(!(oEl = (iDir == -1) ? oEl.previousSibling : oEl.nextSibling))
            return false;
    } while ((iIndex += iDir) != 0);
    
    return oEl;
};

Code is niets mis mee volgens mij, ik kan het alleen niet aanroepen:
js
PHP:
1
alert(  document.getElementById('elElement').getSibling(-4)  );

geeft me een error
code:
1
Deze eigenschap of methode wordt niet ondersteund door het object

[ Voor 15% gewijzigd door r0bert op 25-05-2005 15:25 ]


  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
edit:

Hier stond dikke onzin...
Tssk.... * RobIII is nog niet helemaal wakker :P

Ga je met previousSibling niet altijd dezelfde kant op? :? Of zie ik iets over het hoofd?

Overigens is dat verder geen oplossing voor je probleem, maar ik zou het als ik jou was eens proberen in FF ofzo en even heel goed checken op syntax e.d.

Ik krijg hier trouwens de melding: HTMLElement is niet gedefinieerd...
Check ook effe http://groups-beta.google...ff=1&safe=off&sa=N&tab=wg :P

[ Voor 103% gewijzigd door RobIII op 25-05-2005 13:04 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


  • r0bert
  • Registratie: September 2001
  • Laatst online: 26-04 17:38
RobIII schreef op woensdag 25 mei 2005 @ 12:58:
edit:

Hier stond dikke onzin...
Tssk.... * RobIII is nog niet helemaal wakker :P

Ga je met previousSibling niet altijd dezelfde kant op? :? Of zie ik iets over het hoofd?
Je hebt gelijk. Had voor het gemak evene wat kleiner geedit. Zo klopt het dus niet, maar normaal komt dat wel goed :) * r0bert *
Overigens is dat verder geen oplossing voor je probleem, maar ik zou het als ik jou was eens proberen in FF ofzo en even heel goed checken op syntax e.d.
Is IE-only scriptje helaas..
Ik krijg hier trouwens de melding: HTMLElement is niet gedefinieerd...
Check ook effe http://groups-beta.google...ff=1&safe=off&sa=N&tab=wg :P
Ja, kreeg ik eerst ook.. Nu niet meer gelukkig, maar zou wel op kunnen duiden dat het niet lekker werkt..

[ Voor 6% gewijzigd door r0bert op 25-05-2005 13:32 ]


  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

IE kent helemaal geen HTMLElement...
Als je voor IE een method aan (alle) HTML elementen wilt hangen dan zal je zoiets moeten doen:
JavaScript:
1
2
3
4
5
var el = document.getElementsByTagName('*'), i = el.length;
while (i--)
{
  el[i].getSibling = function(iIndex) { ... }
}

[ Voor 78% gewijzigd door crisp op 25-05-2005 13:24 ]

Intentionally left blank


  • r0bert
  • Registratie: September 2001
  • Laatst online: 26-04 17:38
Hmm Jammer.. Ik ga nog even zoeken naar een oplossing, maarja, meeste hoop is dus al verloren ;)

  • r0bert
  • Registratie: September 2001
  • Laatst online: 26-04 17:38
Vind beetje zonde om hiervoor een nieuw topic te openen dus maar even eerst hieronder nog, loop tegen een probleem aan met firefox nu met de selectie te krijgen. Gewoon in het document wil prima, maar in een textarea niet. Volgens mij ziet firefox dat op een of andere manier als een soort frame (/window-child) ofzo.

code:
1
2
3
4
5
6
window.getSelection();
window.getSelection().toString();
window.getSelection().getRangeAt(0); // of welk nr dan ook :P

element.getSelection();
// etc..^

wordt m allemaal niet .. iemand een idee? Heb me al suf gezocht :?

en heb btw nog geen andere manier gevonden voor HTMLElement

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Er is ook geen echt alternatief voor HTMLElement in IE (het is nu eenmaal antiek spul, dus daar kan je ook niet veel van verwachten) behalve de manier die ik hierboven geschetst heb.

Vwb selections in een textarea in Firefox; kijk eens naar selectionStart selectionEnd en setSelectionRange()

Intentionally left blank


  • r0bert
  • Registratie: September 2001
  • Laatst online: 26-04 17:38
Thnx Crisp! (voor de zoveelste keer ;) :P)

  • r0bert
  • Registratie: September 2001
  • Laatst online: 26-04 17:38
Ik heb het nu redelijk ver voor elkaar, maar in IE wil het nu ineens niet meer goed lukken. Als ik geen selectie in de textarea heb, en wil dus een tekenreeks inserten, dan plaatst ie dit niet in de textarea, maar in het document zelf ofzo

stuk van mijn source, FF enzo werkt dus. IE niet
js
PHP:
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
this.workspace.fSelectionReplace = function(sTag, sClosing, bOverwrite)
        {   if (!sClosing) sClosing = '';
            
            // Firefox o.a. (Safari, Mozilla, Gecko vast ook)
            if (this.setSelectionRange)
            {
                // De selectie-uiterste opzoeken
                var iSelectionStart  = this.selectionStart;
                var iSelectionEnd    = this.selectionEnd;
                
                // Er is een selectie en geen close tag (dus tag die ergens omheen moet worden geplaatst
                if ((iSelectionStart != iSelectionEnd) && (bOverwrite == undefined))
                {
                    // Als er geen explicite boolean mee is gegeven aan de functie vragen wat er moet gebeuren
                    bOverwrite = confirm('Er is tekst geselecteerd, moet deze overschreven worden?');
                }
                
                // Overschrijven als daar voor gekozen is of als er gewoon een insert plaats moet vinden
                if ((iSelectionStart == iSelectionEnd) || (bOverwrite))
                    this.value = this.value.substring(0, iSelectionStart) + sTag + this.value.substring(iSelectionEnd, this.value.length);
                // Anders eromheen plaatsen of in geval van enkele tag, vóór de selectie
                else
                    this.value = this.value.substring(0, iSelectionStart) + sTag + this.value.substring(iSelectionStart, iSelectionEnd) + sClosing + this.value.substring(iSelectionEnd, this.value.length);
            }
            // IE
            else if ((document.selection) && (this.createTextRange))
            {
                sSelection  = document.selection.createRange().duplicate();
  
                if ((sSelection.text.length > 0) && (bOverwrite == undefined))
                {
                    // Als er geen explicite boolean mee is gegeven aan de functie vragen wat er moet gebeuren
                    bOverwrite = confirm('Er is tekst geselecteerd, moet deze overschreven worden?');
                }                

                if ((sSelection.text.length == 0) || (bOverwrite))
                    sSelection.text = sTag + sClosing;
                else
                    sSelection.text = sTag + sSelection.text + sClosing;
            }
            this.mToEditMode();
        }

eventjes werkend online gezet:
en wel hier :)

Iemand die weet waar het aan ligt en hoe ik dit oplos?

e: url

[ Voor 4% gewijzigd door r0bert op 26-05-2005 00:03 ]


  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Nee hoor :D

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


  • r0bert
  • Registratie: September 2001
  • Laatst online: 26-04 17:38
Ah ok, ik snap nu een gedeelte iets beter. Vanaf het moment dat ik op de "B-button" druk om de tekst vet te maken, wordt de positie van de cursor daar op geplakt..

Dan wordt het dus toch continu bij een event op de textarea de positie bijhouden ben ik bang?

en btw, ja RobIII de eerste 10sec was de url nog niet juist :P


edit:
Hij werkt nu, op een klein dingetje na in IE.

Als je in de textarea de tekst selecteerd, maar je laat de muis buiten de textarea los, gaat het fout. Iemand daar een slimme oplossing voor?

opgelost door een global var te gebruiken om lasteditorid te bewaren welke wordt geset bij ieder event, behalve een onmouseout etc.. als de id van de event niet gelijk is aan een bestaande editor.. dan valt ie dus terug op het vorige opgeslagen Id. Nog even om een idee te geven voor mensen via src
js
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    this.mSaveCursor = function(e) // eigen object
    {
        if (document.selection)
        {
            oEvObj  = fXGetEventEl(fXGetEventObj(e));
            oEdObj  = document.aEditors[oEvObj.id];
            
            // Onmouseout / onmouseup gedoe, waarbij niet goede element in event staat
            if (!oEdObj && gLASTID)
                oEdObj = document.aEditors[gLASTID];
            else
            {
                gLASTID = oEvObj.id;       

                if (oEvObj.createTextRange)
                    oEdObj.selection = document.selection.createRange();
            }
        }
    }



Voor de search nog even de complete code aangezien het topic nu toch al weggezakt is:
PHP:
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
[.. doctype e.d.]

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    div#elEditor
    {
        clear       :   both;
    }
    div#elControls div
    {   float       :   left;
        margin-left :   10px;
        margin-right:   10px;
    }
    </style>
    <script type="text/javascript">
    /* scripting: Robert de Wilde (wilde825@planet.nl) */

// Voor 'bugje' in de selectie bij IE wanneer cursor buiten element eindigd
var gLASTID;

// CANCELBUBBLE
fXCancelBubble = function(e)
{
    if (!e)
    {
        var e = window.event;                           // I.E.
        e.cancelBubble = true;                          //
    }
    if (e.stopPropagation) e.stopPropagation();         // mOzIlLa
}

// ATTACHEVENT
fXAttachEvent = function(oObj, eEve, pPnt)
{           
    if      (oObj.addEventListener) oObj.addEventListener(eEve, pPnt, false);       // DOM Level 2
    else if (oObj.attachEvent)      oObj.attachEvent('on' + eEve, pPnt);            // IE 5+
    else                            oObj.onclick = pPnt;                            // Bah.. Overige
}

fXGetEventObj = function(e)
{   if (!e) return window.event;
    return e;
}

fXGetEventEl = function(e)
{
    return (e.srcElement || e.target);
}


// HET EDITOR-OBJECT
oEditor = function(iId, iRows, iCols)
{
    this.id     = iId;
    this.rows   = iRows;
    this.cols   = iCols;
    this.cursor = 0;
    
    this.cInit = function()
    {
        //First init?
        try
        {
            document.aEditors[this.id]  = this;;
        }
        catch (e)
        {
            document.aEditors           = new Array();
            document.aEditors[this.id]  = this;
        }
        this.container      = document.createElement('div');
        this.workspace      = document.createElement('textarea');
        this.workspace.ref  = this;
        
        with (this.workspace)
        {
            setAttribute('cols',   this.cols);
            setAttribute('rows',   this.rows);
            setAttribute('name',   this.id);
            setAttribute('id',     this.id);
            setAttribute('wrap',   'virtual');
        }
        
            fXAttachEvent(this.workspace, 'click',    this.mSaveCursor);
            fXAttachEvent(this.workspace, 'keyup',    this.mSaveCursor);
            fXAttachEvent(this.workspace, 'mouseup',  this.mSaveCursor);
            //fXAttachEvent(this.workspace, 'mouseout', this.mSaveCursor);
        
        this.popup          = document.createElement('div');
        with (this.popup)
        {
            with (style)
            {   display   = 'none';
                position  = 'absolute';
                
                left      = 0;
                top       = 0;
                
                width     = '250px';
                marginTop = '50px';
                
                border    = 'black 1px solid';
                
                backgroundColor = 'white';
                
                filter          = 'alpha(opacity=85)';
                MozOpacity      = 0.85;
            }
        }
        
        this.container.appendChild(this.workspace);
        this.container.appendChild(this.popup);
        
        return this.container;        
    }
    
    this.fSelectionReplace = function(sTag, sClosing, bOverwrite)
    {   if (!sClosing) sClosing = '';
        
        // Firefox o.a. (Safari, Mozilla, Gecko vast ook)
        if (this.workspace.setSelectionRange)
        {
            // De selectie-uiterste opzoeken
            var iSelectionStart  = this.workspace.selectionStart;
            var iSelectionEnd    = this.workspace.selectionEnd;
            
            // Er is een selectie en geen close tag (dus tag die ergens omheen moet worden geplaatst
            if ((iSelectionStart != iSelectionEnd) && (bOverwrite == undefined))
            {
                // Als er geen explicite boolean mee is gegeven aan de functie vragen wat er moet gebeuren
                bOverwrite = confirm('Er is tekst geselecteerd, moet deze overschreven worden?');
            }
            
            // Overschrijven als daar voor gekozen is of als er gewoon een insert plaats moet vinden
            if ((iSelectionStart == iSelectionEnd) || (bOverwrite))
                this.workspace.value = this.workspace.value.substring(0, iSelectionStart) + sTag + sClosing + this.workspace.value.substring(iSelectionEnd, this.workspace.value.length);
            // Anders eromheen plaatsen of in geval van enkele tag, vóór de selectie
            else
                this.workspace.value = this.workspace.value.substring(0, iSelectionStart) + sTag + this.workspace.value.substring(iSelectionStart, iSelectionEnd) + sClosing + this.workspace.value.substring(iSelectionEnd, this.workspace.value.length);
        }
        // IE
        else if (this.selection)
        {
            if ((this.selection.text.length > 0) && (bOverwrite == undefined))
            {
                // Als er geen explicite boolean mee is gegeven aan de functie vragen wat er moet gebeuren
                bOverwrite = confirm('Er is tekst geselecteerd, moet deze overschreven worden?');
            }                

            if ((this.selection.text.length == 0) || (bOverwrite))
                this.selection.text = sTag + sClosing;
            else
                this.selection.text = sTag + this.selection.text + sClosing;
        }
        this.mToEditMode();
    }
    
    // Voor IE de cursorpositie bijhouden
    this.mSaveCursor = function(e)
    {
        if (document.selection)
        {
            oEvObj  = fXGetEventEl(fXGetEventObj(e));
            oEdObj  = document.aEditors[oEvObj.id];

            // IE Gezeik
           if (oEdObj)
           {
                gLASTID = oEdObj.id;                
            
                if (oEvObj.createTextRange)
                    oEdObj.selection = document.selection.createRange().duplicate();
            }
        }
    }

    this.mPopup = function(sAct)
    {
        switch (sAct)
        {
            case 'img': // ?????
                this.popup.innerHTML = 'adres van het plaatje:<br /><input type="text" style="clear:right;" /><input type="button" onclick="document.aEditors[\'' + this.id + '\'].fSelectionReplace(\'[img]\' + this.previousSibling.value + \'[/img]\');" value="image invoegen" />';
            break;
            
            case 'url': // ??????
                this.popup.innerHTML = 'url van hyperlink:<br /><input type="text" style="clear:right;" /><input type="button" onclick="document.aEditors[\'' + this.id + '\'].fSelectionReplace(\'[url=\' + this.previousSibling.value + \']\', \'[/url]\', false);" value="hyperlink invoegen" />';
            break;
            
            default:
            break;
        }
        this.popup.style.display = 'block';
    }
    
    this.mToEditMode = function()
    {
        this.popup.style.display = 'none';
        this.workspace.focus();
    }
    
    this.mShowDebug = function(sMsg)
    { 
        alert(sMsg);
    }
    
    return this.cInit();
}
    </script>
</head>

<body   onload="document.getElementById('elEditor').appendChild(new oEditor('editor', 15, 30));"
        onmouseup="//alert(fGetSelect(document.aEditors['editor'].workspace));">

<div id="elControls">
    <div onclick="document.aEditors['editor'].fSelectionReplace('[b]','[/b]', false);"><b>B</b></div>
    <div onclick="document.aEditors['editor'].fSelectionReplace('[i]','[/i]', false);"><i>I</i></div>
    <div onclick="document.aEditors['editor'].fSelectionReplace('[u]','[/u]', false);"><u>U</u></div>
    <s><div onclick="document.aEditors['editor'].mPopup('img');"><span style="color: purple;">img</span></div>
    <div onclick="document.aEditors['editor'].mPopup('url');"><span style="color: blue;">url</span></div></s>
</div>

<div id="elEditor"></div>

[img]"./img/emo/emoCon.gif"[/img]
[img]"./img/emo/emoCoo.gif"[/img]
[img]"./img/emo/emoHap.gif"[/img]
[img]"./img/emo/emoMad.gif"[/img]
[img]"./img/emo/emoOmg.gif"[/img]
[img]"./img/emo/emoSar.gif"[/img]
[img]"./img/emo/emoSha.gif"[/img]
[img]"./img/emo/emoSmi.gif"[/img]
[img]"./img/emo/emoTou.gif"[/img]

</body>
</html>

// zitten nog wat kleine bugjes in.. bijvoorbeeld bij volledige selectie enz. wel op te lossen lijkt me ;)

[ Voor 192% gewijzigd door r0bert op 26-05-2005 20:10 ]

Pagina: 1