getting a mouseover on a 'div'

F

Fritz

Hi,
I've started doing html and CSS for the first time and in the
process of testing what I want, I have this in the html:

<div id="My_Menu">
<a href="">First</a><br />
<a href="">Second</a><br />
<a href="">Third</a><br />
</div>

This in an attached style sheet:

#My_Menu{
background-color: #000000;
padding: 10px;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
position: absolute;
top: 150px;
left: -60px;
width: auto;
height: auto;
}
div a {color:#FFFFFF}

And in a .js page I have a routine that will (if I ever get it worked
out) push this div in and out from the left side. So, I tried
"onmouseover()" but in the documentation I have this only works with
anchors. And I'm not sure how to go about applying it to a div.

Does anyone have an idea how to wrap this div in something so as to be
able to use the mouseover to initiate a script?

I hope it's simple.
Thanks.
f.
 
D

David Dorward

Fritz wrote:

I've started doing html and CSS for the first time and in the
process of testing what I want, I have this in the html:

<div id="My_Menu">
<a href="">First</a><br />
<a href="">Second</a><br />
<a href="">Third</a><br />
</div>
Click to expand...

A menu is a list of links, why not let the markup reflect that?
http://css.maxdesign.com.au/listamatic/
And in a .js page I have a routine that will (if I ever get it worked
out) push this div in and out from the left side.
Click to expand...

That sounds very annoying.
So, I tried "onmouseover()" but in the documentation I have this only
works with anchors. And I'm not sure how to go about applying it to a div.
Click to expand...

Pretty much any element can support an onmouseover handler, <div> and <ul>
included. Perhaps your documentation is getting confused with the lack of
support in MSIE for the CSS pseudo-class :hover on non-links?
 
T

Toby Inkster

Fritz said:
And in a .js page I have a routine that will (if I ever get it worked
out) push this div in and out from the left side. So, I tried
"onmouseover()" but in the documentation I have this only works with
anchors. And I'm not sure how to go about applying it to a div.
Click to expand...

<div id="My_Menu" onmouseover="foo();" onmouseout="bar();">
...
</div>

or even better:

<div id="My_Menu">
...
</div>

and include into the Javascript:

var mydiv = document.getElementById("My_Menu");
mydiv.onmouseover = foo;
mydiv.onmouseout = bar;

However, I think you'll find this:

<div id="My_Menu">
<a href="">First</a><br />
<a href="">Second</a><br />
<a href="">Third</a><br />
</div>

is better marked up as this:

<ul id="My_Menu">
<li><a href="">First</a></li>
<li><a href="">Second</a></li>
<li><a href="">Third</a></li>
</ul>
 
F

fritz

David said:
Fritz wrote:





A menu is a list of links, why not let the markup reflect that?
http://css.maxdesign.com.au/listamatic/
Click to expand...

Thank you Mr. Dorward. You are correct. When it is pointed out it makes
sense.


That sounds very annoying.
Click to expand...


Actually, when I showed a site to the group that our site will
represent, they loved the idea. Because the list of options on this menu
will be few, it isn't necessary for it to be spread out across the page
at the top and bottom. It will merely take up the left 20-30 pixels and
(I hope) glide up and down so as to always be slightly visible and then
come out to full size when needed. The site will hose long (again I hope
scholarly) pages where the scrolling needed to find the top and bottom
is quite a jump.
Pretty much any element can support an onmouseover handler, <div> and <ul>
included. Perhaps your documentation is getting confused with the lack of
support in MSIE for the CSS pseudo-class :hover on non-links?
Click to expand...

I really must look at this again. ??

Thanks for the reply!

f.
 
F

fritz

Toby said:
Fritz wrote:




<div id="My_Menu" onmouseover="foo();" onmouseout="bar();">
...
</div>
Click to expand...


This is what I tried. Methinks that I had better go look at the
javascript as the culprit.
or even better:

<div id="My_Menu">
...
</div>

and include into the Javascript:

var mydiv = document.getElementById("My_Menu");
mydiv.onmouseover = foo;
mydiv.onmouseout = bar;
Click to expand...


OK, here is something that is new to me. Encapsulating the
getElementById("ID") into a variable. This makes writing the stuff a lot
easier. Thanks!
But shouldn't it be written:
mydiv.onmouseover=foo(); ?with the ()?
However, I think you'll find this:

<div id="My_Menu">
<a href="">First</a><br />
<a href="">Second</a><br />
<a href="">Third</a><br />
</div>

is better marked up as this:

<ul id="My_Menu">
<li><a href="">First</a></li>
<li><a href="">Second</a></li>
<li><a href="">Third</a></li>
</ul>
Click to expand...
Yes. As Mr. Dorward pointed out, having it in a list is much more
straight forward than using the line breaks.

BTW, I picked up a book to guide me that is a few years old and the
question I have is on these comments:
Quote:
All empty elements, such as img and hr require either an end tag or must
include a forward slash immediately before the right angle bracket.
Unquote:
I don't understand why an img tag is considered an empty element? And
I see in examples on the web, this being used in things such as this:
<script... > </script /> Or maybe it was a link to a style, but why?
Thanks for all the help.

f.
 
D

David Dorward

fritz said:
BTW, I picked up a book to guide me that is a few years old and the
question I have is on these comments:
Click to expand...
Quote:
All empty elements, such as img and hr require either an end tag or must
include a forward slash immediately before the right angle bracket.
Click to expand...

If you are serving XHTML as HTML then that isn't exactly correct. Empty
elements must use the forward slash self closing technique (not the sperate
end tag), and the slash must be preceded by a space.

<br> - HTML
<br/> - XHTML
<br></br> - XHTML
Unquote:
I don't understand why an img tag is considered an empty element?
Click to expand...

It has no content.

And I see in examples on the web, this being used in things such as this:
<script... > </script />
Click to expand...

That's just plain wrong.
Or maybe it was a link to a style, but why?
Click to expand...

<link> nothing goes here </link>

http://w3.org/TR/xhtml1/ is probably worth a read. You might be better off
going back to HTML 4.01 though.
 
F

fritz

Toby said:
However, I think you'll find this:

<div id="My_Menu">
<a href="">First</a><br />
<a href="">Second</a><br />
<a href="">Third</a><br />
</div>

is better marked up as this:

<ul id="My_Menu">
<li><a href="">First</a></li>
<li><a href="">Second</a></li>
<li><a href="">Third</a></li>
</ul>
Click to expand...

This brings up another question. By removing the div tag, will this
appear on the page? I am using the idea of a div called content just
below the body tag that holds all the content of the page. I then used a
separate div for stuff that would be moved off page. So the code below
would be just as valid, by giving the list a name and then positioning
it where one wishes. IE:

<body>
<div id="margin30">

............
...........
</div> <!-- end of all content -->

<ul id="My_Menu">
<li><a href="">First</a></li>
<li><a href="">Second</a></li>
<li><a href="">Third</a></li>
</ul><!-- end of the menu stuff -->

This way the menu has a 30 pixel free area to move up and down?
</body>

f.
 
T

Toby Inkster

fritz said:
But shouldn't it be written:
mydiv.onmouseover=foo(); ?with the ()?
Click to expand...

Nope. If you include the parentheses, the function will be evaluated then
and there -- when the event assignment is being made, rather than when the
event actually happens.
 
F

fritz

David said:
If you are serving XHTML as HTML then that isn't exactly correct. Empty
elements must use the forward slash self closing technique (not the sperate
end tag), and the slash must be preceded by a space.

<br> - HTML
<br/> - XHTML
<br></br> - XHTML
<br /> - XHTML which may be served with the text/html content type.
Click to expand...

So, the key is the dtd? Once one uses the XHTML dtd then one must
either use an ending tag or the 'self closing' technique of a space and
forward slash.
That's just plain wrong.


<link> nothing goes here </link>
Click to expand...

So the definition of an "empty element" is: It ain't got no text in it!

http://w3.org/TR/xhtml1/ is probably worth a read. You might be better off
going back to HTML 4.01 though.
Click to expand...

Well, I guess that I could but the book I have says the following:
Quote:
If you take comfort in having your source code successfully pass XHTML
validation, you can specify the XHTML document type at the top of your
documents. .........and later....But even if you are not overly
concerned with following the XHTML recommendation, you should
nevertheless gravitate toward it's formatting requirements; they will
become the norm........
Unquote:

I have all the time in the world to do this. Well, not that much,
but I do have time to learn at my own pace and so I thought, why not do
it right? Having polled the group, all have modern browser versions. I
am using FF as the model. And as a suggestion from someone else got the
'Tidy' extension which helps.

thanks!

f.
 
F

fritz

Toby said:
fritz wrote:




Nope. If you include the parentheses, the function will be evaluated then
and there -- when the event assignment is being made, rather than when the
event actually happens.
Click to expand...

I guess I don't quite see it. If the event for the function (mouseover)
is hidden in the javascript page how can it work? I thought that one had
to have the function called out in the html page...

div id="menu" onmouseover(), etc.

You said:
or even better:
<div id="My_Menu">
...
</div>
and include into the Javascript:
var mydiv = document.getElementById("My_Menu");
mydiv.onmouseover = foo;
mydiv.onmouseout = bar;

Wouldn't the above (var mydiv...etc) have to be enclosed in a function
on the js page. Then *that* function called?

Do you mean that document.getElementById("menu").onmouseover=foo;

sitting in the js page without being in another function is just waiting
for the mouseover event? If so that simplifies things even more.

Sorry, I'm a little confused.

f.
 
A

Andy Dingley

That's just plain wrong.
Click to expand...

No, it's essential with IE6. If you use <script src="foo" /> then the
page vanishes, because IE treats the whole eleemnt as the opening tag of
<script> </script> anyway
 
A

Andy Dingley

This:

<body>

<!-- A short little menu -->
<ul id="My_Menu">
<li><a href="">First</a></li>
<li><a href="">Second</a></li>
<li><a href="">Third</a></li>
</ul>

<!-- A huge great block of content -->
<div id="margin30">

............
...........
</div>
</body>

is much friendlies to linear devices (like screen readers) and other
non-CSS contexts.


If you want to see why this slide-out menu is so annoying, have a play
with this site:
http://www.lorientrust.co.uk/realworld/events/eventcontence.htm
 
F

fritz

Andy said:
No, it's essential with IE6. If you use <script src="foo" /> then the
page vanishes, because IE treats the whole eleemnt as the opening tag of
<script> </script> anyway
Click to expand...


Here is what I was originally talking about; I just went out and found
an example page that had this:

<link rel="stylesheet" href="/css/navSimple.css" type="text/css" />

and also used it on all of his/her meta tags. I assume now because they
are, in fact, empty elements with no closing tag. The above page was a
dtd of 4.01 transitional. It also used <br/> which is correct according
to my book.


So, you are reinforcing the idea that the this should never be used but
only in the <br /> and other empty elements and then only when under a
dtd defined as XHTML?

f.
 
F

fritz

Andy said:
This:

<body>

<!-- A short little menu -->
<ul id="My_Menu">
<li><a href="">First</a></li>
<li><a href="">Second</a></li>
<li><a href="">Third</a></li>
</ul>

<!-- A huge great block of content -->
<div id="margin30">

...........
..........
</div>
</body>

is much friendlies to linear devices (like screen readers) and other
non-CSS contexts.


If you want to see why this slide-out menu is so annoying, have a play
with this site:
http://www.lorientrust.co.uk/realworld/events/eventcontence.htm
Click to expand...
Egads! OK, I can see why something like that could irritate to say the
least. I can't see the code for that menu but it is obvious that they
are useing <p>'s instead of <br/>s or more properly as you all point
out, an unordered list.

Wow, it takes up almost the whole left side of my 1024x768 screen.
However that is not what I had in mind. That example there is probably
one of the most egregious examples! The one I want to use will be
sooooo..... much smaller and compact. When I get it developed I'll show
you what I mean. Then if you all say it's intrusive I'll go another way.
How's that?

PS: They also forgot the first table row <tr> on the giant table as well
as type definitions in the <script>s. And put in height parameters
without values.

You know, as I look at that static web page the "Lorien Menu" on the
left sort of appears as a big guillotine waiting to descend.

f.
 
T

Toby Inkster

fritz said:
Do you mean that document.getElementById("menu").onmouseover=foo;

sitting in the js page without being in another function is just waiting
for the mouseover event? If so that simplifies things even more.
Click to expand...

=============== script.js ===============
function foo () {
...
}
function bar () {
...
}
function init () {
var m = document.getElementById("menu");
m.onmouseover = foo;
m.onmouseout = bar;
}
window.onload = init;
=========================================

=============== page.html ===============
<script type="text/javascript" src="script.js"></script>
<ul id="menu">
....
</ul>
=========================================

The Javascript file defines a bunch of functions, including one called
"init". It also has a single line outside of all the functions that says
after the page has finished loading, call the "init" function.

This is equivalent to using <body onload="init()">, but it's neater as
it's all contained within the Javascript file. Much like putting all your
styling info in a CSS file is neater than using style="..." attributes
everywhere.

Then the HTML page just links to the script file and doesn't have to have
any of these onload, onmousethis, onmousethat attributes cluttering it up.
 
F

fritz

Toby said:
fritz wrote:




=============== script.js ===============
function foo () {
...
}
function bar () {
...
}
function init () {
var m = document.getElementById("menu");
m.onmouseover = foo;
m.onmouseout = bar;
}
window.onload = init;
=========================================

=============== page.html ===============
<script type="text/javascript" src="script.js"></script>
<ul id="menu">
...
</ul>
=========================================

The Javascript file defines a bunch of functions, including one called
"init". It also has a single line outside of all the functions that says
after the page has finished loading, call the "init" function.

This is equivalent to using <body onload="init()">, but it's neater as
it's all contained within the Javascript file. Much like putting all your
styling info in a CSS file is neater than using style="..." attributes
everywhere.

Then the HTML page just links to the script file and doesn't have to have
any of these onload, onmousethis, onmousethat attributes cluttering it up.
Click to expand...
OK! Let me take this to how I now understand it:

By defining 'window.onload' in the js file, after the html file loads it
calls the init which defines the id of 'menu' as "m"; and points the
onmouseover and mouseout events to the appropriate functions.

So then one could use m as so:
x = m.style.left;
while(x < 200){
x += 1;
etc.}

Not having to write out the document.getElementById("foofoo").etc makes
things much easier.

In a way I guess one could say generally that dynamic html is using the
getElementById statement to do just about anything?

f.
 
T

Toby Inkster

fritz said:
By defining 'window.onload' in the js file, after the html file loads it
calls the init which defines the id of 'menu' as "m"; and points the
onmouseover and mouseout events to the appropriate functions.

So then one could use m as so:
x = m.style.left;
while(x < 200){
x += 1;
etc.}
Click to expand...

Probably not. You'd have to redefine "m" in each function. This is because
of variable scoping -- "m" only has a meaning in the function where it is
originally declared. Of course you can get around this by initially
declaring "m" outside of all the functions.

e.g.
=============== script.js ===============
var m; //declare "m"
function foo () {
// "m" has meaning here
}
function bar () {
// "m" has meaning here
}
function init () {
// "m" has meaning here
m = document.getElementById("menu");
m.onmouseover = foo;
m.onmouseout = bar;
}
window.onload = init;
=========================================

Google for "variable scope" to find out more about the concept of scoping,
or for "variable scope javascript" to find out how the concept applies to
Javascript.
In a way I guess one could say generally that dynamic html is using the
getElementById statement to do just about anything?
Click to expand...

getElementById is a useful method, but getElementsByTagName is also very
handy.

For example, I use this function to grab the page heading from the H1
element at the top of the page, and do something fancy with it:

function doCoolTitle() {
var t = document.getElementsByTagName("H1").item(0).innerHTML;
var u = "http://tobyinkster.co.uk/IMG.cgi?text=" + escape(t);
var i = new Image();
i.src = u;
i.alt = t;
i.style.position = 'fixed';
i.style.bottom = '1px';
i.style.left = '1px';
document.body.appendChild(i);
}

"IMG.cgi" is a Perl script that creates an image. :)

