Ticket #8: test1.html

File test1.html, 4.2 KB (added by Alfonso, 19 years ago)

test file to get any element position

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<html>
3<head>
4        <title></title>
5
6        <script type="text/javascript">
7function Show( relElement )
8{
9        var oPos = FCKTools.GetElementPosition( 
10                relElement.nodeType == 9 ?
11        ( FCKTools.IsStrictMode( relElement ) ? relElement.documentElement : relElement.body ) :
12         relElement,
13         this.window )
14
15        alert( 'Final position: ' + oPos.X + ", " + oPos.Y ) ;
16}
17
18window.onload = function()
19{
20        document.body.onmouseup         = Body_OnMouseUp ;
21}
22
23function Body_OnMouseUp( e )
24{
25        Show ( e ? e.target : event.srcElement ) ;
26}
27
28
29/* functions */
30var FCKTools = {} ;
31
32String.prototype.Contains = function( textToCheck )
33{
34        return ( this.indexOf( textToCheck ) > -1 ) ;
35}
36
37var s = navigator.userAgent.toLowerCase() ;
38
39var FCKBrowserInfo = 
40{
41        IsIE            : s.Contains('msie'),
42        IsIE7           : s.Contains('msie 7'),
43        IsGecko         : s.Contains('gecko/'),
44        IsSafari        : s.Contains('safari'),
45        IsOpera         : s.Contains('opera'),
46        IsMac           : s.Contains('macintosh')
47} ;
48
49FCKTools.GetElementPosition = function( el, relativeWindow )
50{
51        // Initializes the Coordinates object that will be returned by the function.
52        var c = { X:0, Y:0 } ;
53       
54        var oWindow = relativeWindow || window ;
55
56        var oOwnerWindow = FCKTools.GetElementWindow( el ) ;
57
58        // Loop throw the offset chain.
59        while ( el )
60        {
61                alert( el.nodeName + " offsetLeft:" + el.offsetLeft + " scrollLeft:" + el.scrollLeft ) ;
62
63                c.X += el.offsetLeft - el.scrollLeft ;
64                c.Y += el.offsetTop - el.scrollTop  ;
65
66                if ( el.offsetParent )
67                        el = el.offsetParent ;
68                else
69                {
70                        if ( oOwnerWindow != oWindow )
71                        {
72                                if ( el = oOwnerWindow.frameElement )
73                                        oOwnerWindow = FCKTools.GetElementWindow( el ) ;
74                        }
75                        else
76                        {
77                                c.X += el.scrollLeft ;
78                                c.Y += el.scrollTop  ;
79                                break ;
80                        }
81                }
82        }
83
84        // Return the Coordinates object
85        return c ;
86}
87
88
89FCKTools.GetElementDocument = function ( element )
90{
91        return element.ownerDocument || element.document ;
92}
93
94// Get the window object where the element is placed in.
95FCKTools.GetElementWindow = function( element )
96{
97        return this.GetDocumentWindow( this.GetElementDocument( element ) ) ;
98}
99
100FCKTools.GetDocumentWindow = function( doc )
101{
102        // With Safari, there is not way to retrieve the window from the document, so we must fix it.
103        if ( FCKBrowserInfo.IsSafari && !doc.parentWindow )
104                this.FixDocumentParentWindow( window.top ) ;
105       
106        return doc.parentWindow || doc.defaultView ;
107}
108
109/*
110        This is a Safari specific function that fix the reference to the parent
111        window from the document object.
112*/
113FCKTools.FixDocumentParentWindow = function( targetWindow )
114{
115        targetWindow.document.parentWindow = targetWindow ; 
116       
117        for ( var i = 0 ; i < targetWindow.frames.length ; i++ )
118                FCKTools.FixDocumentParentWindow( targetWindow.frames[i] ) ;
119}
120
121FCKTools.GetParentWindow = function( document )
122{
123        return document.contentWindow ? document.contentWindow : document.parentWindow ;
124}
125
126FCKTools.IsStrictMode = function( document )
127{
128        return ( document.compatMode && document.compatMode == "CSS1Compat" ) ;
129}
130
131
132        </script>
133</head>
134<body>
135<p>Clicking on any element will alert its offsetLeft and scrollLeft up to the main window.<br>
136the elements in the iFrame have the same values for those properties in Opera
137</p>
138<form name="fake" action="test1.html" method="get">
139
140        <div style="height: 200px">
141                <!-- This div is here just to make some space -->
142        </div>
143        <table cellspacing="10" cellpadding="0" border="0">
144                <tr>
145                        <td valign="top">
146                                <input type="button" value="Show Relative"><br>
147                                <br>
148                                <select>
149                                        <option selected>&nbsp;</option>
150                                        <option>This is an option of the select box</option>
151                                        <option>Other option</option>
152                                        <option>Some option</option>
153                                </select>
154                        </td>
155                        <td valign="top">
156                                <input type="button" value="Add Content">
157                        </td>
158                        <td valign="top">
159                        </td>
160                </tr>
161        </table>
162        <div align="center">
163                <iframe src="innerpage.html" frameborder="0"></iframe>
164        </div>
165        <input id="chkRTL" type="checkbox">
166        Right to Left (RTL)<br>
167        <div style="height: 1000px; width: 1000px;">
168                <!-- This div is here just to show the scrollbar -->
169        </div>
170
171</form>
172</body>
173</html>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy