Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Floating Layers

Posted on 2003-02-27
15
Medium Priority
?
288 Views
Last Modified: 2008-03-10
Hey, Does anyone know any good code that will allow me to have a floating side layer at the edge of my website?
I mean like a menu that will follow the viewer when he scrolls up and down the page. Ive already got one working but it appears to be only compatible with Windows Explorer 4+ and has other problems. Any suggestons, links etc ? Thanx

- Emmel
0
Comment
Question by:Emmel
  • 8
  • 7
15 Comments
 
LVL 1

Expert Comment

by:zerofill
ID: 8032976
Check this:
http://javascript.internet.com/bgeffects/persistent-layer.html

The author says that it is Netscape 6.0 compatible but it works as well under IE6.0. Don't know about IE4+ but I think it will work fine
0
 
LVL 1

Author Comment

by:Emmel
ID: 8034018
Hmm.. thats pretty good but have u any ideas on how to move it. Because even if you move the layer when you view the page it jumps back to its 'set' location. Any ideas ?
Thanx

-emmel
0
 
LVL 1

Expert Comment

by:zerofill
ID: 8035547
I don't inderstand what do you mean. Explain in more details.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:Emmel
ID: 8036177
k, sorry. When i copy the code into a page you can edit what is actually in the layer i.e change the text etc... But you 'cant' move the 'position' of the flaoting layer. The floating layer stays in the centre wot eva. I want the later to be postioned at the left hand side of the page. Look at the code and try it yourself. So u understand. thanx

- Emmel

If i still havent explained very well jus tell me again, becuase i really want this problem solving soon.
0
 
LVL 1

Author Comment

by:Emmel
ID: 8036181
k, sorry. When i copy the code into a page you can edit what is actually in the layer i.e change the text etc... But you 'cant' move the 'position' of the flaoting layer. The floating layer stays in the centre wot eva. I want the later to be postioned at the left hand side of the page. Look at the code and try it yourself. So u understand. thanx

- Emmel

If i still havent explained very well jus tell me again, becuase i really want this problem solving soon.
0
 
LVL 1

Expert Comment

by:zerofill
ID: 8036952
I think I understand.
Go to about line 43 of this script:

floatLyr = new layerObject('floatLayer', pageWidth * .5);

change  pageWidth * .5 with  pageWidth * .0 or  pageWidth * .1 or ... whatever you want. This moves the layer from left to right depending on your page width. If you want to position the layer absolutely try this:
floatLyr = new layerObject('floatLayer', 10);
This means that the layer will be positioned 10 pixels from left margin of the browser
I hope this will help
0
 
LVL 1

Accepted Solution

by:
zerofill earned 320 total points
ID: 8036975
I forgot to mention
At about line 20:
var topMargin = 100;
you can specify vertical position
If you want the layer to be on top change the line to
var topMargin = 0;
0
 
LVL 1

Author Comment

by:Emmel
ID: 8037021
Wow, perfect, thats just what i meant. Cheers thats solved a huge problem. THANKYOU
0
 
LVL 1

Author Comment

by:Emmel
ID: 8044147
Sorry about this but ive just relised another problem. Is this topic closed or can u still answer my question ?
0
 
LVL 1

Expert Comment

by:zerofill
ID: 8044771
No problem, ask
0
 
LVL 1

Author Comment

by:Emmel
ID: 8045033
Thanx, anyhow the layer works fine and is compatible with most browsers but now ive managed to find another problem. So... this is too hard to explain so please take a look at my site.

http://www.emmel.f2o.org/

The problem is that when you resize the page the layer is in the wrong place. If you have IE and click favorites you will see what i mean, the layer becomes way out of place. i could solve the problem by simply aligning the whole thing to the left (i.e like ive done on this test http://emmel.f2o.org/test/ ) but i prefer it centred, i think it looks better. So have you got any suggestions to overcome this problem? thanx again

- Emmel
0
 
LVL 1

Author Comment

by:Emmel
ID: 8045044
Thanx, anyhow the layer works fine and is compatible with most browsers but now ive managed to find another problem. So... this is too hard to explain so please take a look at my site.

http://www.emmel.f2o.org/

The problem is that when you resize the page the layer is in the wrong place. If you have IE and click favorites you will see what i mean, the layer becomes way out of place. i could solve the problem by simply aligning the whole thing to the left (i.e like ive done on this test http://emmel.f2o.org/test/ ) but i prefer it centred, i think it looks better. So have you got any suggestions to overcome this problem? thanx again

- Emmel
0
 
LVL 1

Expert Comment

by:zerofill
ID: 8046816
Your document structure looks like this:
<BODY lang=en topMargin=0
onload="var SymTmpWinOpen = window.open; window.open = SymWinOpen; start();; window.open = SymTmpWinOpen;">
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 width=700 align=center
border=1>
......
</table>
</body>

The floating layer depends on browser borders i.e it is always 158 pixels from left border of the browser. In different resolutions the space between this browser and the layer is different. In order to fix this you must create another layer in which must be all your html stuff including the main table. Here is an exaple code:

<BODY lang=en topMargin=0
onload="var SymTmpWinOpen = window.open; window.open = SymWinOpen; start();; window.open = SymTmpWinOpen;">
<div id="ConstructionLayer" style="position:absolute; width:700; z-index:101">
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 width=700 align=center
border=1>
......
</table>
</div>
</body>


Note the exact structure:
<body>
   <div>
      <table>
      ....
      </table>
   </div>
</body>

In this case the floating layer depends on borders of the ConstructionLayer.
I hope you understand. I have not tested this code and may have errors but the theory is right. Just play around with layers and you will do it
Good luck
0
 
LVL 1

Author Comment

by:Emmel
ID: 8048822
Thanx, but are you saying to put the all the tables inside a seperate layer? I copied the code you gave me and the the page is now aligned to the left. Sorry if you didnt mean for me to carry on replying but i just want to clarify your suggestions.
Thanx once more, Peace

- Emmel

- Ive uploaded the new page with your added so have a look at what i mean, i tried changeing the 'position' tag to middle but it didnt do anything.

http://emmel.f2o.org
0
 
LVL 1

Expert Comment

by:zerofill
ID: 8048986
Yes you have to put all the tables in separete layer. About the fact that all the stuff is aligned left, I've told you that this code is only theory. You have to play with layers and test their behaviours. I dont have WYSIWYG editor at this moment and it is very hard to me to test DHTML with simple text editors. Just have some time and you will do it. It is not so hard to center something.
Good luck
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Why WooCommerce is one of the majorly favored choices when it comes to having an eCommerce store. This article will acquaint you with some reasons that I believe make it one of the best eCommerce platforms available.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question