It may happen, when creating a web interface, you might want to be part of the permanent attention of users / visitors. Whether it’s company logo on a menu or navigation is useful as this item to remain in a person’s visual field, even if it runs windows (browser in this case). The solution we chose do I use obviously JavaScript.
In the interest of clarity and exposure to not lose myself in generalities, I present a concrete implementation, and we used it to create a website. It is a navigation, which “follows” the visitor when it runs the page. And, as I mentioned, it is not using frames but JavaScript. Because, you see, position is not static, but is calculated as the performance of the page.
Above all, it raises a natural question is “what you build here?” Most often such a factor is called sliding toolbar / menu. Translation (and adaptation) would be my floating menu. And I think the words and behavior to cover this item.
I can not help but express and one of my biggest regrets. You can find and you: the actual implementation of a floating menu is not very complicated. Unfortunately, because of incompatibilities between browsers, ensuring framework requires at least as much work … and a lot more testing. Anyway, this is how we adapt working conditions.
Design
After we reached the following configuration design of the window:
As you can see, the menu will be displayed in the left and the right content. This banner is optional, as is optional, and adding a banner at the bottom of the page. If you’re wondering why I somehow express stipulated in this banner, the answer is simple: it can serve both to identify more clearly the current page (the page may include name, section), as well as for adding advertising banners (requirement become almost standard in today’s Web economizer).
For the page to be displayed consistently on different resolutions, all items will be centered in the browser window. Dimensions will be so calculated that the page does not require horizontal scrolling even at 640×480 resolution. That being established, here we go.
Achievement
Browser Identification is simple, with two lines of code:
isIE = (document.all)? 1: 0;
isNS = (document.layers)? 1: 0;
It is sufficient identification, for not using ultra-specific elements, which are known to pose problems in different versions of browsers. So we are not interested in the actual version (at least so long as it is over three, for Netscape and Internet Explorer over 4).
Following code sequence is a very interesting and useful (you should not praise your code, but really think is a great thing). What’s the use? Well, when determining the window – attention, useful (it can be displayed elements) of – the browser. Sequence code for Netscape is
awidth = window.innerWidth;
aheight = window.innerHeight;
and Internet Explorer:
awidth = document.body.clientWidth;
aheight = document.body.clientHeight;
Determination should be made after the document was loaded, but before displaying on screen elements. You may wonder how can this be achieved – charging document, but not showing the page elements. Just do the following: positioning of page elements, referred to as Title, Menu and Content in “containers”
and declare them as hidden using CSS (Cascading Style Sheets).
Note: You will see the code page value of 600 (pixels) that represents the whole width of page elements. More elegant is to declare a constant with this value, say mwidth, which refer to a later (if you remember, by & (mwidth) – the HTML and simply mwidth in scripts) .
After creating layer (not to be confused with specific elements of Netscape – are also called layers and elements is <div>) they must be properly displayed and positioned on the page. For this we defined a function ShowPage, called from the same event on load. The main thing to realize is altering the function of layer properties, all properties related to CSS.
In the same context should be called to determine the progress window function. This function is called Scrool Handler. It has two main components: top elements (element distance from the top of the window) and ensure its automatic redial using set Timeout (for more details see email REPORT No. 16, “JavaScript – Toolkit “). Running page can be obtained by property (window object – check email REPORT No. 17 – “JavaScript – the object of) pageYOffset for Netscape and IE by property (document object), scroll Top. On the interval set to restore function, depends on the effect you want – “chase” or a sudden smoother (lower values for timeouts). A moderate value is 150 (milliseconds). Note: SD is a global variable that keeps the last offset (displacement) of the page.
Rather it is to make the menu. An example of a page that contains JavaScript code and the main elements mentioned HTML you can see by following the link below. One I noticed: using tag <spacer> specific (Netscape) Netscape is necessary because otherwise “cut” the last line of the layer “Content”. I do not know exactly why. Probably no Netscape programmers know him too well. However the tag is ignored (not produce any effect) by Internet Explorer.
Testing and further development
Testing is important. I guess you know. Try the code on as many versions of both browsers. Otherwise it could have surprise – see the need to use <spacer> site.
The code presented will provide only the starting point. Although it can be used successfully in its present form, it is meant especially the development of more complex applications. Or can be adapted to drop a logo, as often is found on the web. Whatever its future usefulness, I hope it will be found instructive.
It may happen, when creating a web interface, you might want to be part of the permanent attention of users / visitors. Whether it’s company logo on a menu or navigation is useful as this item to remain in a person’s visual field, even if it runs windows (browser in this case). The solution we chose do I use obviously JavaScript.
In the interest of clarity and exposure to not lose myself in generalities, I present a concrete implementation, and we used it to create a website. It is a navigation, which “follows” the visitor when it runs the page. And, as I mentioned, it is not using frames but JavaScript. Because, you see, position is not static, but is calculated as the performance of the page.
Above all, it raises a natural question is “what you build here?” Most often such a factor is called sliding toolbar / menu. Translation (and adaptation) would be my floating menu. And I think the words and behavior to cover this item.
I can not help but express and one of my biggest regrets. You can find and you: the actual implementation of a floating menu is not very complicated. Unfortunately, because of incompatibilities between browsers, ensuring framework requires at least as much work … and a lot more testing. Anyway, this is how we adapt working conditions.
Design
After we reached the following configuration design of the window:
As you can see, the menu will be displayed in the left and the right content. This banner is optional, as is optional, and adding a banner at the bottom of the page. If you’re wondering why I somehow express stipulated in this banner, the answer is simple: it can serve both to identify more clearly the current page (the page may include name, section), as well as for adding advertising banners (requirement become almost standard in today’s Web economizer).
For the page to be displayed consistently on different resolutions, all items will be centered in the browser window. Dimensions will be so calculated that the page does not require horizontal scrolling even at 640×480 resolution. That being established, here we go.
Achievement
Browser Identification is simple, with two lines of code:
isIE = (document.all)? 1: 0;
isNS = (document.layers)? 1: 0;
It is sufficient identification, for not using ultra-specific elements, which are known to pose problems in different versions of browsers. So we are not interested in the actual version (at least so long as it is over three, for Netscape and Internet Explorer over 4).
Following code sequence is a very interesting and useful (you should not praise your code, but really think is a great thing). What’s the use? Well, when determining the window – attention, useful (it can be displayed elements) of – the browser. Sequence code for Netscape is
awidth = window.innerWidth;
aheight = window.innerHeight;
and Internet Explorer:
awidth = document.body.clientWidth;
aheight = document.body.clientHeight;
Determination should be made after the document was loaded, but before displaying on screen elements. You may wonder how can this be achieved – charging document, but not showing the page elements. Just do the following: positioning of page elements, referred to as Title, Menu and Content in “containers”
and declare them as hidden using CSS (Cascading Style Sheets).
Note: You will see the code page value of 600 (pixels) that represents the whole width of page elements. More elegant is to declare a constant with this value, say mwidth, which refer to a later (if you remember, by & (mwidth) – the HTML and simply mwidth in scripts) .
After creating layer (not to be confused with specific elements of Netscape – are also called layers and elements is <div>) they must be properly displayed and positioned on the page. For this we defined a function ShowPage (), called from the same event on load. The main thing to realize is altering the function of layer properties, all properties related to CSS.
In the same context should be called to determine the progress window function. Scrool Handler function is called (). It has two main components: top elements (element distance from the top of the window) and ensure its automatic redial using set Timeout (for more details see email REPORT No. 16, “JavaScript – Toolkit “). Running page can be obtained by property (window object – check email REPORT No. 17 – “JavaScript – the object of) pageYOffset for Netscape and IE by property (document object), scroll Top. On the interval set to restore function, depends on the effect you want – “chase” or a sudden smoother (lower values for timeouts). A moderate value is 150 (milliseconds). Note: SD is a global variable that keeps the last offset (displacement) of the page.
Rather it is to make the menu. An example of a page that contains JavaScript code and the main elements mentioned HTML you can see by following the link below. One I noticed: using tag <spacer> specific (Netscape) Netscape is necessary because otherwise “cut” the last line of the layer “Content”. I do not know exactly why. Probably no Netscape programmers know him too well. However the tag is ignored (not produce any effect) by Internet Explorer.
Testing and further development
Testing is important. I guess you know. Try the code on as many versions of both browsers. Otherwise it could have surprise – see the need to use <spacer> site.
The code presented will provide only the starting point. Although it can be used successfully in its present form, it is meant especially the development of more complex applications. Or can be adapted to drop a logo, as often is found on the web. Whatever its future usefulness, I hope it will be found instructive.