e.g. http://tobyinkster.co.uk/
 
D

David Dorward

No, it's essential with IE6. If you use <script src="foo" /> then the
page vanishes, because IE treats the whole eleemnt as the opening tag of
<script> </script> anyway
Click to expand...

Yes, but the example of code I said was wrong had an extra slash at the end
too - which should not be there.
 
D

David Dorward

So, the key is the dtd? Once one uses the XHTML dtd then one must
either use an ending tag or the 'self closing' technique of a space and
forward slash.
Click to expand...

ish. I'm not quite sure about how much the DTD has to say about it being an
XML DTD rather then an SGML DTD.
Well, I guess that I could but the book I have says the following:
Quote:
If you take comfort in having your source code successfully pass XHTML
validation, you can specify the XHTML document type at the top of your
documents. .........and later....But even if you are not overly
concerned with following the XHTML recommendation, you should
nevertheless gravitate toward it's formatting requirements; they will
become the norm........
Click to expand...

Possibly, but not for a long time, and in the meantime there aren't many
browsers which actively support XHTML, and there are some which have
problems when they interpret XHTML under HTML rules. (And yes, given my
personal website, I am being a tad hypocritical here. I do plan to convert
it at some stage).
I have all the time in the world to do this. Well, not that much,
but I do have time to learn at my own pace and so I thought, why not do
it right?
Click to expand...

There is nothing wrong with using HTML 4.01 :)
 
A

Andy Dingley

Here is what I was originally talking about; I just went out and found
an example page that had this:

<link rel="stylesheet" href="/css/navSimple.css" type="text/css" />
Click to expand...

<link> <meta> <br> & <hr> are all EMPTY elements. They are defined by
the DTD to not have content. Never. So for these, the best "Appendix C
XHTML" approach is to use the <br /> form.

<script> is not an EMPTY element. If you use an external script then the
element may be empty in that one instance, but it's definition still
isn't empty. So for that case you can use <script ... ></script> and
because of the IE issue, you pretty much have to.

If you've got access to the CIW course material, there's some complete
garbage in there about
<title/>My Page's Title

which is worth reading for a laugh, if nothing else.
 

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

Help with my responsive home page 2
How to position the *tooltip* comment on these buttons? 9
Help with code 0
Fading effect between play and play-over and pause and pause-over 0
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
<Button ...> display is fine, except for two things 1
Clickable Div Block 1
Different font sizes inside same div 2

Members online

No members online now.
Total: 94 (members: 0, guests: 94)
Robots: 241

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top