473,856 Members | 1,773 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

BoxOver - easy to use floating captions

I just finished developing a javascipt component allowing floating
captions to appear over HTML elements.

If anyone wants to check it out you can see specs and download it from
http://boxover.swazz.org.

There is a demo there as well.
Jul 23 '05 #1
3 9262
[Mailed to OP]

On 1 Nov 2004 12:32:46 -0800, Oliver Bryant <wa****@gmail.c om> wrote:
I just finished developing a javascipt component allowing floating
captions to appear over HTML elements.

If anyone wants to check it out you can see specs and download it from
http://boxover.swazz.org.


First of all, apologies to the OP. I'm mailing you as I'm not sure if
you're still watching this group.

Secondly, the presentation is nice, but there are a couple of important
comments I would like to make.

One huge problem with this is that the title attribute is thoroughly
raped. For your script to work, the author must enter text that meets a
specific format. However, how will that be dealt with by accessibility
devices like Braille and screen readers, or users with Javascript disabled
but browsers that render the title content?

Authors that are required by law to produce accessible sites (a growing
number) might like your script, but they will be completely unable to use
it. The text for the caption can be specified by the content of the title
attribute, but that should be it.

I also think you should be more selective when applying the effect. Every
element with a title attribute seems over-the-top.
The web site

- You should validate your HTML and CSS.

See the results for each at:

<URL:http://validator.w3.or g/check?uri=http% 3A%2F%2Fboxover .swazz.org%2F>
<URL:http://jigsaw.w3.org/css-validator/validator?uri=h ttp%3A%2F%2Fbox over.swazz.org% 2F&usermedium=a ll>

- Similar to above: please advocate good development practice.

1) <SCRIPT SRC="BoxOver.js "></SCRIPT>

The SCRIPT element requires the type attribute. Update the snippet to:

<script type="text/javascript" src="BoxOver.js "></script>

2) <DIV style="BORDER: #558844 1px solid;WIDTH:200 px;HEIGHT: 75px">

Pixels values should be avoided for dimensions that are related to text.
Instead, use ems, which are proportional to the height of the current font.

3) Uses: ALT and TITLE replacements

This code is *not* a replacement for the alt attribute. The alt attribute
is a replacement used when the image, form control, applet, or client-side
image map area cannot be rendered. It should not be implied that alt is
for providing tool-tips. That's the job of the title attribute.
The script

- You don't use feature detection.

The first few lines of code look like (wrapped):

document.all ? window.attachEv ent('onload',in it)
: window.addEvent Listener('load' ,init,false);

However, what does document.all have to do with support for
window.attachEv ent? Yes, IE supports document.all and the attachEvent
method, but other browsers do support document.all but probably not
attachEvent.

See <URL:http://www.jibbering.c om/faq/faq_notes/not_browser_det ect.html>
for more information.

- You pollute the global namespace.

Anyone that has written non-trivial code in any language will tell you
that global variables, especially in library code, are a bad idea. If
anyone happens to use a variable name that matches one of yours, its
likely that either their script, or yours, will break.

It's also quite curious that in some cases, you choose global scope when
it should clearly be local.

You might want to read a post I recently made on c.l.js
<URL:http://groups.google.c om/groups?threadm= opsgt8lmmvx13kv k%40atlantis>
in the thread "Define prefix MM to function". That link may not be active
yet.

- Overuse of the style object.

To be honest, I fail to see why you're applying the bulk of your styles
though script when they could be applied through a class or id selector in
a style sheet. Furthermore, there are several instances where you specify
length values, but you fail to include a unit. This is invalid and
conforming browsers should ignore those declarations.

- Bad use of parseInt.

See the FAQ notes regarding type conversion, particularly the section,
"parseInt with a radix argument":
<URL:http://www.jibbering.c om/faq/faq_notes/type_convert.ht ml>.

- Declaring variables without using var.

Related to an earlier point, you introduce some variables without using
the var keyword. Most of these should only be local, so the var keyword
must be used in such cases. However, I (certainly) regard it as good
practice that all variables, global or not, should be declared with the
var keyword.

One last, much more minor point:

curNode.hasbox= 'true';

seems a little odd. Why not use a boolean?

I wouldn't call this list exhaustive, but it would certainly resolve the
majority of problems. I haven't for example, examined the positioning code
moveMouse() in any great detail.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #2
Hi Michael.
Thanks for taking the time and effort to review the component so
thoroughly.

"Michael Winter" <M.******@bluey onder.co.invali d> wrote in message news:<opsgue4fs ix13kvk@atlanti s>...
[Mailed to OP]

