scrolling a text when mouse moves over it?

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

FrontPage: I want a textbox with only the upper part visible. When the mouse
moves over the text box, the rest of the text should become visible, either
by scrolling down, or by just enlarging the size of my text box. How do I do
this?
 
This would require expert HTML, CSS and JavaScript programming skills, and a
week or so of work.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.
 
This won't work with a "mouse over effect", but it will work if you tell them
to scroll down:

<div align="left" style="border-style:solid; border-width:2px;
border-color:blue; background-repeat: no-repeat; overflow-y:scroll;
width:400px; height:300px">
Scroll down...<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Text you want them to see</div>
 
LaNina said:
FrontPage: I want a textbox with only the upper part visible. When
the mouse moves over the text box, the rest of the text should become
visible, either by scrolling down, or by just enlarging the size of
my text box. How do I do this?

Well, this would be a start

<html>
<head>
<script type="text/javascript">
function hideit(elid,hide)
{
if (hide != "show")
document.getElementById(elid).style.display="none"
else
document.getElementById(elid).style.display="block"
}
</script>
</head>
<body>

<div id="part1" onmouseover="hideit('part2','show')">
This is part 1 of the code
</div>

<div id="part2" style="display:none" onmouseout="hideit('part2','hide')">
This is part 2 of the code<br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah
</div>
</body>
</html>

It isn't a textbox, but just two sections of code.

Move the mouse over part1 and part2 appears. Bring the mouse down over part2
and when it moves off it, part2 disappears.

You can experiment with this as you wish.
For example, add a box around each of the two parts to make it clearer which
is which.
Or make the two parts two rows of a table.
There are many possibilities.

Have fun
 
Great! Thanks a lot Trevor, exactly what I was looking for!
Bit puzzeling though, just started FrontPageing two days ago and don't know
nothing about html langauge.
If I want my text fields just to start a bit lower on the page, so I can add
other stuff above, how do I do this?
And a detail (just to get to understand a little what I am doing): Where do
</div> and </p> stand for?

Thanks!
 
LaNina said:
Great! Thanks a lot Trevor, exactly what I was looking for!
Bit puzzeling though, just started FrontPageing two days ago and
don't know nothing about html langauge.
If I want my text fields just to start a bit lower on the page, so I
can add other stuff above, how do I do this?
And a detail (just to get to understand a little what I am doing):
Where do </div> and </p> stand for?

Thanks!

Hi La Nina,
Yes, if you haven't yet delved into HTML, then it can be a bit daunting.

What FP does is create HTML. It has many bells and whistles, but that is is
purpose.

Sooner or later, every user of FP will have to know a little about HTML. A
year ago I knew nothing, now I can actually converse with the experts here
about aspects of the language. If you just take it steadily, it will soon
become easier.

To start the text fields lower on the page, just place other stuff above it.
This can even be nothing, just a series of line breaks <br><br><br><br>. In
FP you do this by pressing enter.
This is not the best way. You will usually want to place some meaningful
text, images whatever.

You can also position the <div>. I am not sure that this is the best way
either- the experts say to beware.
However, this is how to do it:
In the <head> section, define a class - note the leading dot(.) in .lower
<style type ="text/css">
..lower {position: absolute; top: 30%}
</style>

Then place this in the HTML in the <body>
<div class = "lower">
........
</div>

Everything between <div class = "lower"> and </div> will then start lower
down the page - at 30% of your browser height.

The reason to beware is that absolute positioning means that this division
wil start at this position even if you have other text which would be there.
The absolutely positioned division will go on top of the other stuff.

To access the HTML, use the HTML or Code view (I think different versions of
FP have different names for these tags). You will see the HTML displayed and
you can edit it to your hearts' content. This is how you can add stuff to
the <head> or make a <div> in the <body> section

To answer your specific questions.
Each tag must be opened and closed.
So a <div> tag must be closed by a </div>
<div> is the start of a division, </div> is the end of the division
<p> is the start of a paragraph, </p> is the end of the pararaph

Some tags are self-closing, e.g. the line break tag <br>.
But XHTML, which is a stricter version of HTML, insists that even
self-closing tags be closed.
For example, a line break is written as <br /> - note the slash (/) before
the ">".
In XHTML, other tags also have the slash to close them e.g. <img
src="imges/pic1.jpg" alt="" height= "500px" width="500px" />
So I get into the habit of doing this anyway - it doesn't hurt and makes
conversion to XHTML easier.

P.S.
Here is some amended code which adds a style to the div so that you can see
its borders.
I think this is closer to the idea of a tetxbox which you first asked for
<html>
<head>
<style type="text/css">
div {width:50%;border:1px black inset;}
</style>
<script type="text/javascript">
function hideit(elid,hide)
{
if (hide != "show")
document.getElementById(elid).style.display="none"
else
document.getElementById(elid).style.display="block"
}
</script>
</head>
<body>
<div id="part1" border="10px" onmouseover="hideit('part2','show')">
This is part 1 of the code
</div>
<div id="part2" border="1px" style="display:none"
onmouseout="hideit('part2','hide')">
This is part 2 of the code<br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
</div>
</body>
</html>
 
