Layer to stay on the page as you scroll down
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
Re: Layer to stay on the page as you scroll down
"MrsMac2000" <MrsMac2000 [at] discussions.microsoft.com> wrote in message
news:4CAC462C-706B-4A97-A483-91D1183EA7D9 [at] microsoft.com...
> 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
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)
--
Trevor Lawrence
Canberra
Microsoft MVP - FrontPage
MVP Web Site http://trevorl.mvps.org
Re: Layer to stay on the page as you scroll down
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?
"Trevor Lawrence" wrote:
>
> "MrsMac2000" <MrsMac2000 [at] discussions.microsoft.com> wrote in message
> news:4CAC462C-706B-4A97-A483-91D1183EA7D9 [at] microsoft.com...
> > 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
>
> 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)
> --
> Trevor Lawrence
> Canberra
> Microsoft MVP - FrontPage
> MVP Web Site http://trevorl.mvps.org
>
>
>
>
>
>
>
>
Re: Layer to stay on the page as you scroll down
"MrsMac2000" <MrsMac2000 [at] discussions.microsoft.com> wrote in message
news:345ECCBC-9D44-4179-86E7-04E0131F8BAC [at] microsoft.com...
> 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?
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>
<span onclick="loadIframe('Text')"><u>Display/Hide Text</u></span>
Display/Hide Text
<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
Re: Layer to stay on the page as you scroll down
Thanks Trevor, I will give that a go....
"Trevor Lawrence" wrote:
>
> "MrsMac2000" <MrsMac2000 [at] discussions.microsoft.com> wrote in message
> news:345ECCBC-9D44-4179-86E7-04E0131F8BAC [at] microsoft.com...
> > 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?
>
> 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>
> <span onclick="loadIframe('Text')"><u>Display/Hide Text</u></span>
> Display/Hide Text
>
> <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
>
>
>