?
Solved

Floating Layers

Posted on 2003-02-27
15
Medium Priority
?
283 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

 
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

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

770 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