Hi Trevor, Thanks a lot, you're doing me great favours!
It worked, I lowered the text box, although I'm still working on it a bit
further. Maybe I'll come back to this later (if I understand better what I'm
doing). Meanwhile I encountered a new question. Don't know if you're still
there and available?

When I move my mouse over the first part of the text box, the second part
apears, just as I want it. Beneath this text, I've been putting more
elements, under which some pictures on one hand and some drawn elements like
arrows on the other. In the preview, the pictures, I guess because they're in
line with the text, nicely move up and down with the apearance/disapearance
of the second text box. But the arrows of course don't. They are and stay
below all the time. Is there a way to make them move too, or am I making
things complicated? Grouping everything is at first sight not possible, and
secondly not whishable, as I want to add some links to my pictures.
Uf, hope I make myself clear. But you're right, it's quite fun, and not too
hard.
You know anything on this?
big thanks and big greetings,
and btw, the name is just Nina :-)
Nina
 
LaNina said:
Hi Trevor, Thanks a lot, you're doing me great favours!
It worked, I lowered the text box, although I'm still working on it a
bit further. Maybe I'll come back to this later (if I understand
better what I'm doing). Meanwhile I encountered a new question. Don't
know if you're still there and available?

When I move my mouse over the first part of the text box, the second
part apears, just as I want it. Beneath this text, I've been putting
more elements, under which some pictures on one hand and some drawn
elements like arrows on the other. In the preview, the pictures, I
guess because they're in line with the text, nicely move up and down
with the apearance/disapearance of the second text box. But the
arrows of course don't. They are and stay below all the time. Is
there a way to make them move too, or am I making things complicated?
Grouping everything is at first sight not possible, and secondly not
whishable, as I want to add some links to my pictures.
Uf, hope I make myself clear. But you're right, it's quite fun, and
not too hard.
You know anything on this?
big thanks and big greetings,
and btw, the name is just Nina :-)
Nina


Hi Nina,
This is a bit of a "Hmmm!"

I am no expert, just learning and feeling my way as I go - now for nearly 12
months.

I wonder why the arrows don't stay in the hidden division?
Are they between <div class = "lower"> and </div> ?
It *should* not be complicated to do what you want.

Actually, I am not quite clear.
Why is grouping not wishable?
How are you trying to achieve this grouping?
Grouping things should not have any affect in whether you can add links to
the pictures or not.

If you have the site on the web, posting there URL here can help us to help
you. As a matter of interest, I have had some incredible help from an MVP
here (Kevin Spencer) who analysed my code, said where it was not correct and
made great suggestions as to how to get it right.

I am not saying I can do the same, but if you have a URL, please post it (as
in my sign-off) and I will have a look
 
Hi Trevor,
I don't have an URL yet. When I finish this thing (as soon as possible I
hope, at least a draft version) I send it to our central office, and they'll
take care of everything, putting it on the web and such.
But I do can send you the whole stuff in an email if that helps. As you
which, I don't mean to overburden you either. In any case, grouping doesn't
seem possible, because the pictures are seen as text, I think. Ow boy, whish
I knew a little more about it...
An other question: the size of a web site, does it also depend on the number
of internal links and pages, or just on the size of the content (eg. pictures
and such)? Matter of keeping it a bit moderate.

Thanks, take care,
Nina
 
LaNina said:
Hi Trevor,
I don't have an URL yet. When I finish this thing (as soon as
possible I hope, at least a draft version) I send it to our central
office, and they'll take care of everything, putting it on the web
and such.
But I do can send you the whole stuff in an email if that helps. As
you which, I don't mean to overburden you either.

I could have a look at it if it isn't too large. But beware I have less than
a year's experience
In any case, grouping doesn't seem possible, because the pictures are seen
as
text, I think.

I am not sure why pictures are seen as text. Possibly the links are
incorrect. And again, what sort of grouping do you mean?
Ow boy, whish I knew a little more about it...
An other question: the size of a web site, does it also depend on the
number of internal links and pages, or just on the size of the
content (eg. pictures and such)? Matter of keeping it a bit moderate.

It the size of the entire website that matters. Look at the folder where the
website is stored on your hard disk and use Windows Explorer to see how much
space it takes. This is what matters. And in any case, do you know the limit
of your supplier? If you do, I guess you should keep it below that, or maybe
they charge per MB. My server is just a personal site with my Email/Internet
provider and is quite limited. But I have quite a few photos on it - over
100.
 
Back
Top