On 1 Nov 2004 12:32:46 -0800, Oliver Bryant <wa****@gmail.c om> wrote:
I just finished developing a javascipt component allowing floating
captions to appear over HTML elements.

If anyone wants to check it out you can see specs and download it from
http://boxover.swazz.org.
First of all, apologies to the OP. I'm mailing you as I'm not sure if
you're still watching this group.


No worries about the mail, I am still watching the group though ;)
Secondly, the presentation is nice, but there are a couple of important
comments I would like to make.

One huge problem with this is that the title attribute is thoroughly
raped. For your script to work, the author must enter text that meets a
specific format. However, how will that be dealt with by accessibility
devices like Braille and screen readers, or users with Javascript disabled
but browsers that render the title content?
Couldn't work out if you were taking the piss here to start. I have
the deepest regard for handicapped people in any form, but I have no
idea how a Braille screen reader works and quite frankly don't think
that this is a major consideration when talking about a javscipt
component.
Authors that are required by law to produce accessible sites (a growing
number) might like your script, but they will be completely unable to use
it. The text for the caption can be specified by the content of the title
attribute, but that should be it.
Boxover is very similar to a component called overlib. Overlib is
currently used on sites like NASA and HP - sites which would be under
the highest of scrutiny. So I disagree, people will be able to use
it. In my experience the most important factor is how many browsers a
javascript component will work under.
I also think you should be more selective when applying the effect. Every
element with a title attribute seems over-the-top.
This is a good point. I will include a modification which will check
for a keyword siginifying whether a caption should appear or not.

The web site

- You should validate your HTML and CSS.

See the results for each at:

<URL:http://validator.w3.or g/check?uri=http% 3A%2F%2Fboxover .swazz.org%2F>
<URL:http://jigsaw.w3.org/css-validator/validator?uri=h ttp%3A%2F%2Fbox over.swazz.org% 2F&usermedium=a ll>

- Similar to above: please advocate good development practice.

1) <SCRIPT SRC="BoxOver.js "></SCRIPT>

The SCRIPT element requires the type attribute. Update the snippet to:

<script type="text/javascript" src="BoxOver.js "></script>
I think this is being overly pedantic. I've never had a problem with
not including the type attribute. From a theoretical (and possibly
legacy) standpoint, sure. But on the field this works in all browsers
I've seen.
2) <DIV style="BORDER: #558844 1px solid;WIDTH:200 px;HEIGHT: 75px">

Pixels values should be avoided for dimensions that are related to text.
Instead, use ems, which are proportional to the height of the current font.
Admittedly I don't have any experience with the "em" unit. However I
have designed tons of websites and the "px" unit has never done me any
wrong. But I'm not in a fair position to compare the two.
3) Uses: ALT and TITLE replacements

This code is *not* a replacement for the alt attribute. The alt attribute
is a replacement used when the image, form control, applet, or client-side
image map area cannot be rendered. It should not be implied that alt is
for providing tool-tips. That's the job of the title attribute.
My apologies. I was originally considering making the component
configurable through the ALT tag as well. I have modified the site.

The script

- You don't use feature detection.
Of course I use feature detection. How does it work in different
browsers then?
The first few lines of code look like (wrapped):

document.all ? window.attachEv ent('onload',in it)
: window.addEvent Listener('load' ,init,false);

However, what does document.all have to do with support for
window.attachEv ent? Yes, IE supports document.all and the attachEvent
method, but other browsers do support document.all but probably not
attachEvent.

See <URL:http://www.jibbering.c om/faq/faq_notes/not_browser_det ect.html>
for more information.
The code in this component works in all major browsers. I did it
myself and I know it works. The browser detection at this link checks
all sorts of things indirectly.

I believe that checking the actual existence of a property or object
is better - you don't have to rely on some derived browser value
earlier and then use a redundant condition which separates code for
each of the browsers. This uses more code and relies on you having
detected the correct browser earlier. Checking the object directly
and then loading the appropriate object into a variable which can then
manipulated with the same logic is better in my opinion.
- You pollute the global namespace.

Anyone that has written non-trivial code in any language will tell you
that global variables, especially in library code, are a bad idea. If
anyone happens to use a variable name that matches one of yours, its
likely that either their script, or yours, will break.

It's also quite curious that in some cases, you choose global scope when
it should clearly be local.
I'm sure people will tell me all sorts of things - but they normally
apply to the general case. I designed this with low CPU usage in mind
and it is a hell of a lof more efficient using global variables.
Using local variables means recreating them each time an event is
fired - javascript is already pretty inefficient as a language. My
reasons for using global variables are justified with regards to
performance.
You might want to read a post I recently made on c.l.js
<URL:http://groups.google.c om/groups?threadm= opsgt8lmmvx13kv k%40atlantis>
in the thread "Define prefix MM to function". That link may not be active
yet.

