Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > getting a mouseover on a 'div'

Reply
Thread Tools

getting a mouseover on a 'div'

 
 
Andy Dingley
Guest
Posts: n/a
 
      05-14-2005
On Sat, 14 May 2005 16:49:07 +0100, David Dorward <(E-Mail Removed)>
wrote:

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

>
>That's just plain wrong.


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

 
Reply With Quote
 
 
 
 
Andy Dingley
Guest
Posts: n/a
 
      05-14-2005
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/realwor...ntcontence.htm

 
Reply With Quote
 
 
 
 
fritz
Guest
Posts: n/a
 
      05-14-2005
Andy Dingley wrote:
> On Sat, 14 May 2005 16:49:07 +0100, David Dorward <(E-Mail Removed)>
> wrote:
>
>
>>>And I see in examples on the web, this being used in things such as this:
>>><script... > </script />

>>
>>That's just plain wrong.

>
>
> 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
>



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.
 
Reply With Quote
 
fritz
Guest
Posts: n/a
 
      05-14-2005
Andy Dingley wrote:
> 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/realwor...ntcontence.htm
>

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.
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      05-14-2005
fritz wrote:

> 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.


=============== 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.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
fritz
Guest
Posts: n/a
 
      05-14-2005
Toby Inkster wrote:
> fritz wrote:
>
>
>>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.

>
>
> =============== 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.
>

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.
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      05-15-2005
fritz wrote:

> 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.}


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?


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).innerH TML;
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/

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      05-15-2005
Andy Dingley wrote:

>>> <script... > </script />


>>That's just plain wrong.


> 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


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

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      05-15-2005
fritz wrote:

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


> 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.


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........


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?


There is nothing wrong with using HTML 4.01


--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      05-15-2005
On Sat, 14 May 2005 11:08:59 -0700, fritz <(E-Mail Removed)> wrote:

>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" />


<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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
mouseover highlight of datagrid row TJS ASP .Net 1 02-17-2004 01:36 PM
How can I do text1.text=dropdownlist1.DataTextField on "dropdownlist1.MouseOver"? Morten ASP .Net 2 12-19-2003 06:16 PM
ASP dotnet question - mouseover Steve Chatham ASP .Net 1 11-17-2003 08:32 PM
Need help with hyperlink mouseover wazoo ASP .Net 2 10-24-2003 06:27 PM
Re: LinkButtons and MouseOver Vidar Petursson ASP .Net 1 07-09-2003 07:10 AM



Advertisments