Layer to stay on the page as you scroll down

M

MrsMac2000

I've inherited our internal website and another developer has created a page
with layers, (apologies for not being very technical, my experience with
HTML is limited)

1) I've worked out roughly how to do layers and I can use them when you
hover over text and it is hyperlinking to the layer but the layer disappears
when you use the scrollbar to move down the page. How can I get the layer to
stay on the page but allow me to read all of it? so it looks like a new HTML
page rather than a layer
 
T

Trevor Lawrence

MrsMac2000 said:
I've inherited our internal website and another developer has created a
page
with layers, (apologies for not being very technical, my experience with
HTML is limited)

1) I've worked out roughly how to do layers and I can use them when you
hover over text and it is hyperlinking to the layer but the layer
disappears
when you use the scrollbar to move down the page. How can I get the layer
to
stay on the page but allow me to read all of it? so it looks like a new
HTML
page rather than a layer
Click to expand...

Why not replace the layer with an HTML page. (Perhaps this is what you are
thinking)

For the layer to appear when you hover, there would have to be an
"onmouseover=".somewhere

If you change this to be code which opens a new page, the new page will
still be open when you scroll. Its title should appear in your toolbar and
clicking here will redisplay it. It can be closed by the close box (X at top
r.h.) See my reply to "Thumbnail opening to image in popup screen". This is
dated 16/01/200812:00 PM in my newsreader. It may be a bit different in
yours (especially if you use US date)

To use this code you also need the script for spawnJimcoPopup. This can be
added anywhere before </head>
<script type="text/javascript">
function spawnJimcoPopup(url, name, options, h, w, x, y, scaleType)
{
var newWindow
if (scaleType == 'percent')
{ h = (h * screen.availHeight) / 100
w = (w * screen.availWidth) / 100 }
if (x == 'center')
x = (screen.availWidth - w) / 2
if (y == 'center')
y = (screen.availHeight - h) / 2
options += ',width=' + w + ',height=' + h
+ ',left=' + x + ',top=' + y
newWindow = window.open(url, name, options)
newWindow.focus()
}
</script>

The onmouseover within an <a> tag would look something like
<a href='' target="_self"
onmouseover="spawnJimcoPopup
( 'text1.html', '_blank',
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, 300, 375, 'center', '0', 'pixel') ;return false;">
<img border="0" src="image1.jpg" >
</a></p>

where the line "<img......" can be an image or text or whatever you want
and where text1.html contains your text to be displayed omouseover

The size and position of the window depend on parameters h (height) w
(width) x (horizontal position) y (vertical position)
 
M

MrsMac2000

Hi Trevor, I did what you suggested and replaced the layer with a HTML page
which worked much better!!
I do however have another page which has headings in and I would like to be
able to click on the heading and for it to expand to show a small section of
text below ( not in a layer) and then you can collapse the text again by
clicking on the heading - struggling to do this..... can you advise?
 
T

Trevor Lawrence

MrsMac2000 said:
Hi Trevor, I did what you suggested and replaced the layer with a HTML
page
which worked much better!!
I do however have another page which has headings in and I would like to
be
able to click on the heading and for it to expand to show a small section
of
text below ( not in a layer) and then you can collapse the text again by
clicking on the heading - struggling to do this..... can you advise?
Click to expand...

Well, this can be done with an iframe and CSS to hide it until a button or
text is clicked

Here is the HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>A test page</title>
<style type="text/css">
..c1 {
display: none;
height: 100px;
width: 200px;
overflow: auto;
}
</style>

<script type ="text/javascript">
function loadIframe(id)
{
var x = document.getElementById(id)
x.style.display = (x.style.display != 'block') ? 'block' : 'none'
}
</script>
</head>

<body>
<div align="center">
<button onclick="loadIframe('Text')">Display/Hide Text</button><br />
<span onclick="loadIframe('Text')"><u>Display/Hide Text</u></span><br />
<a href="#" onclick="loadIframe('Text')">Display/Hide Text</a>

<iframe class="c1" id="Text" src="text.html"></iframe>
</body>
</html>

I have shown threee ways of showing the text - a button, underlined text
and an <a> tag. The cursor looks different as you mouse over each.

Choose one which suits you (or there are other ways)

The text that you want to display is in another file "text.html". This
enables you to alter the text without going into the main file.
This is "text.html"
<html>
<head>
</head>
<body>
This is test.html
</body>
</html>
 
M

MrsMac2000

Thanks Trevor, I will give that a go....

Trevor Lawrence said:
Well, this can be done with an iframe and CSS to hide it until a button or
text is clicked

Here is the HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>A test page</title>
<style type="text/css">
..c1 {
display: none;
height: 100px;
width: 200px;
overflow: auto;
}
</style>

<script type ="text/javascript">
function loadIframe(id)
{
var x = document.getElementById(id)
x.style.display = (x.style.display != 'block') ? 'block' : 'none'
}
</script>
</head>

<body>
<div align="center">
<button onclick="loadIframe('Text')">Display/Hide Text</button><br />
<span onclick="loadIframe('Text')"><u>Display/Hide Text</u></span><br />
<a href="#" onclick="loadIframe('Text')">Display/Hide Text</a>

<iframe class="c1" id="Text" src="text.html"></iframe>
</body>
</html>

I have shown threee ways of showing the text - a button, underlined text
and an <a> tag. The cursor looks different as you mouse over each.

Choose one which suits you (or there are other ways)

The text that you want to display is in another file "text.html". This
enables you to alter the text without going into the main file.
This is "text.html"
<html>
<head>
</head>
<body>
This is test.html
</body>
</html>

--
Trevor Lawrence
Canberra
Microsoft MVP - FrontPage
MVP Web Site http://trevorl.mvps.org
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Image change in layer 1
Layer Centerting on Page 11
Need Help with the " Insert Layer" function 1
Working on birthday "book" for my wife and having layout/editing trouble 0
drop down submenu 2
First layer runs off bottom of page in Preview-Frontpage?? 1
Linking from one page to a specific spot on the next? 5
Force layers to stay in top/bottom 4

Top