- Overuse of the style object.

To be honest, I fail to see why you're applying the bulk of your styles
though script when they could be applied through a class or id selector in
a style sheet. Furthermore, there are several instances where you specify
length values, but you fail to include a unit. This is invalid and
conforming browsers should ignore those declarations.
The reason is simple. When somebody downloads boxover I want the
default manifestitation to look nice and be as easy to use as
possible. One souce file, one <script> tag, and altering a title
attribute - easy as that. Using classes would mean an extra
stipulation for the user to consider when setting it up (I couldn't
find any way to define a class inside the component source).
The component is designed so that a user can apply a style class to
any caption if they desire - but that might be out of scope for some
users so I thought defaulting to a nice looking default was best.
- Bad use of parseInt.

See the FAQ notes regarding type conversion, particularly the section,
"parseInt with a radix argument":
<URL:http://www.jibbering.c om/faq/faq_notes/type_convert.ht ml>.
Fair enough. That is a good article - thanks for the link. I
normally use parseInt to ensure that mathematical expressions are
evaluated correctly, e.g. so that 1 + 1 = 2 and not 11 (if it
considers + to indicate concatenation of strings rather than numerical
addition). I don't like that fact that the article refers to it as
inefficient. This I will look in to.
- Declaring variables without using var.

Related to an earlier point, you introduce some variables without using
the var keyword. Most of these should only be local, so the var keyword
must be used in such cases. However, I (certainly) regard it as good
practice that all variables, global or not, should be declared with the
var keyword.

One last, much more minor point:

curNode.hasbox= 'true';

seems a little odd. Why not use a boolean?
Yeah quite right. I should have used boolean. Must have been one of
those late nights ;)
I wouldn't call this list exhaustive, but it would certainly resolve the
majority of problems. I haven't for example, examined the positioning code
moveMouse() in any great detail.
Mike


I reckon the list is pretty exhaustive!

In conclusion, I appreciate your criticisms but I think that some are
unjustified. I spent hours on this component looking at all possible
trade offs. It has been designed to work in all major browsers -
Opera, IE, firefox, mozilla at very little CPU. These were my
strongest considerations when coding.

Thanks again for the in depth look you took into the component. I'll
be sure to ask your opinion on javascript matters in the future!
Jul 23 '05 #3
On 3 Nov 2004 05:47:35 -0800, Oliver Bryant <wa****@gmail.c om> wrote:

[snip]
One huge problem with this is that the title attribute is thoroughly
raped.
[snip]
Couldn't work out if you were taking the piss here to start.
Not at all.
I have the deepest regard for handicapped people in any form, but I have
no idea how a Braille screen reader works and quite frankly don't think
that this is a major consideration when talking about a javscipt
component.
It doesn't concern the script, but the HTML required to use it. What do
you think someone is supposed to make of the CSS properties, for example,
that can be specified when the title attribute is rendered by the user
agent? Reading out "cssheader=[color: #005A9C;]" is nonsense. Even for
able users that have scripting disabled, what are they supposed to with
that when it's displayed?

This is what I was referring to: you destroy the intended functionality of
the attribute. Now I'll grant that it's not the most important of
attributes, but that isn't much of an excuse.

[snip]
The SCRIPT element requires the type attribute. Update the snippet to:

<script type="text/javascript" src="BoxOver.js "></script>


I think this is being overly pedantic.


Really? You have a problem with writing valid HTML?

[snip]
Pixels values should be avoided for dimensions that are related to
text. Instead, use ems, which are proportional to the height of the
current font.


Admittedly I don't have any experience with the "em" unit. However I
have designed tons of websites and the "px" unit has never done me any
wrong. But I'm not in a fair position to compare the two.


Font sizes should be specified with a relative unit, such as em or
percent. It's another accessibility issue. Because of this, it obviously
doesn't make sense to use absolute units to position things as the font
size might not be what you expect. Using em will account for the variation
in font dimensions that can occur between different families, and the same
families on different platforms, as 1em is always the height of the font.

[snip]
Of course I use feature detection. How does it work in different
browsers then?
You use it in two locations, as far as I can tell, and its effectively the
same code.

Feature detection is exactly the same in every browser. Perhaps you should
read the article I linked to again more closely.

[snip]
See <URL:http://www.jibbering.c om/faq/faq_notes/not_browser_det ect.html>
for more information.


The code in this component works in all major browsers. I did it myself
and I know it works. The browser detection at this link checks all
sorts of things indirectly.


That document does not perform browser detection. It shows some common
browser detection patterns, then immediately states why they're reckless
and unreliable. As I said, I think you should read it more closely.
I believe that checking the actual existence of a property or object is
better
Which is precisely what the document describes, but it's not what you do.
The vast majority of methods and objects used are never tested for support.

[snip]
Checking the object directly and then loading the appropriate object
into a variable which can then manipulated with the same logic is better
in my opinion.
Excellent. Now do it.

[Regarding globals]
I'm sure people will tell me all sorts of things - but they normally
apply to the general case. I designed this with low CPU usage in mind
and it is a hell of a lof more efficient using global variables.
The variables I'm considering have no application whatsoever outside the
scope of their respective functions. Making them global is not any
quicker, can lead to script clashes, and serves no actual purpose.
Using local variables means recreating them each time an event is fired
- javascript is already pretty inefficient as a language.
Don't confuse the language with its implementations .
My reasons for using global variables are justified with regards to
performance.


Local variable initialisation is trivial, time-wise. It's no excuse to
resort to bad practice.

[snip]
<URL:http://groups.google.c om/groups?threadm= opsgt8lmmvx13kv k%40atlantis>


Out of interest, did you read that (only some of it is relevant to this
subject)?

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
1710
by: George Hester | last post by:
At the time this suggestion was made I didn't have the wherewithall to even attempt it. But over time I learned enough to make a stab at it. Let just say the foating DIV had to provide the same advantages as a chromeless window else it really wouldn''t help. You see the idea is that the chromeless window forces a client to make a choice. It cannot be closed until a choice is made. If the user decides not to allow the chromeless window to...
10
10707
by: Florian Brucker | last post by:
There are several tutorials on the net showing you how to create a thumbnail gallery with floating thumbails which automagically uses all horizontal space available (e.g. http://css.maxdesign.com.au/floatutorial/tutorial0407.htm). However all of them use images which are all equal in size - and that's not the case with my thumbnails. The method itself still works, however I want to center all the images in a row vertically with the highest...
4
2738
by: CB US 77 | last post by:
I use a piece of javascript to create a photo gallery slideshow. The slideshow part works great, but I would like to add captions to each picture. If you want to see the html, send me an email to usb15@cox.net. Any help would be great.
17
2283
by: Stian Lund | last post by:
Hello, I've been struggling with this problem for a while now, so I though I'd get some input from anyone more skilled with CSS than I am. I'm actually trying to accomplish two things with this: 1. Create a floated image with text around, with a caption centered underneath. Image size can be varied but the caption needs to have a fixed size to make it break correctly I think. I also need the image to resize automatically when the...
2
15880
by: Benjamin Rutt | last post by:
Does anyone have C code laying around to do this? I have to read in some binary data files that contains some 4-byte IBM/370 floating point values. I would like a function to convert 4-byte IBM/370 float values into IEEE 754 'float' values that I can use directly with any modern C environment (that uses IEEE 754). I can handle endian conversion myself (the files are stored as big endian, and I'll process them on a little endian...
5
2331
by: | last post by:
I nearly always use HTML in notepad, but I'm looking for a solution to what I think will be a common problem. I want to add a caption to photos that have been scanned in to make a single picture. I usually use Irfanview, but not the latest version, and I have Fireworks. Is there any easy way of using these or HTML to add captions? Colin
7
5953
by: Johnny | last post by:
In MSIE table captions are displayed at the same size as content. But in Firefox the text displays at browser default, It also exceeds the width of the table and the excess is hidden if the table is enclosed in a bounding div. If caption is given a font-size (eg 0.8em) with CSS text it displays correctly, however MSIE then shows the text too small.
16
5261
malav123
by: malav123 | last post by:
Hi, I am using Boxover tooltip with textboxes for help of user input form, and it works well on mouse over and mouse out event but my problem is that this tooltip not works with textbox getfocus and lostfocus event... and without such events working the tooltip is useless in my project... so please give me a solution for my problem... thanks in advance... awaiting for your reply....
5
6789
by: Adam Smith | last post by:
Hello, Several of the newer, more professional web sites are using a newspaper columnar layout, with text and links discretely contained in rectangular boxes (square or rounded), frequently with colored 'Title' tabs at the top. How are these boxes generated, are they using 'floating boxes' juxtapositioned to create the layout effect?
0
9916
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
11056
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10696
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10782
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10384
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5761
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5958
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4575
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4174
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.